[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