Justify and Hyphenate Text on Websites using CSS

You may have noticed while reading my blog posts that the way the text are aligned are a little different from the usual way the ones from other websites are — that they always align as blocks of text no matter how you change your browser window’s size. This is because using CSS, I have justified the text on my website.

How to Justify

It is actually pretty simple — to justify your body text, just add this to your CSS style sheet:

body {
    ...
    text-align: justify;
}

This will justify your text so it all aligns neatly in a block-like shape.

How to Hyphenate

Though there is a way to do this with Javascript using Hyphenopoly.js, hyphenation already has built-in functionality in CSS and it is widely supported by browsers, so it is a no-brainer to do it the CSS way, unless your target audience has a user-agent that does not support CSS’ hyphens property for some reason.

To add hyphenation to your body text, simply add the hyphens property to your body section in your CSS style sheet and set it to auto, like so:

body {
    ...
    hyphens: auto
}

So now your text wraps words using hyphens, but why do we need to use hyphens when we can make blocks of text by just justifying?

Why Hyphenate

Text justification can make your paragraphs look tidier, but this has the potential side-effect of awkwardly stretching out whitespace in between words — which can create or worsen an often undesirable effect commonly referred to as ‘rivers of white,’ which are known to trip up dyslexic readers, making your writing less accessible as a result.

This is also a highly-cited reason as to why justification is generally not recommended for text output on browsers and on the web.

Other Blogs That Justify

Here are a list of other blogsites that I know of that use justified text:

• Chris Noxz’s noxz.tech, which renders static HTML from groff.
• Simon Johnston’s simonkjohnston.life, which does not use hyphenation.
• Kyle Mcdonald’s kylemcdonald.net, which also does not hyphenate.
• Public Delivery’s publicdelivery.org, which also justifies without hyphens.
• JPEG XL’s jpegxl.info, which had fixed its un-hyphenated text.