Adjust width of headlines to avoid orphans

[davidascher]

Is it possible to, using CSS, avoid lonely word orphans after a line break? I find that happens fairly regularly, and when dealing with center-aligned titling, it irks.

e.g.

/cc @k88hudson @Pomax @gesa @toolness

What I'd love is a directive that tells CSS "adjust the width so that lines are roughly same length when rendered.

As a workaround for this site, we should convert the last space before Web. to have a leading &nsbsp;, or switch to a left-aligned layout.

[davidascher]

or set a max-width, although that will be localization-fragile.

[k88hudson]

Here's an (old) article detailing the problems with line balancing in css if you're interested, it's a good one. http://blogs.adobe.com/webplatform/2013/01/30/balancing-text-for-better-readability/.

My personal recommendation is to set max-width, as long as it's not too unreasonably small, and possibly behind a media-query. This is usually what I do. If you really wanted to get crazy detailed you could do different max-widths/break points namespaced under html[lang^="en"], html[lang^="fr"] etc.

The other option here is to use conditional <br> tags, behind media queries, but I this is even more difficult to do with localization.

[davidascher]

Thanks!

text-wrap: balance would be lovely. Where do I vote? ;-)

Also: it's a sign of the times that this problem doesn't have a cute name like orphan or widow -- it only shows up in computer-laid-out type, as no human typesetter would make that mistake.

[k88hudson]

@davidascher Some have suggested an orphans property, so orphans: 5 would require a minimum of 5 words on a next line :P

[hannahkane]

@davidascher, did we arrive at a solution for this one?

[vazquez]

I will submit a PR for this.

[vazquez]

orphans is not supported in FF :/ text-wrap: balance is not something that is natively supported by CSS. We need to import a library for this to work.

It looks like max-width with media queries is the way forward.