how to justify text

[cwhittaker1000]

Thanks for creating this invaluable resource! Currently trying to put my own site together, and I'm struggling to figure out how to justify text i.e. add space between words so that both edges of each line are aligned with both margins (the equivalent of Ctrl + j in Microsoft Word).

In the _index.md file, currently I can specify text_align_left as true or false which toggles the text between being left and right aligned. But I can't figure out what I need to add/modify to get the text justified!

Any help would be massively appreciated! Thanks in advance!

[gadenbuie]

Hi! You'll need to create a new CSS rule in the assets/custom.scss file. This rule will likely work well for what you want:

.post-content p {
  text-align: justify;
  text-justify: inter-word;
}

The text-align property lines up both edges of the paragraph text and test-justify property sets how space is added into text of the line.

But there's a caveat. Justified text tends to look visually pleasing but reduces legibility and is discouraged by the W3C. Quoting from their guidance:

User Experience

This quote from a persona (fictional person) helps you understand some aspects of this guidance.

Persona: Parent with low vision – 20/400

Problem: “I increase the text size 400%. When text is fully justified, it gets big spacing between lots of words and scrunches up other words, making it hard to read."

What To Do

Usually nothing — if you don't mess with the justification, then it's good as is. In most situations, if you do not explicitly set the justification (for example, CSS text-align), it will default to left justification for left-to-right scripts and right justification for right-to-left scripts.