This post is specifically about Paged.js and paged media. I downloaded the Paged JS book_avanced-interface template that simulates pages on your screen to help during the creation of a web to print book. I filled it with written text and added simple CSS like fonts and colors, nothing off-balancing.
Then as I saw different sizes of text weren't aligned with the visual baseline grid, I followed this tutorial to adjust vertical rhythm. This tutorial is made for webpages though, so the start and the end of the whole text, including <p> <h1> <h2> etc. starts and ends on the same page. With paged media however, the text is distributed on different pages, all with a defined size.
Expected result: all the pages would have their text grids aligned, whether they start with a heading or paragraph.
Actual result: Paragraphs and Headings align well on the grid on one page but when a page starts with a <p> as its first element and another starts with a <h1> <h2> <h3>, the two "baselines" don't align. The one starting with a heading is slightly lower.
Reason I suspect: the practices used to align a screen webpage text on a baseline don't work on paged media.
Tried: Seeking with JS where a page starts with <p> and adding margin-top to compensate. The script doesn't even find those instances. When setting the same line-height for <p> and headings still nothing happens.
How can I make the text on two pages starting with different text elements be aligned on the same level?
Screenshot of result, the blue lines are the expected baseline:
` has `line-height: 15px`, then my headings might be `line-height: 30px; margin: 15px 0 0 0;`. That way, all vertical spacing is in multiples of 15px.
– Arthur Jun 08 '23 at 12:14