Keeping text together (block vs. page-break-inside:avoid)

Psymon · 10-12-2014, 12:01 AM

Hey folks...

In working on this current e-book, in various places I wanted to keep certain text together -- for example, the first couple and last couple of lines in a poem; or in my table of contents where I have a main chapter heading listed, as well as subheadings within that chapter (and I wanted to keep the main chapter heading together with at least the first subheading); or with a linked item in my ToC which has short description below it that I'd like to keep together; and a few other places like that.

The way I was doing it up until this evening was by wrapping whatever text I wanted to keep together in a <div> with this style...

Code:

.block {
    display: inline-block;
	width: 100%;
}

...although the whole time I was doing it that way, I found that adding that in, in-between paragraphs, tended to screw around with the top/bottom margins between paragraphs. After a lot of fiddling with my CSS, I managed to overcome those top/bottom margin issues...

...and then just this evening I discovered a totally different option that I could have used -- "page-break-inside:avoid" -- which I also just add in with a <div> around whatever few lines I want to keep together, and which doesn't seem to impose any screwiness to my paragraph margins.

Any thoughts on what the best way is for keeping text together like that -- generally just a couple of short lines (as separate paragraphs) that you don't want to get split up over two pages?

I thought that block way was "the" way to do it, but after reading various things here about "page-break-inside:avoid", now I'm not so sure.

Jellby · 10-12-2014, 04:15 AM

display:inline-block is not one of the supported (required) values in ePub 2, so use it at your own risk.

Other than that, by turning a <div> into inline-block, you're basically treating it as a character, so yes, the spacing will be affected and you'd have to tweak a few things.

page-break-inside:avoid, on the other hand, is a required property and value combination. It should be supported and it should work the way you want. Another difference is that it allows a page break if the whole block does not actually fit in a page, while the inline-block does, as far as I know, completely prohibit it, so the block would be clipped. Sadly, I'm afraid many readers ignore this setting, at least in some situations.

Psymon · 10-12-2014, 09:56 AM

Ah, great, I understand -- thanks once again, Jellby! That's easy enough to swap out all those blocks that I currently have with a simple search and replace -- it's a shame that the "avoid" thing isn't supported everywhere, all the time, but oh well. Better to do it the right way than the wrong way.

Thanks again!

10-12-2014, 12:01 AM	#1
Psymon Chief Bohemian Misfit Posts: 571 Karma: 462964 Join Date: May 2013 Device: iPad, ADE	Keeping text together (block vs. page-break-inside:avoid) Hey folks... In working on this current e-book, in various places I wanted to keep certain text together -- for example, the first couple and last couple of lines in a poem; or in my table of contents where I have a main chapter heading listed, as well as subheadings within that chapter (and I wanted to keep the main chapter heading together with at least the first subheading); or with a linked item in my ToC which has short description below it that I'd like to keep together; and a few other places like that. The way I was doing it up until this evening was by wrapping whatever text I wanted to keep together in a <div> with this style... Code: .block { display: inline-block; width: 100%; } ...although the whole time I was doing it that way, I found that adding that in, in-between paragraphs, tended to screw around with the top/bottom margins between paragraphs. After a lot of fiddling with my CSS, I managed to overcome those top/bottom margin issues... ...and then just this evening I discovered a totally different option that I could have used -- "page-break-inside:avoid" -- which I also just add in with a <div> around whatever few lines I want to keep together, and which doesn't seem to impose any screwiness to my paragraph margins. Any thoughts on what the best way is for keeping text together like that -- generally just a couple of short lines (as separate paragraphs) that you don't want to get split up over two pages? I thought that block way was "the" way to do it, but after reading various things here about "page-break-inside:avoid", now I'm not so sure.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
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...:avoid / captions	Oxford-eBooks	Kindle Formats	6	10-05-2012 06:15 AM
Page-break-inside:avoid and mobi	AlexBell	Kindle Formats	3	06-01-2011 06:03 AM
How to avoid page break after heading/chapter	tkirke	ePub	6	01-22-2010 02:12 PM

10-12-2014, 04:15 AM	#2
Jellby frumious Bandersnatch Posts: 7,523 Karma: 19000001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	display:inline-block is not one of the supported (required) values in ePub 2, so use it at your own risk. Other than that, by turning a <div> into inline-block, you're basically treating it as a character, so yes, the spacing will be affected and you'd have to tweak a few things. page-break-inside:avoid, on the other hand, is a required property and value combination. It should be supported and it should work the way you want. Another difference is that it allows a page break if the whole block does not actually fit in a page, while the inline-block does, as far as I know, completely prohibit it, so the block would be clipped. Sadly, I'm afraid many readers ignore this setting, at least in some situations.

10-12-2014, 09:56 AM	#3
Psymon Chief Bohemian Misfit Posts: 571 Karma: 462964 Join Date: May 2013 Device: iPad, ADE	Ah, great, I understand -- thanks once again, Jellby! That's easy enough to swap out all those blocks that I currently have with a simple search and replace -- it's a shame that the "avoid" thing isn't supported everywhere, all the time, but oh well. Better to do it the right way than the wrong way. Thanks again!

Advert