Image styling css... what do all these properties do?

[Falkor]

Originally Posted by RbnJrg

Very nice! Just I need to make a small adjustment to the L-shaped image; a typical case of a splitted image. Other images will probably also split if you increase the font size. Could you do that and check if any additional images split? It good be great if only the L-Shape image is affected.

I can make this one split, but it was tricky. It would only do it at one particular size.

I think it tries not to break images by default.
Seems like -webkit-column-break-inside, page-break-inside and break-inside are not supported, so it’s difficult to keep things together.

[DiapDealer]

Originally Posted by RbnJrg

I use Calibre installed by pacman, so it uses Qt6.9.1 and Python 3.13.3. But the same behaviour was present in my Calibre since always (Calibre installed by pacman). But again, if in all others system Calibre works fine and in Archlinux -in the version installed by pacman- it doesn't, then the webkit property must be added because we don't know where and how the human reader will employ Calibre Viewer to read the epubs.

I have bad news. I also install calibre via pacman on my Arch system, and the colored text is rendering just fine without "-webkit-text-fill-color: red" and "-webkit-text-fill-color: blue" needing to be added.

[RbnJrg]

Originally Posted by DiapDealer

I understand your reasoning on the webkit prefix stuff being tangentially related to epub3 via the systems its being rendered on, but I myself would not feel comfortable including it in an actual, for-distribution, epub's css. Only because my reading of the latest epub spec indicates that the only css prefix still a part of the spec is -epub. I'm not judging though. You do you.

https://www.w3.org/TR/epub-33/#sec-css-prefixed

I include both, standard and webkit properties. For example, if I want to force a page break, I include in the respective style:

.breakPage {
  page-break-after: always;
  break-after: always;
  -webkit-column-break-after: always;
}

Maybe can be a surprise for you but if you want to force a break in any of the Sigil's plugin (Readium, Bibi Reader, JSReader) you need to employ "-webkit-column-break-after: always" because they don't honor the standard property.

[RbnJrg]

Originally Posted by DiapDealer

I have bad news. I also install calibre via pacman on my Arch system, and the colored text is rendering just fine without "-webkit-text-fill-color: red" and "-webkit-text-fill-color: blue" needing to be added.

Well, it can be good news. If the issue is only affecting my system then is good to know that something is altering the way that the epubs are being displaying in my Arch.

[RbnJrg]

Originally Posted by Falkor

I can make this one split, but it was tricky. It would only do it at one particular size.

Thank you very much for your test in your phisical device.

I think it tries not to break images by default.
Seems like -webkit-column-break-inside, page-break-inside and break-inside are not supported, so it’s difficult to keep things together.

Images shouldn't split never; the code I employed should force that no matter the font-size. And it DOES, but in some ereades (very very few), the split appears. To deal with those cases and so to avoid splitting, I have to employ more elaborated styles (not present in the sample). What you say is exact: -webkit-column-break-inside, page-break-inside and break-inside are not being supported properly in your device. Your ereader tries to honor the code to avoid blank spaces (and it does it) but to get that, it splits images.

[Falkor]

Originally Posted by RbnJrg

Thank you very much for your test in your phisical device.

You're welcome

This renderer has plenty of issues, so this is a great opportunity for me to figure out workarounds or crucial details that I've been missing.

Originally Posted by RbnJrg

What you say is exact: -webkit-column-break-inside, page-break-inside and break-inside are not being supported properly in your device. Your ereader tries to avoid blank spaces (and it does it) but to get that, it splits images.

Actually for a couple of versions it has been creating loads of blank pages. And I've managed to split lines of text

Both issues might be caused by having margins (in %) at the top of a page –*are they no longer supported in Epub3? I had to use 100vh to get a full page image. With 100% height I'd get a line of text under the image.

[JSWolf]

Originally Posted by Falkor

You're welcome

This renderer has plenty of issues, so this is a great opportunity for me to figure out workarounds or crucial details that I've been missing.



Actually for a couple of versions it has been creating loads of blank pages. And I've managed to split lines of text

Both issues might be caused by having margins (in %) at the top of a page –*are they no longer supported in Epub3? I had to use 100vh to get a full page image. With 100% height I'd get a line of text under the image.

A margin for the top of the page should be in em.

[Falkor]

I just gave it a try: A margin in em causes the same problem. With no margin, the empty pages disappear.
That doesn't fix the split lines of text, though.

[DNSB]

I suspect what Jon wants is to set the margin to 0em (or rem).

[PeterT]

Originally Posted by Falkor

Here you go, screenshots from my Shine 5

Brilliant; thanks

[RbnJrg]

Originally Posted by Falkor

Actually for a couple of versions it has been creating loads of blank pages. And I've managed to split lines of text

Both issues might be caused by having margins (in %) at the top of a page –*are they no longer supported in Epub3? I had to use 100vh to get a full page image. With 100% height I'd get a line of text under the image.

I don't know how your Tolino Shine 5 renders the things, but try the following code to display a full page image (without no text line below):

1. In your .xhtml file:

    <figure>
      <div class="picture">
        <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 xxx yyy" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="xxx" height="yyy" xlink:href="../Images/your_image.jpg"/>
        </svg>
      </div>
    </figure>

2. In your .css stylesheet:

  figure {
    float: left;
    display: flex;
    width: 100%;
    height: 100%;
    line-height: 1.2em; /* Or the line-height you are using for <p> */
    margin: 0;
    text-align: center;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .picture {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.2em;
    box-sizing: border-box;
    margin: 0;
    text-align: center;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    overflow: hidden !important;
  }

  .picture svg {
    display: block;
    margin: auto;
    overflow: hidden !important;
    height: 100vh !important;
  }

Regarding margin-top, you can employ "%" but instead of that, in your Tolino I would employ "vh" (also is valid to employ "em" but if you increase the font-size, also will increase the margin-top and maybe you don't want that).

PS: Of course, this is epub3 code.

[Turtle91]

Originally Posted by DNSB

I suspect what Jon wants is to set the margin to 0em (or rem).

I've always understood that units don't matter; if you set 0 then it is zero regardless of the units used, or no units at all. The only caveat would be if the device didn't understand the unit, then it could/would ignore the selection entirely?? So if you just set margin:0 without any units, then you are good to go!

[JSWolf]

Originally Posted by DNSB

I suspect what Jon wants is to set the margin to 0em (or rem).

Never rem. Always em.

[JSWolf]

Originally Posted by Turtle91

I've always understood that units don't matter; if you set 0 then it is zero regardless of the units used, or no units at all. The only caveat would be if the device didn't understand the unit, then it could/would ignore the selection entirely?? So if you just set margin:0 without any units, then you are good to go!

for a margin of 0, without a unit is correct.

[Falkor]

continued from here: https://www.mobileread.com/forums/sh...55#post4519655

Originally Posted by Quoth

A new HTML file always starts at the top of the screen. (epubs converted to old mobi KF7, azw3/KF8 and KFX by Amazon or locally, and any epub renderer doing pages not continuous scrolling)
In such a case "padding-top: <value>em;" seems to always work for the first item, while some renders will remove margin-top at start of a screen and some may remove margin-bottom at the bottom of the screen.

Interesting, I thought it was just be a new bug in the Tolino renderer. Older version handle margins at the top of a page just fine. And it's never been a problem in any other reading software I tried.

Using padding instead of margin will work in most cases. And if I need an actual margin, I can always place a zero height div at top of the page... That does fix the issue.