E-bokk viewer: Image+text+page-break-inside:avoid = issue

[iG0R]

Hi.
I faced the issue with breaking between image and text inside div which has page-break-inside:avoid property.
Could it be somehow solved or fixed?
Thank you.

div:

<div class="Figure" id="Ferrier-ch001-fig012">
<p class="fig-img"><img src="Image00018.jpg" alt="Ferrier7e-ch001-image012"/></p>
<p class="FigTitle"><span class="fignum">Figure*1.12</span> The Henderson-Hasselbalch equation is used to predict: (A) changes in pH as the concentrations of bicarbonate (HCO<sub>3</sub><sup>−</sup>) or carbon dioxide (CO<sub>2</sub>) are altered and (B) the ionic forms of drugs.</p>
</div>

Figure CSS

div.Figure
{
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
margin: 1.5em 0em 1.5em 0em;
}

fig-img CSS

p.fig-img
{
text-align:center;
margin: 10px;
}

FigTitle CSS

p.FigTitle
{
text-align:justify;
font-size: inherit;
margin:0em 0em 0em 0em;
padding:0.15em 0em 0em 0em;
text-indent:0em;
border-top:2px solid black;
}

[DNSB]

Looking at your screenshot, your image is so tall, there is no room for the text below it on the same page. About the only way that would fit on the page you are using is if you used an svg wrapper to automatically resize to the page size. However, svg mixing text and images can be a PITA.

In the MobileRead library, you might want to take a look at Claudio Bombarnac by Julio Verne (uploaded by jbacelar) I remember looking at it a few years back as he used a mix of text and image in an svg wrapper for his title page.

[iG0R]

Originally Posted by DNSB

Looking at your screenshot, your image is so tall, there is no room for the text below it on the same page. About the only way that would fit on the page you are using is if you used an svg wrapper to automatically resize to the page size. However, svg mixing text and images can be a PITA.

Thank you for the answer.
Yes, the image is rather tall, but if I shrink viewer window it fits image and text together.
Is it some way to make viewer avoid breaking inside div without shrinking its window?

[DNSB]

Originally Posted by iG0R

Thank you for the answer.
Yes, the image is rather tall, but if I shrink viewer window it fits image and text together.
Is it some way to make viewer avoid breaking inside div without shrinking its window?

You might try specifying the amount of the div the image is allowed to use. Currently, I can't see where you have specified a size for any of the elements.

[iG0R]

Originally Posted by DNSB

You might try specifying the amount of the div the image is allowed to use. Currently, I can't see where you have specified a size for any of the elements.

I tried the following:

p.fig-img
{
max-height: 90% !important;
text-align:center;
margin: 10px;
}

but get only image and text overlapping

[kovidgoyal]

break-inside:avoid is an advisory property, you cannot enforce it. Wether or not it is respected in any given situation depends on the browsers layout algorithms.

[iG0R]

Originally Posted by kovidgoyal

break-inside:avoid is an advisory property, you cannot enforce it. Wether or not it is respected in any given situation depends on the browsers layout algorithms.

First of all, thank you for your precious work!
Can I clarify the meaning of the term "browser layout algorithm" - did you mean "epub processing engine" without referring to any browser (Firefox, Edge, Chrome, etc.)?
Is it possible to fix Calibre engine to process above mentioned issue properly?
E.g. Calibre-Web displays same Epub without issues (see screenshot) in any browser but I cannot say the same about Calibre E-book viewer or Calibre Content server.

[rjwse@aol.com]

Here is one of many solutions for the problem of long/skinny image with caption. Best regards, Pop

[iG0R]

Originally Posted by rjwse@aol.com

Here is one of many solutions for the problem of long/skinny image with caption. Best regards, Pop

Thank you very much for your advice, but there so many such tall images in the book that I'll need more time to spend as editor than as reader

[kovidgoyal]

The calibre engine is a browser, chromium to be precise.

[iG0R]

Originally Posted by kovidgoyal

The calibre engine is a browser, chromium to be precise.

I've checked above mentioned issue in Firefox 75, Chrome 80, Edge Beta, IE11 and the result is still the same - Calibre-Web's processing is Ok, Calibre E-book viewer and Content server's - not Ok.

[kovidgoyal]

checking them in a regular browser is meaningless. In the book content is split using CSS 3 columns, into pages, with margins. You would need to replicate that in the browser at a minimum to make a decent comparison.

[iG0R]

I get it.
Could it be any hope to fix processing content as it done now in Calibre-Web?

[rjwse@aol.com]

"there so many such tall images in the book that I'll need more time to spend as editor than as reader"

Sorry, I thought you were looking for advice on how to EDIT the book so that long skinny images would stay with caption. If you are just looking for a way to view the book better without editing it, I suggest using the multicolumn Ctrl-[ and Ctrl-] feature of the calibre reader. Images will be followed by caption in next column automatically in a correct alignment. You can zoom the image in calibre's viewer. Best regards, Pop

[iG0R]

Originally Posted by rjwse@aol.com

"there so many such tall images in the book that I'll need more time to spend as editor than as reader"

Sorry, I thought you were looking for advice on how to EDIT the book so that long skinny images would stay with caption. If you are just looking for a way to view the book better without editing it, I suggest using the multicolumn Ctrl-[ and Ctrl-] feature of the calibre reader. Images will be followed by caption in next column automatically in a correct alignment. You can zoom the image in calibre's viewer. Best regards, Pop

Thank you very much, Pop, for your concern.
For me and, IMHO, for many other ones more comfortable max 2 column to read such books, hence it would be great if this issue would be fixed in Calibre E-book reader.