Nathan Knowler

Hyphenation on the web

Planted on

Hyphens have many functions, but one important use is to indicate that a word has run out of space on the current line and is being continued on the next.

This can serve design purposes as it can help balance lines of text. This is great when used in tandem with the newer text-wrap CSS property.

It is also a necessity when using justified text on the web, since otherwise the inconsistent space between words and letters becomes not only harder to read, but unpleasant aesthetically. Tyler Sticka has a great exploration of justified text and hyphenation that is well worth the read.

It also can help accessibility as ambiguity about which characters form a word creates a cognitive challenge. Hyphenation can help alleviate those challenges. At the same time, it is worth noting that unnecessary hyphenation can make it harder to read text, introducing a cognitive challenge.

How to hyphenate on the web

There are a few ways to do hyphenation on the web.

First of all, you can use a hyphen character: -. On many keyboards, this is readily available.

There’s also the ­ HTML entity which is called a “soft hyphen.” This works almost like a hint to the browser for where it can add a hyphen if the text run exceeds the inline space.

Then CSS has a hyphens property. This has a few different modes:

  • The default of manual will allow hyphen characters and soft-hyphens to hyphenate words. Words that without hyphenation hints will overflow when constrained unless other breaking methods are used.
  • none will not hyphenate words at all. Only hyphen characters can cause a word to be hyphenated here.
  • auto will automatically hyphenate words.

Browsers are inconsistent about hyphenation

hyphens: auto can be disappointing. In some cases, browsers are inconsistent with how they auto-hyphenate or it might seem like it doesn’t work at all.

The truth is: there’s no spec’d way for how a browser should automatically hyphenate words. Browsers have different “hyphenation dictionaries” for various languages.

Workarounds for hyphenating capitalized English words

A very clear example of browser inconsistency is for capitalized English words. Both Chrome and Firefox will not hyphenate these words, but Safari will. In my opinion, what Safari is doing is desirable.

How can we work around this? The manual route of using soft hyphens is always an option, but that means we’re incurring tech debt and creating complexity.

What if we provide the string as lowercase and then use text-transform: capitalize? Using that combination, we manage to fix the problem in Firefox, but Chrome seems to run its hyphenation after that transformation and does not hyphenate.

Resources