Dublin Library

The Publishing Project

Building long-form content on the web: Justification and hyphenation

  • 2 min. read

 

I had justification and hyphenation together because they have a similar impact on how we read online.

Hyphenation is the use of a hyphen (‐) to break up a word when it reaches the edge of a document or container.

At its most basic, hyphenation consists of two steps:

  1. Set the language in the HTML element
  2. Enable hyphenation in your CSS

To set the language use the HTML lang attribute with the appropriate ISO Language Tag

<html lang="en">
  <!-- . . . -->
</html>

To enable hyphenation use the following code:

.container {
  -ms-hyphens: auto; /* Old Edge */
  -webkit-hyphens: auto; /* Safari */
  hyphens: auto; /* Everyone else */
}

This will enable the default hyphenation settings for the browser but there are additional settings to control details about hyphenation so that, where they work, designers have similar controls to authors using InDesign and other DTP software.

Rather than bore you with the details, I will refer you to All you need to know about hyphenation in CSS

Justification tries to fill each line with as much text as possible. In CSS, justification is controlled by the following values of the text-align property (definitions taken from CSS Text Module Level 3)

justify

Text is justified according to the method specified by the text-justify property, in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned.

justify-all

Sets both text-align-all and text-align-last to justify, forcing the last line to justify as well.

Using the property would look like this:

p {
   text-align: justify;
}

The following Codepen compares how ragged (left/start aligned) and justified text look like:

In the end, it should be up to the user whether to enable hyphenation and justification and the values will depend on the text we're working with.

Edit on Github