Clip-path and shape-outside help

[413Michele]

Hello everyone,

I'm digitizing a book for my personal use and I'm having some trouble with the use of clip-path and shape-outside properties. In the book there are non-rectangular images such as this one, to which the text adapts:



After studying various possibilities (like splitting the images in 2 parts) I decided to make an EPUB2 file with two EPUB3 extensions, clip-path and shape-outside for the pictures, so that updated readers would show the text framed and EPUB2-only readers could still read the file.

The problem I have is that in the Calibre Viewer the text is framed only in Flow mode, not in Paged. The same in Lithium for Android.

Does anyone know what I might be doing wrong? I attached a chapter as a demo. Thank you in advance!

[jhowell]

I do not know enough about how those reading platforms work to understand why this does not work correctly in paged mode.

I did notice from a bit of testing that it works better, but not perfectly, if the caption below the image is left out.

[413Michele]

Yeah, another thing I noticed is that the text reflows around the caption, but not around the picture... this would point towards a problem with the CSS, or maybe with the viewer implementation, who knows

I might try asking on the calibre bug platform, but it's like that in other apps too

[jhowell]

Originally Posted by 413Michele

I might try asking on the calibre bug platform, but it's like that in other apps too

Calibre uses Qt WebEngine, based on Chromium, for HTML rendering. Chrome and Chromium are likely behind many EPUB readers. I doubt that anything can be done in calibre to address this.

[fbrzvnrnd]

There is some app reader that support this? Apple Books seems to fail the rendering too...

[413Michele]

Originally Posted by fbrzvnrnd

There is some app reader that support this? Apple Books seems to fail the rendering too...

For what it's worth, it works here and here

It also works in Lithium for Android, but only in Scrolled mode

[413Michele]

Originally Posted by jhowell

Calibre uses Qt WebEngine, based on Chromium, for HTML rendering. Chrome and Chromium are likely behind many EPUB readers. I doubt that anything can be done in calibre to address this.

It works in one of the calibre viewer modes though, so the CSS features are at least supported. The problem might arise when the html text is split into pages, instead of having a single flow for each file.

[413Michele]

Ok, it is confirmed that the problem is in the Chromium web engine, after I filed an issue in the calibre bug tracker and Kovid answered me.

A pity, but it seems that nothing can be done

[RbnJrg]

Originally Posted by 413Michele

Ok, it is confirmed that the problem is in the Chromium web engine, after I filed an issue in the calibre bug tracker and Kovid answered me.

A pity, but it seems that nothing can be done

Why a pity? Of course that something can be done

First at all, don't use the clip-path property. You can, but is easier to rest ONLY in the property shape-outside. And since you are using .png images, better yet.

The main drawback is also to have a caption with the image, but if you add the text to images, then all issues are solved.

Do the following:

1. Open your .png images in a image processor (Photoshop, Gimp, etc.).
2. Convert your images to RGB.
3. Add an alpha channel to your images (in Gimp, Layer>Transparency>Add Alpha Channel).
4. After that, select the regions (or region) of the images to be filled with text (no matter the shape of the regions, triangular, rectangular, in star shape, whatever).
5. Once you have selected the regions, you must make them transparent. In Gimp, Layer > Transparency > Color to Alpha.
6. Done with Layer. Now if your images have captions, add the respective text to them with the Text tool of the image processor.
7. Save the images and load them in Sigil.

Now, in your .xhtml file, write the following:

  <p>Dal punto dove si trovavano, ... neanche approssimativa alla domanda dell'ingegnere Smith.</p>

  <p class="jump"><img id="part1c10_1" src="../images/part1c10_1.png" alt="" /></p>

  <p>Alla una del pomeriggio, si rimisero in cammino. Passando sotto un bosco ceduo, si scorsero molti ... e Pencroff esclamò additandoli:</p>

And in your .css stylesheet write:

#part1c10_1 {
    width: 100%;
    float: right; /* This property is very important, even with a width of 100% */
    margin: 1em 0 0;
    shape-outside: url("../images/part1c10_1.png");
    shape-margin: 5px; /* Of course, you can change this value */
}

That's all. Now you have the text with the design you wanted: in Sigil, Calibre (in paged mode), Lithium, PocketBook, Gitden Reader, Reasily and any app based on Webkit or Readium.

However take into account that you are working under epub2 and epub2 doesn't support the shape-outside property. You should work under epub3. If you are going to use images only in L-shapes (or inverted L), there are other ways to get that effect for epub 2 (and only with css2.1 properties).

See how your epub looks under Sigil and Calibre:



And here you can see how it looks under Readium, BibiReader and EpubJSReader:



I also attach a new epub so you can watch better how the code works.

Regards
Rubén

[KevinH]

Nicely Done!

[413Michele]

Hey, thanks RbnJrg! Right now I'm a bit busy but I'll try your method in the coming days.

As for shape-outside support, my goal is to have a backward-compatible e-book, so I'm using EPUB2 with the two unsupported features (clip-path and shape-outside) under an @supports rule, which should be "legal" and most importantly doesn't cause problems with unsupported devices.

I'm interested in the ways to make it work in EPUB2, but I think I explored them already and I decided against them. And honestly, L-shaped images are not fundamental, they're a nice to have on modern readers but the important thing is that the file is readable. Right now you have some white spaces and it's ok

[RbnJrg]

Originally Posted by 413Michele

I'm interested in the ways to make it work in EPUB2, but I think I explored them already and I decided against them.

Maybe you didn't find the proper way . Text around images in L-shape can be achieve; morever, with support by ADE 2. I have some posts about the topic in this forum.

And honestly, L-shaped images are not fundamental, they're a nice to have on modern readers but the important thing is that the file is readable.

Read this post:

https://www.mobileread.com/forums/sh...17&postcount=1

But nowadays, there are more android apps that can reproduce those layouts. Not only PocketBook, but also Gitden Reader (the last version 4.5.4a is not found in PlayStore, you must download it from the developer's site), Reasily, Lithium and any app or program based on WebKit (i.e. Sigil, Calibre Viewer) or Readium engines. Althought Lithium (it seems to be your prefer app) doesn't support MathML nor TTS (like PocketBook or Gitden).

Right now you have some white spaces and it's ok

White spaces can be managed. If you want, text can be with a 0 gap regarding the images; that is not an issue

Regards