5 ms·
In the page model, a heading says it needs only one line of vertical space, so if there’s a tiny bit of space at the bottom of the page it’ll get orphaned. (Ve
by gorgoiler 2y ago
In the page model, a heading says it needs only one line of vertical space, so if there’s a tiny bit of space at the bottom of the page it’ll get orphaned. (Vertical box space shown as ! and % for the heading and paragraph, respectively.)
Page 1 Page 2
.. Paragraph..%
.. ..text. %
.. ..
.. ..
!Heading
When instead it should be moved to the top of the next page:
Page 1 Page 2
.. Heading !
.. Paragraph.. %
.. ..text. %
.. ..
..
Rather than being honest about needing one line…
Heading !
Paragraph.. %
..text. %
…the heading could instead claim it needs three lines, which would ensure it would never be orphaned:
Heading !
!
!
Paragraph.. %
..text. %
But now you have a big gap below the heading.
If you could then shift the paragraph up from where it should be in the flow such that the vertical space of the heading and paragraph overlapped…
Heading !
Paragraph.. !%
..text. !%
…then you’d get a heading that would never be orphaned on one line, but which looked as it if only used one line.
- Izkata 2y agoI don't know if it would fix splitting across pages, but that sounds like negative margins. They've been in CSS forever. The basic idea: .heading { margin-bottom: 30px; } .paragraph { margin-top: -30px; } Also: > the heading could instead claim it needs three lines, which would ensure it would never be orphaned It wouldn't prevent being orphaned at this point in your idea. What if there was room for 3 lines at the end of the first page?
- gorgoiler 2y agoIf the bottom of a page has room for a heading and 3 lines of text (or some number of lines that looks appealing) then that’s enough space for the heading to not be considered orphaned.
- Izkata 2y agoBut without moving the paragraph up, there wouldn't be text there, just a big empty area.
- dotancohen 2y agoAs the author of the fine article states, that is preferable to the orphaned heading.
- Izkata 2y agoThe article says it's better to have blank space instead of the header, not next to the header.
- p4bl0 2y agoI'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 )
- wbl 2y agoDon't they send the copy editor to kill all the widows and orphans anymore?