Supplemental Guidance: Text Justification
Note: Can use this as an example of the type of information to include. (This topic isn't a good example of supplemental guidance because it's mostly covered in SC 1.4.8 & F88. :-)
Summary
Avoid full justification. Avoid centered justification for blocks of text (more than one sentence of text).
When users change the justification, no information or functionality is lost.
Important
[boilerplate wording: @@ This is informative. Other than SCs from WCAG, not a requirement...]
User Experience
This quote from a persona (fictional person) helps you understand some aspects of this guidance.
Persona: Parent with low vision – 20/400
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.
Support User Customization
Allow users to change the justification. For example, users might change text-align using CSS.
Make sure that when users change the justification, no information or functionality is lost.
Intent
Justification impacts readability and tracking. Tracking is following lines of text and getting to the next line.
In CSS, text-align options are: left, right, center, justify (="full justification").
With full justification, text is flush with both the right and left margins (for left-right and right-left scripts). Fully justified text has adjusted spacing between words and sometimes adjusted space between letters.
For most users, it is easiest to read text that is justified as it is read:
- for left-to-right scripts, left justified text is easier to read
- for right-to-left scripts, right justified is easier to read
Although a small percent of people find it easier to track from the end of one line to the next with full justification. [@@ is this true? data to support?]
Full justification often makes reading more difficult because sometimes there is:
- extra space between words that makes it difficult to follow along on one line.
- less space between some words that makes it difficult to distinguish words.
- inconsistent letter spacing that makes it harder to distinguish letters and words.
- spacing that causes “rivers of white” and disrupts tracking.
The problems with full justification are usually much worse when users increase the text size (and text reflows as it should per Success Criterion 1.4.10: Reflow).
Centered text is also more difficult for most people to read, when there are multiple lines of text. It is harder to find the beginning of the next line of text and keep a smooth reading flow for comprehension. Additionally, screen magnification users might miss some centered text.
Benefits
- Improves readability for all users, especially for people with some types of low vision and cognitive disabilities.
Examples
[@@add: Example showing awkward spacing with full justification, including "rivers of white". Probably two examples, one with much larger text showing how the problem is compounded.]
Related Resources
Techniques
Failures
- Using
text-align: justify
- Using
text-align: centered
for blocks of text
Key Terms
- blocks of text
- more than one sentence of text
Editorial Notes
These notes are not for the published document — just for us working through ideas.
For fun: Strategies for full-width justification
Keep in mind that while this is primarily for the web, we'd like it to apply to other digital mediums. And some language scripts are top-to-bottom. Thus I think we can use common web examples like text-align, yet be careful to not make the wording exclude other situations. (And since this currently written as proposed "supplemental guidance" rather than a success criteria, the wording doesn't have to be convoluted to cover every situation, exception, etc. :-) {shawn}
Perhaps add "text justification" to the Key Terms? How text is aligned to the page {Jason.Grieves] Could we leverage these examples? https://designforhackers.com/blog/justify-text-html-css/ {Jason Grieve}it