Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre

Notices

Closed Thread
 
Thread Tools Search this Thread
Old 04-10-2020, 07:05 PM   #1
iG0R
Enthusiast
iG0R began at the beginning.
 
Posts: 36
Karma: 10
Join Date: Apr 2020
Device: PC
E-bokk viewer: Image+text+page-break-inside:avoid = issue

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:
Code:
<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
Code:
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
Code:
p.fig-img
{
text-align:center;
margin: 10px;
}
FigTitle CSS
Code:
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;
}
Attached Thumbnails
Click image for larger version

Name:	Calibre-page-break-issue-2020-04-11_011743_2.jpg
Views:	173
Size:	369.0 KB
ID:	178251  
iG0R is offline  
Old 04-10-2020, 07:11 PM   #2
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 37,023
Karma: 148321038
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
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.

Last edited by DNSB; 04-10-2020 at 07:25 PM.
DNSB is offline  
Advert
Old 04-10-2020, 07:24 PM   #3
iG0R
Enthusiast
iG0R began at the beginning.
 
Posts: 36
Karma: 10
Join Date: Apr 2020
Device: PC
Quote:
Originally Posted by DNSB View Post
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?
Attached Thumbnails
Click image for larger version

Name:	Calibre-page-break-issue-2-2020-04-11_021421_2.jpg
Views:	124
Size:	193.4 KB
ID:	178252  
iG0R is offline  
Old 04-10-2020, 07:28 PM   #4
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 37,023
Karma: 148321038
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
Quote:
Originally Posted by iG0R View Post
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.
DNSB is offline  
Old 04-10-2020, 07:58 PM   #5
iG0R
Enthusiast
iG0R began at the beginning.
 
Posts: 36
Karma: 10
Join Date: Apr 2020
Device: PC
Quote:
Originally Posted by DNSB View Post
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:
Code:
p.fig-img
{
max-height: 90% !important;
text-align:center;
margin: 10px;
}
but get only image and text overlapping
Attached Thumbnails
Click image for larger version

Name:	Calibre-page-break-issue-3-2020-04-11_025231_2.jpg
Views:	94
Size:	319.5 KB
ID:	178256  
iG0R is offline  
Advert
Old 04-10-2020, 09:32 PM   #6
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 44,036
Karma: 22669822
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
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.
kovidgoyal is online now  
Old 04-11-2020, 10:21 AM   #7
iG0R
Enthusiast
iG0R began at the beginning.
 
Posts: 36
Karma: 10
Join Date: Apr 2020
Device: PC
Quote:
Originally Posted by kovidgoyal View Post
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.
Attached Thumbnails
Click image for larger version

Name:	Calibre-Web-page-break-2020-04-11_164348_2.jpg
Views:	102
Size:	347.7 KB
ID:	178284   Click image for larger version

Name:	Calibre-Server-2020-04-11_164933_2.jpg
Views:	109
Size:	307.0 KB
ID:	178285   Click image for larger version

Name:	Calibre-Server-2020-04-11_165121_2.jpg
Views:	93
Size:	351.6 KB
ID:	178286  
iG0R is offline  
Old 04-11-2020, 10:56 AM   #8
rjwse@aol.com
Addict
rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.
 
rjwse@aol.com's Avatar
 
Posts: 289
Karma: 2228060
Join Date: Dec 2013
Location: LaVernia, Texas
Device: kindle epub readers on android
long skinny image with caption

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

Name:	Screenshot from 2020-04-11 09-49-06.png
Views:	112
Size:	639.8 KB
ID:	178287   Click image for larger version

Name:	Screenshot from 2020-04-11 09-49-16.png
Views:	113
Size:	194.8 KB
ID:	178288   Click image for larger version

Name:	Screenshot from 2020-04-11 09-49-20.png
Views:	112
Size:	464.1 KB
ID:	178289   Click image for larger version

Name:	Screenshot from 2020-04-11 09-49-26.png
Views:	112
Size:	436.2 KB
ID:	178290   Click image for larger version

Name:	Screenshot from 2020-04-11 09-49-42.png
Views:	109
Size:	365.7 KB
ID:	178291   Click image for larger version

Name:	Screenshot from 2020-04-11 09-49-56.png
Views:	120
Size:	146.4 KB
ID:	178292   Click image for larger version

Name:	Screenshot from 2020-04-11 09-50-03.png
Views:	115
Size:	523.5 KB
ID:	178293  
rjwse@aol.com is offline  
Old 04-11-2020, 11:33 AM   #9
iG0R
Enthusiast
iG0R began at the beginning.
 
Posts: 36
Karma: 10
Join Date: Apr 2020
Device: PC
Quote:
Originally Posted by rjwse@aol.com View Post
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
iG0R is offline  
Old 04-11-2020, 11:42 AM   #10
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 44,036
Karma: 22669822
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
The calibre engine is a browser, chromium to be precise.
kovidgoyal is online now  
Old 04-11-2020, 11:52 AM   #11
iG0R
Enthusiast
iG0R began at the beginning.
 
Posts: 36
Karma: 10
Join Date: Apr 2020
Device: PC
Quote:
Originally Posted by kovidgoyal View Post
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.
iG0R is offline  
Old 04-11-2020, 12:02 PM   #12
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 44,036
Karma: 22669822
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
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.
kovidgoyal is online now  
Old 04-11-2020, 12:09 PM   #13
iG0R
Enthusiast
iG0R began at the beginning.
 
Posts: 36
Karma: 10
Join Date: Apr 2020
Device: PC
I get it.
Could it be any hope to fix processing content as it done now in Calibre-Web?
iG0R is offline  
Old 04-11-2020, 12:53 PM   #14
rjwse@aol.com
Addict
rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.rjwse@aol.com ought to be getting tired of karma fortunes by now.
 
rjwse@aol.com's Avatar
 
Posts: 289
Karma: 2228060
Join Date: Dec 2013
Location: LaVernia, Texas
Device: kindle epub readers on android
"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
rjwse@aol.com is offline  
Old 04-12-2020, 08:27 AM   #15
iG0R
Enthusiast
iG0R began at the beginning.
 
Posts: 36
Karma: 10
Join Date: Apr 2020
Device: PC
Quote:
Originally Posted by rjwse@aol.com View Post
"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.
iG0R is offline  
Closed Thread

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Does page-break-inside:avoid work in azw3 files? AlexBell Workshop 4 04-21-2015 12:52 AM
Keeping text together (block vs. page-break-inside:avoid) Psymon ePub 2 10-12-2014 09:56 AM
page-break-after:avoid on iBooks Oxford-eBooks Apple Devices 1 08-12-2013 11:40 AM
Page-Break-Inside: Avoid - Solution or Hack? sab1234 Kindle Formats 3 01-17-2013 04:10 PM
Page-break-inside:avoid and mobi AlexBell Kindle Formats 3 06-01-2011 06:03 AM


All times are GMT -4. The time now is 12:12 AM.


MobileRead.com is a privately owned, operated and funded community.