Hyphenation

Hyphenation is hard.

To grasp. Luckily, turning it on is easy these days, because hyphens is part of Baseline 2023, and thus readily available. That said, it still feels a bit hit-or-miss.

There are guides out there to get you started on overflow-wrap (including its non-standard counterpart word-wrap) and word-break. And when you are done reading about those, you can go all in and learn all you need to know about hyphenation in CSS.

This short blog post is a result of a bug report I got at work yesterday. Hyphens did not show up where we would expect them. Naturally, I made a thing on CodePen in hopes I would understand what browsers are doing, but seeing that some words break and others don’t, well, this whole topic remains a black box. E.g., capital letters seem to make a difference in English‽ 😵

To quote the CSS Tricks Almanac, …

Note that hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a parent element.

Make sure to have the correct lang attribute in place. Then, if setting hyphens works out, great. If you need more control, don’t be ­, add a soft hyphen in HTML where needed.

Nevertheless, CSS is awesome.