This blog guide goes into why and how to justify and hyphenate text on your website without Javascript.

For Static-Site-Generator Websites

It is a little bit less straightforward to do this with static site generators like Jekyll (which is what this website uses) or Hugo, you will have to override the theme’s CSS style sheet.

There is a blog post by Tom Kadwill on how to override your CSS styles in Jekyll you can follow to create your SCSS file, and after which you should get something resembling this:

---
---

@import "minima"; /* replace minima inside the quotes with your Jekyll theme */

After this, you can follow all the steps below the same way as it would be done if you were using CSS in a non-static-site-generator instead of SCSS in a static site generator.

Why Justify Text

It is more of an aesthetic preference than anything. This jaggedness generally does not bother people that much because they have grown used to the popular left-aligned style of text on the web and probably do not know justification even exists on the web, only on printed books and newspapers. But it just looks better to me when all lines are the same length and the right side of text is not jagged. Justifcation is a way of acheiving that aesthetic goal without cutting words off abruptly.

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;
}

Why Hyphenate

Text justification can make your paragraphs look tidier, but it has the side-effect of awkwardly stretching out the whitespace between words, which can create and worsen an undesirable effect commonly referred to as ‘rivers of white’. This effect is known to make text harder for dyslexic readers to read, decreasing accessibility.

This is why justification is generally not recommended for text output on the web.

By hyphenating, even though it does not solve the problem completely, it will reduce this effect significantly while keeping text not jagged.

Hyphenating text will cut off some words at the end of lines (indicated by an auto-inserted hyphen), but it will do it with an algorithm that tries to make it seamless.

How to Hyphenate

Although there is a way to hyphenate with Javascript using Hyphenopoly.js, there already is a built-in functionality in CSS to do this and it is widely supported by browsers.

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
}

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.

Conclusion

f you found this blog post useful, leave a comment down below! Also read how to add reactive dark-mode to your website in my previous blog post.