Dublin Library

The Publishing Project

Making HTML Headers Look Nice

  • 1 min. read

 

Headings can show orphan issues that can cause readability issues.

In this context, an orphan is a single word (or syllable) that sits at the bottom of a paragraph of text.

As a developer, you don't know the final size, font size, or even the language of a headline or paragraph. All the variables needed for an effective and aesthetic treatment of text wrapping, are in the browser.

Using text-wrap: balance we can provide better control over these orphan headings.

Before we had text-wrap: balance we had few tools to keep the heading lines balanced. The best (and probably only) options are to use the <wbr> tag or the &shy; entity to help browsers decide where to break lines and words.

:is(h1, h2, h3, h4, h5, h6) {
  max-width: 50ch;
  max-inline-size: 50ch;
  text-wrap: balance;
}
CSS

Use this as progressive enhancement. If this works, it's an improvement and, if it doesn't, then it'll look slightly worse but it will still display the content.

Edit on Github