Render text like a newspaper using CSS

For years, I wanted to render text like newspapers did; however, this wasn't really possible on the internet. If you wanted to justify text over a line, you could use 'text-align: justify,' but you were left with unwanted gaps between the words. So, in the end, we defaulted to not using it at all. Last week, I found out that there might be a way to do this, which is only supported by Mozilla Firefox.

What is the CSS attribute 'text-justify'?

In Firefox, we can use the 'text-justify' attribute to adjust the justification between the letters on a text line, getting closer to the old newspaper text style. This CSS attribute has no real browser support and only works in Mozilla Firefox. In the screenshot below, I made the different styles of 'text-justify' visible. In the first text block, we see the text with the default gap between the words, which is somewhat unattractive due to the large gaps.

In the last text block, we see the same text, but using 'text-justify: distribute;' (deprecated, but 'inter-character' has the same behavior). As you can see, the gaps between the words are almost gone. This mirrors the way text was printed in old-school newspapers.

The black block in between shows the difference between both variants, highlighting a significant distinction.

Looking at the mdn Web Docs we can see that this CSS attribute has a few values.

text-justify: none
The text justification is turned off. This has the same effect as not setting text-align at all, although it is useful if you need to turn justification on and off for some reason.

text-justify: auto
The browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text. This is the default justification used if text-justify is not set at all.

text-justify: inter-word
The text is justified by adding space between words, which is most appropriate for languages that separate words using spaces, like English or Korean.

text-justify: inter-character
The text is justified by adding space between characters, which is most appropriate for languages like Japanese.

text-justify: distribute
Exhibits the same behavior as inter-character; this value is kept for backward compatibility. This one is deprecated, and the value inter-character should be used instead.

What is the best way to render text like a newspaper?

As support for 'text-justify' is lacking and won't improve in the near future, a question we may want to ask is: What is the best way to mimic this? I think we can get close to it, even if we ignore 'text-justify' for other browsers, just by using the following code:

<p lang=“en_US">
  Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. 
  Duis nisi velit, dictum id mauris vitae, lobortis 
  pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>

<style>
  p {
    text-align: justify;
    text-justify: inter-character;
    hyphens: auto;
  }
</style>

This code will render the content full width. Using hyphens ensures that the word will break mid-word. By mixing this in with 'text-justify,' we have the perfect setup to render text like an old-school newspaper. We still have the issue of unwanted gaps in other browsers like Chrome, but using hyphens makes this less visible. Using this code won't cause any issues or conflicts. One thing to keep in mind is that letter spacing can be a little messed up, as Mozilla Firefox defines the letter spacing according to what is needed to render a text line properly.

Final Word

While it is possible to render text on the screen in the same way as old paper newspapers did, browser support is still lacking. I don't think this will be improved in the short term. I really hope this will be fixed soon, as it addresses a significant issue with 'text-align: justify,' a concern since the start of the internet.

Just like the first two times I will also end this blog post with a quote from an anime series. This time it is a quote from Canaan.

「どのように感じても、人生を決して諦めてはいけません。 どんなに諦めたくても。」— You should never give up on life, no matter how you feel. No matter how badly you want to give up.