HTML Hyphens

Published 2023-01-23. Last modified 2023-02-12.
Time to read: 2 minutes.

This page is part of the posts collection, categorized under HTML.

Web browsers now have built-in automatic hyphenation support, but it is turned off by default for compatibity with older browsers. You can enable hyphenation with two words of CSS, like this:

your_stylesheet.css

body {
  hyphens: auto;
}

W3 CSS3 Hyphenation Standard

Hyphenation occurs when the line breaks at a valid hyphenation opportunity, which is a type of soft wrap opportunity that exists within a word where hyphenation is allowed.

In CSS, hyphenation opportunities are controlled with the hyphens property. CSS Text Level 3 does not define the exact rules for hyphenation; however, UAs are strongly encouraged to optimize their choice of break points and to chose language-appropriate hyphenation points.

Possible hyphens values: none | manual | auto
Initial value: manual

– W3 CSS3 Standard

However, the W3 CSS3 hyphenation standard also says:

Correct automatic hyphenation requires a hyphenation resource appropriate to the language of the text being broken. The UA must therefore only automatically hyphenate text for which the content language is known and for which it has an appropriate hyphenation resource.

Authors should correctly tag their content’s language (e.g. using the HTML lang attribute or XML xml:lang attribute) in order to obtain correct automatic hyphenation.

– W3 CSS3 Standard

Let’s put this into practice now.

Your Website Stylesheet

You may not want certain passages to be hyphenated. Defining a CSS style that disables automatic hyphenation for portions of a document is easy; you can still use  in those portions of the document to manually define optional hyphenation points.

Here is a suggestion for your stylesheet, so it has the hyphenation support you need. Note that hypenation for kbd tags is completely disabled.

your_stylesheet.css

body, .hyphen {
  hyphens: auto;
}

.nohyphen {
  hyphens: manual;
}

kbd {
  hyphens: none;
}

Complete Example

The following example enables automatic hyphenation of the entire HTML body, according to US English rules. The HTML document contains nested tags, some of which disable or enable automatic hyphenation. One line demonstrates manual hyphenation, through the use of  entities:

index.html

<html lang="en-US">
  <head>
    <style>
      body, .hyphen {
        hyphens: auto;
      }

      .nohyphen {
        hyphens: manual;
      }
    </style>
  </head>
  <body>
    <p>This element is automatically hyphenated.</p>
    <p class="nohyphen">This element is not hyphenated.</p>
    <ol class="nohyphen">
      <li>This elem&shy;ent is manual&shy;ly hyphen&shy;ated.</li>
      <li class="hyphen">This element is automatically hyphenated.</li>
    </ol>
  </body>
</html>

😁

Easy!

Alternative Manual Hyphenation

Invisible hypenation is sometimes desirable. For example, if I have a long directory path, like $HOME/.rbenv/versions/$RUBY_VERSION/lib/ruby/gems/$RUBY_VERSION/$GEM_NAME-$GEM_VERSION I might want to tell the web browser where the string could be broken.

You have two options — they are actually different syntaxes for the same zero-width space.

Zero-Width Space HTML Entity

 is the HTML entity for a unicode character called the zero-width space (ZWSP).

For example, $HOME/.rbenv/versions/$RUBY_VERSION/lib/ruby/gems/$RUBY_VERSION/$GEM_NAME-$GEM_VERSION

renders as:

$HOME/.rbenv/versions/$RUBY_VERSION/lib/ruby/gems/$RUBY_VERSION/$GEM_NAME-$GEM_VERSION

Line Break Opportunity Tag

You could also use the line break opportunity tag,  .

For example, $HOME/.rbenv/versions/$RUBY_VERSION/lib/ruby/gems/$RUBY_VERSION/$GEM_NAME-$GEM_VERSION

renders as:

$HOME/.rbenv/versions/$RUBY_VERSION/lib/ruby/gems/$RUBY_VERSION/$GEM_NAME-$GEM_VERSION

Both Options Yield the Same Rendered Text

I prefer to use . YMMV.

Non-Breaking Hyphen

The non-breaking hyphen HTML entity (‑) displays a hyphen character that does not break.

For CSS, use content: "\2011" to produce a non-breaking hyphen.