3 ms·
I'm not sure the proposed approach would work, in particular on ebook readers. But if if does, I believe margins may not be the right way to do it. Padding migh
by p4bl0 2y ago
I'm not sure the proposed approach would work, in particular on ebook readers. But if if does, I believe margins may not be the right way to do it. Padding might be however, because it is actually inside the box (while margins of elements may be "blended" inside the margins of their parents).
h2 { padding-bottom: 3em; }
h2 + p { margin-top: -3em; }
The problem is CSS doesn't support the lh unit yet so what's 3em here should actually be 3 times the height of a line, taking into account the font-family, the font-size, etc. Except maybe if line-height is explicitly set.
- bryanrasmussen 2y ago>The problem is CSS doesn't support the lh unit yet so the problem is that ebooks css does not support what you expect a slightly out of date browser to support, and almost each ebook renderer has its own problems. Think html email sized problems.
- benmanns 2y agoEmail rendering is a great analogy.
- rolandog 2y agoI wonder if there's some sort of acid tests for eBook readers. There should be some sort of acid test as well for email readers, of course. But, IMO, all of them should be limited to avoid JS use (think of how well some sites are capable of rendering without JS [0]) [0]: https://git-send-email.io/ https://git-send-email.io/
- gorgoiler 2y agoThat worked quite nicely: https://jsfiddle.net/bqjsu98o/ https://jsfiddle.net/bqjsu98o/ However the next problem is how do you tell the print renderer that paragraphs must have a minimum of 4 lines of text? (Edit, hah! https://developer.mozilla.org/en-US/docs/Web/CSS/orphans https://developer.mozilla.org/en-US/docs/Web/CSS/orphans )