Bottom margin ignored when tag is enclosed within a Div and paragraph spans two pages

paperback · 02-20-2023, 08:00 AM

AFAIK, this didn't happen before Calibre 6.12.

1. Open the attached ebook (Demo) in the ebook editor and viewer.
2. Look at the style file in the editor and notice that the blockquote top and bottom margin is clearly set to 1em.
3. Adjust the viewer window so that the document occupies two pages. Notice that the blockquote bottom margin is being ignored.
4. Remove the surrounding div tags and the blockquote bottom margin reappears.

The trigger factors are (1) the tag with a bottom margin is enclosed wthin div tags and (2) the paragraph spans two pages (or more?) of the ereader.

kovidgoyal · 02-20-2023, 08:59 AM

That will be a rendering change in Chromium which the viewer uses and was updated in 6.12.

jackie_w · 02-20-2023, 01:42 PM

I haven't tested removing the <div> but, FWIW, the demo epub displays the bottom margin OK if the Viewer has 'paged mode' toggled OFF.

As OFF is my default Viewer mode, initially I had trouble understanding what problem @paperback was trying to report.

JSWolf · 02-20-2023, 07:23 PM

Why is there a blank div? It's not needed. And if that's the problem, problem solved.

DNSB · 02-20-2023, 07:51 PM

Quote:

Originally Posted by JSWolf

Why is there a blank div? It's not needed. And if that's the problem, problem solved.

I suspect the issue would occur with any div whether or not a class is attached. The demo.epub suggests it was created as a test case.

Edit: added a class to the div and it still happened. Moving the 1em bottom margin to the div does allow it to display.

Edit2: One thing to realize is that neither calibre's e-book viewer or Sigil's page preview or PageEdit are a good tool to view epubs. They allow quite a bit of CSS that is not supported by epubs and are very forgiving of errors.

paperback · 02-21-2023, 06:40 AM

Quote:

I suspect the issue would occur with any div whether or not a class is attached. The demo.epub suggests it was created as a test case.

That's correct. So this is a bug.

paperback · 03-18-2023, 09:31 AM

P.S. This also affects the display of text on a Kobo ereader. It is displaying exactly the same error as Calibre – the bottom margin is being ignored if the style is in a tag enclosed within another tag. e.g.

<div style="font-size: 90%;">

<p style="margin-bottom: 1em;">

[Text]

</p>

</div>

theducks · 03-18-2023, 10:37 AM

@paperback
I avoid bottom margins as the can cause blank pages (screens). I do most everything with margin-top, because of this. (Besides my devices seem to reserve the lower part of the display. )

Kobo (KEPUB) does not do some things well. letter-spacing causes runtogether words. Chapter Two becomes ChapterTwo

JSWolf · 03-18-2023, 12:35 PM

Quote:

Originally Posted by theducks

@paperback
I avoid bottom margins as the can cause blank pages (screens). I do most everything with margin-top, because of this. (Besides my devices seem to reserve the lower part of the display. )

Kobo (KEPUB) does not do some things well. letter-spacing causes runtogether words. Chapter Two becomes ChapterTwo

I only avoid bottom-margin when it's at the end of the chapter/section.

theducks · 03-18-2023, 02:02 PM

Quote:

Originally Posted by JSWolf

I only avoid bottom-margin when it's at the end of the chapter/section.

But I don't need a special End Of style with my method.
<p class="mynormal" does it
I also don't normally have Body div unless it is for a special page

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
div margin-bottom=0px	larysa	Editor	4	04-26-2016 01:53 PM
Top-margin (bottom-margin?) for Kobo?	Notjohn	Sigil	14	02-28-2015 06:43 AM
Div Selectors vs Paragraph Classes -- Robustness?	GrannyGrump	ePub	14	10-08-2013 08:49 AM
Questions about <p> and <div> and paragraph spacing	droople	Sigil	7	08-14-2010 12:03 PM
calibre ignore margin-top and margin-bottom	bender	Calibre	2	12-11-2009 06:58 AM

02-20-2023, 08:59 AM	#2
kovidgoyal creator of calibre Posts: 45,604 Karma: 28548974 Join Date: Oct 2006 Location: Mumbai, India Device: Various	That will be a rendering change in Chromium which the viewer uses and was updated in 6.12.

02-20-2023, 01:42 PM	#3
jackie_w Grand Sorcerer Posts: 6,268 Karma: 16544702 Join Date: Sep 2009 Location: UK Device: ClaraHD, Forma, Libra2, Clara2E, LibraCol, PBTouchHD3	I haven't tested removing the <div> but, FWIW, the demo epub displays the bottom margin OK if the Viewer has 'paged mode' toggled OFF. As OFF is my default Viewer mode, initially I had trouble understanding what problem @paperback was trying to report.

02-20-2023, 07:23 PM	#4
JSWolf Resident Curmudgeon Posts: 80,742 Karma: 150249619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Why is there a blank div? It's not needed. And if that's the problem, problem solved.

03-18-2023, 09:31 AM	#7
paperback Connoisseur Posts: 76 Karma: 10 Join Date: Feb 2022 Device: None	P.S. This also affects the display of text on a Kobo ereader. It is displaying exactly the same error as Calibre – the bottom margin is being ignored if the style is in a tag enclosed within another tag. e.g. <div style="font-size: 90%;"> <p style="margin-bottom: 1em;"> [Text] </p> </div>

03-18-2023, 10:37 AM	#8
theducks Well trained by Cats Posts: 31,250 Karma: 61360164 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	@paperback I avoid bottom margins as the can cause blank pages (screens). I do most everything with margin-top, because of this. (Besides my devices seem to reserve the lower part of the display. ) Kobo (KEPUB) does not do some things well. letter-spacing causes runtogether words. Chapter Two becomes ChapterTwo

Advert

Advert