Hacker News Reader

Comment by Izkata | Hacker News Reader

I 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?

View on HN

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.

>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.

Email rendering is a great analogy.

I 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/

That worked quite nicely:

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 )

If 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.

But without moving the paragraph up, there wouldn't be text there, just a big empty area.

As the author of the fine article states, that is preferable to the orphaned heading.

The article says it's better to have blank space instead of the header, not next to the header.

Reply on news.ycombinator.com