Aligning Text Across Facing Pages

[Interrobang]

When producing a PDF or actual print book, it's easy to establish a baseline grid so that text on facing pages line up perfectly. How does one achieve this in HTML/CSS within an ePub?

I know that Apple Books and Kobo both require that text aligns this way on facing pages, but they provide no code examples on how to achieve this.

During my testing, when both pages are just simple text, they do align. But when one page contains a chapter header at the top in a different font or size, no amount of minor spacing tweaks will achieve the desired goal.

Is there an established way to do this easily? Are there any code samples out there on the subject you can point me to? Any help would be appreciated.

Thanks

[Quoth]

Facing pages on epub?

You'd need a giant screen. Makes no sense on bulk of things used to read ebooks.
I can't remember even seeing facing pages in reflowable ebooks in twenty years.

Have you actually tried using facing pages on a 6″ to 8″ eink or on a 4″ to 6″ phone or an iPad mini?

During my testing, when both pages are just simple text, they do align. But when one page contains a chapter header at the top in a different font or size, no amount of minor spacing tweaks will achieve the desired goal.

It's what I'd expect. But what on earth did you test on? Some 10″ or larger device in landscape? Hardly anything more than Manga or comics are read on more than 8″ and slightly more than half of ebooks are read on phones.

I'd think only fixed layout will let you do what you ask and that won't work for most user-reading people as it needs 10″ or larger in landscape.

Really real ebooks (not image based or PDFs) are single page and simulate two page up by using two columns.

[jhowell]

Originally Posted by Interrobang

I know that Apple Books and Kobo both require that text aligns this way on facing pages, but they provide no code examples on how to achieve this.

This seems extremely unlikely to me, especially since the content contained on particular screens will change based on user selections.

Can you provides references to these requirements?

[Quoth]

Originally Posted by jhowell

This seems extremely unlikely to me

I agree. It's desirable on paper (registration) so that text on either side of the same sheet/leaf lines up, which will result in body text on adjacent pages aligning. I never heard of it as a requirement for ebooks, which as I said earlier, don't normally have adjacent pages and rarely have two columns, because neither of those work well for most people. Also it only matters on a PDF when you print it duplex.

[Tex2002ans]

Originally Posted by Interrobang

When producing a PDF or actual print book, it's easy to establish a baseline grid so that text on facing pages line up perfectly.

This is called "Grid-Based" / "Grid System" / "Baseline Grid" Typography.

If you look that up in your favorite search engines, plus append CSS to it, you can find lots of examples:

• 2019: "How We Implemented a Baseline Grid Using CSS" (open.newyorktimes.com)
• 2020: "Baseline Grids in CSS" (edgdesign.co)

Originally Posted by Interrobang

How does one achieve this in HTML/CSS within an ePub?

Within an EPUB? You don't.

A lot of this relies on:

• complex CSS3 calculations
  
  • Won't work on many devices.
• + units like "rem"
  
  • Won't work on many devices.
• + heavily relies on crap like CSS Resets (which cause lots of other issues).

Originally Posted by jhowell

This seems extremely unlikely to me, especially since the content contained on particular screens will change based on user selections.

Can you provides references to these requirements?

I agree completely.

Originally Posted by Interrobang

During my testing, when both pages are just simple text, they do align. But when one page contains a chapter header at the top in a different font or size, no amount of minor spacing tweaks will achieve the desired goal.

You'd try to keep all your vertical margins/padding/line-heights as multiples of X.

But, the second users begin changing their fonts/settings, all your manual calculations will be thrown off.

On the Print (and websites), where YOU control most of the stuff... most users just take what you force down their throats.

In ebooks though, USERS control most of these settings, and the settings vary wildly.

Also, like other MR users have explained, most ebooks are read on a single-screen device, NOT two-page spreads like physical books. So to enforce a lot of this grid-based layout in EPUB... I just don't see it making a lot of sense.

- - -

Side Note: If you want to see some of this CSS3 Page-Based Media stuff, see the talk from:

• ebookcraft 2019: "Pagination in the Browser: Why, What, and How" by Nellie McKesson

I referenced it a few times on MobileRead:

• 2020: "Kindle Previewer 3.40 - 64bit, SVG text, snap-block"
• 2020: "top margin padding in Apple Books"

describing some of the nuances of how you turn HTML/EPUB from an "infinite scroll" type thing into "pages".

Since then, the W3C absorbed a lot of that info into the:

• "CSS Paged Media Module Level 3" (W3C Working Draft)

but it's still a work-in-progress.

[Interrobang]

Originally Posted by jhowell

This seems extremely unlikely to me, especially since the content contained on particular screens will change based on user selections.

Can you provides references to these requirements?

Apple Books Asset Guide states the following:

Alignment

If specifying line-height, extra spacing between text blocks and any padding around images should be a multiple of the specified line-height to keep text aligned across the spine.

It goes on to state that iPads will show facing pages when turned to landscape mode. Kobo states the same behavior with their readers, and ADE will show two pages when the width of the reading window is extended.

I'm just trying to follow their guidelines, since failing to do so may be grounds for a book submission to be rejected. Personally speaking, I think the requirement is an error. It may be possible with a fixed layout book making use of their javascript libraries, but it's not really practical to implement for a flowing book.

[jhowell]

If specifying line-height, extra spacing between text blocks and any padding around images should be a multiple of the specified line-height to keep text aligned across the spine.

That is a truly strange strange requirement. I have not seen anything like it for other e-book platforms.

You mention Kobo and ADE. Some Kindle apps and devices can also show side-by-side pages when in portrait orientation. I have read the Kindle Publishing Guidelines and there is nothing like this Apple page alignment requirement there. Perhaps someone more familiar with Kobo can comment about that platform's requirements.

The requirement itself is also odd and subject to different interpretations. If might be seen as applying only if the publisher wishes to to keep text aligned across the spine. Or only if a line-height is specified in the document. It uses "should" instead of "must" which usually indicates something is suggested but not required.

Finally doing what it says won't even work in many cases. For example the presence of images on the page will throw the placement of text that follows out of alignment unless images are also sized in multiples of the line height.

I find it hard to believe that books from commercial publishers are modified to follow this rule, but I could be wrong. It might be a good idea to ask for clarification in a forum specific to publishing for Apple.

[Quoth]

I've never had a book rejected for that. The only thing in about 7 years that Apple objected to was a line reading, "free updates with proof of purchase". But actually if people buy on Smashwords they can freely get any revision since their purchase.

Even the Kobo Elipsa doesn't do two up pages for an ebook (10.3″), nor Sage, Elipsa2, Elipsa, Nia, Touch C, or Aura HD H2O original.

Nor does the Elipsa do it with PDFs.

I've only ever seen it on PDFs (scans or not) that are actually formatted two pages side by side, or columns. Though I'm sure the Fixed layout epub can do it.

I have seen two columns (not pages) done in epub, azw3 and mobi using tables or CSS. It's often dreadful. I edited one ebook that had a short letter in one column and the recipient thinking about it and narration in the second column to be sequential. That was mimicking what was originally on a single page on print edition. J Rowling also had a badly done multicolumn ebook, but again it wasn't two page layout.

Anyway, the guidelines are maybe written by someone that's not used regular ebooks and less than a 10" screen. Maybe even a viewer on a desktop.
The only way I can sensibly even see two pages PDF is on a 22" QHD or ideally 4k/UHD approximately 23" screen. I'd like a 4K 19" or 20" but can't find one.

[JSWolf]

There is no way I could read such a book on my iPhone or Libra 2 (7" screen).

[Quoth]

There are apps that will do two pages up in Landscape, but you need a 10″ or bigger screen.
Only printed on paper books have a spine!
Only paper needs body text registration.

[Quoth]

Originally Posted by JSWolf

There is no way I could read such a book on my iPhone.

You don't have an iPhone Mega-Max with the pull-out 14" colour screen like on Earth: Final Conflict?

[colinsky]

Even without a side-by-side display, I can see an aesthetic benefit in a strict alignment where, (regardless of chapter, search headers and dividers), the displayed lines of text remain in the same vertical positions as you turn each page instead of moving slightly up and down the screen. I wouldn't think to require it, but it would be certainly nice to be able to consistently apply within a book.

[jhowell]

I took a look at a sample of a popular book in the Books app on my iPad and alignment across the spine for a two page spread was not maintained.

[Interrobang]

Originally Posted by jhowell

I took a look at a sample of a popular book in the Books app on my iPad and alignment across the spine for a two page spread was not maintained.

Thanks for the information. I won't worry about this issue now. I couldn't find a way to do it, but thought there must be a way if Apple is asking for it to be done. I guess they'll have to wait for CSS4.

Thanks again everyone for your input.

[Tex2002ans]

Originally Posted by Interrobang

Thanks for the information. I won't worry about this issue now. I couldn't find a way to do it, but thought there must be a way if Apple is asking for it to be done.

Sounds like one of those things tossed into the guide by someone who doesn't know much about the reality in ebooks.

Similar junk exists in the Amazon publishing guidelines as well. (Like one of the lies saying they "support MathML" or they tell you things that aren't possible in KDP.)

You'd "align to the grid"—which may not divide evenly into that screen's text area—then you toss in a few Widows/Orphans, and people would be complaining about these "enormous gaps" at the bottom of their screens.

Better to just focus on very clean HTML/CSS + follow best practices as close as you can.