Comment by p4bl0 | Hacker News Reader

Comment by p4bl0 | Hacker News Reader

Parent Full thread

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 )

Reply on news.ycombinator.com