How CSS hyphens: auto Uses Language Dictionaries

The CSS hyphens: auto property allows browsers to automatically break long words across multiple lines using hyphens to prevent awkward text wrapping and uneven margins. To execute these breaks accurately without altering word meanings or creating unreadable syllables, browsers do not guess; instead, they rely on built-in or operating-system-level language dictionaries and hyphenation algorithms. This article explains how browsers detect the correct language, access hyphenation patterns, apply algorithmic word splitting, and handle platform differences during text layout.

The Role of the HTML lang Attribute

For hyphens: auto to function, the browser must first identify the language of the content. Hyphenation rules are deeply tied to specific languages; a split that is grammatically correct in German may produce an unintelligible break in English.

Browsers determine the language through the HTML lang attribute declared on the <html> element or on specific parent elements:

<p lang="en-US">Hyphenation occurs according to American English rules.</p>
<p lang="de">Silbentrennung erfolgt nach den Regeln der deutschen Sprache.</p>

If the lang attribute is absent, unknown, or improperly formatted, browsers will disable automatic hyphenation entirely to avoid incorrect breaks.

Hyphenation Dictionaries and Pattern Matching

Once the language is identified, the browser references a hyphenation pattern dictionary designed for that language. Most modern web rendering engines—including Blink (Chrome), Gecko (Firefox), and WebKit (Safari)—rely on variations of Franklin Mark Liang’s hyphenation algorithm, originally developed for the TeX typesetting system.

Rather than maintaining a full dictionary containing every word in a language, Liang's approach uses compact pattern files. These pattern files consist of:

  • Letter sequences with numerical weights: Patterns represent common prefixes, suffixes, and character combinations alongside digits indicating break validity. Odd digits indicate permissible hyphenation points, while even digits inhibit hyphenation.
  • Pattern evaluation: When analyzing a word, the browser overlays all matching patterns from the dictionary. For each character boundary, the highest numerical value wins. If the winning value is odd, the boundary is marked as a valid hyphenation point.
  • Exception lists: Irregular words or loanwords that fail pattern analysis are stored in a dedicated exception list to ensure proper splitting.

Source of Browser Dictionaries

Browsers acquire these dictionaries and hyphenation engines through two main methods:

  1. Bundled Open-Source Libraries: Rendering engines often bundle open-source hyphenation packages, such as Hyphen (derived from Libhyphen) or patterns sourced from Hunspell. Firefox, for example, packages hyphenation dictionaries directly within the browser build for dozens of languages across all platforms.
  2. Operating System Typography APIs: Safari on macOS and iOS, as well as Chrome on certain platforms, offload hyphenation to the operating system's native text-rendering APIs (such as Core Text on Apple platforms). The OS provides the language models and hyphenation boundaries natively.

The Word-Splitting Execution Flow

During layout calculation, the browser's text-shaping engine processes text in the following sequence:

  1. Boundary Detection: The layout engine measures words against the available container width. If a word overflows the line, the engine flags it for potential hyphenation.
  2. Dictionary Lookup: The engine passes the word to the hyphenation module corresponding to the declared lang attribute.
  3. Soft Hyphen Identification: The algorithm returns an array of permissible hyphenation positions (equivalent to invisible &shy; entities).
  4. Boundary Constraints: The browser applies constraints such as minimum character counts before and after the hyphen (often controlled via properties like hyphenate-limit-chars).
  5. Break Insertion: The browser selects the breakpoint that best preserves typographic balance, breaks the word, appends a hyphen character (-), and wraps the remaining characters to the next line.