# Justified text with uneven gaps between words

Source: https://easeweb.dev/learn/text-blocks
Topics: Zoom, reflow and text spacing > Blocks of text have short lines, open spacing and no justification (WCAG 1.4.8)
The fix: Either align the text to one edge with text-align: start, so every space between words keeps the font's own width; or keep it justified and put a switch above the text that turns justification off. Aligning to the start works for every reader, with nothing to find.
Test with: text layout, keyboard
References: https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html https://www.w3.org/TR/WCAG22/#visual-presentation https://www.w3.org/WAI/WCAG22/Techniques/failures/F88 https://www.w3.org/WAI/WCAG22/Techniques/css/C19 https://www.w3.org/WAI/WCAG22/Techniques/general/G172 https://www.w3.org/TR/jlreq/#necessity_for_line_adjustment https://github.com/w3c/wcag/issues/3336 https://developer.mozilla.org/en-US/docs/Web/CSS/text-align https://wptavern.com/wordpress-4-7-removes-the-underline-and-justify-buttons-from-the-editor

This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.

## What happens

A shop that sells handmade tableware keeps a journal. Its article page is drawn like a magazine: a serif headline, and body text set flush to both edges, so every paragraph is a neat block whose sides line up. In the design file, with copy written to fit, the blocks look tidy, and the look is what the shop asked for.

The real copy doesn't fit so neatly. To make each line reach both edges, the browser widens the spaces between its words, by a different amount on every line. A line that holds a few long words, such as "differences really", gets wide gaps; the line under it, with more short words, gets narrow ones. Where wide gaps fall on lines above each other, they join into a channel of white running down the paragraph. On a phone, where a line holds seven or eight words, some gaps grow as wide as a short word.

## Why it fails

Success Criterion 1.4.8, Visual Presentation, is Level AAA. For blocks of text, it asks that a mechanism is available to achieve five things, and the journal meets four of them:

- The reader can choose the text and background colours. The journal sets both, as a pair, so a browser's colour settings can replace them together.
- Lines are no more than 80 characters wide (40 for Chinese, Japanese or Korean). The column is 34em wide, about 75 characters, and narrows with the window.
- Text is not justified. This is the part the journal doesn't meet, and the one W3C's failure F88 tests.
- Lines are spaced at least space-and-a-half, and paragraphs 1.5 times further apart than lines. The journal sets a line height of 1.6, as technique C21 does with 1.5, and leaves 1.5em between paragraphs, so a paragraph's last line and the next one's first are 3.1em apart, top to top: more than the 250% of single spacing the Understanding document gives as the measure.
- Text can be enlarged to 200% without scrolling sideways to read a line. Sizes are in em, so the column reflows.

The Understanding document gives the reason for the third part. Justified text is spread unevenly between its words, which can make "rivers of white" run down the page, and where a line is squeezed instead, words sit so close together that people with some cognitive disabilities find it hard to tell where one ends and the next begins. In CSS, `text-align: justify` shares out the space left over at the end of each line among the spaces in that line. Each line has a different amount left over and a different number of spaces to share it, so no two lines are spaced alike. Browsers don't break words with hyphens unless `hyphens` asks them to, so a long word that doesn't fit moves down whole and leaves the most space behind.

W3C's failure technique F88 tests exactly this: open the page in a common browser and check that the content is not justified; if it is, the page fails 1.4.8. Since WCAG 2.2, a note to the criterion says the mechanism can be provided by the browser and that content is not required to provide it, and reading modes such as Firefox Reader View do lay an article out again in their own styles. W3C still lists F88, though, and Firefox offers Reader View only on pages it recognises as articles. Both fixes below meet the requirement on the page itself, so neither depends on that question.

## Who is affected

Justified text is at its worst where lines are short: on a phone, in a narrow column beside a photo, and with the text enlarged, since each line then holds fewer spaces to share its leftover width. It is rarely the theme's default. Shop owners add it by hand: Shopify's Community forum has threads asking how to justify product descriptions and blog posts in the Dawn, Prestige and Impulse themes, and the answers give a `text-align: justify` rule to paste into the theme's CSS.

## What automation and AI miss

axe has no rule for justified text, and Lighthouse runs axe's rules, so neither reports it. WAVE shows it as an alert, "Justified text", for a person to judge. EaseWeb's audit reports a block of text longer than one sentence whose computed `text-align` is `justify`, as `ew:justified-text`, and leaves out Japanese, Chinese and Korean text, where justification is the convention. What no check can tell is whether the page offers a switch that turns justification off; a person looks for one. A review of the design file rarely catches it either, because the copy in a mock-up is often placeholder text, or written to fit the block. A change that adds `hyphens: auto` narrows the widest gaps but leaves the text justified, so it still fails F88's test.

## Before: an article set flush to both edges

```html
<article class="article">
  <h1>Why every mug is a little different</h1>
  <div class="article-body">
    <p>Each mug starts as a lump of stoneware clay, thrown by hand on the wheel …</p>
    <p>Glazing is where the differences really show. …</p>
    …
  </div>
</article>
```

```css
.article {
  color: #2b2622;
  background: #fbf8f3;
}
.article-body {
  max-width: 34em;
  line-height: 1.6;
}
.article-body p {
  margin: 0 0 1.5em;
  text-align: justify;
}
```

- Every line but the last in each paragraph is stretched to reach both edges, so the spaces between words are a different width on every line.
- On a phone each line holds a few words, and some gaps grow as wide as a short word.
- Nothing on the page turns the justification off.

## After: text aligned to the start

```html
<article class="article">
  <h1>Why every mug is a little different</h1>
  <div class="article-body">
    <p>Each mug starts as a lump of stoneware clay, thrown by hand on the wheel …</p>
    <p>Glazing is where the differences really show. …</p>
    …
  </div>
</article>
```

```css
.article {
  color: #2b2622;
  background: #fbf8f3;
}
.article-body {
  max-width: 34em;
  line-height: 1.6;
}
.article-body p {
  margin: 0 0 1.5em;
  text-align: start;
}
```

1. Change `text-align: justify` to `text-align: start`. Every space between words is the font's own width again, on every line and at every screen width, and the right edge of each paragraph is ragged.

This fixes the Before and passes 1.4.8: with the column, spacing and colours it already had, the article meets all five parts on the page itself. The look keeps its column, type and spacing; only the straight right edge goes. `start` follows the direction of the text, so the same rule aligns a right-to-left language such as Arabic to the right, which C19 allows too.

## After: justified, with a switch to turn it off

```html
<article class="article">
  <h1>Why every mug is a little different</h1>
  <label class="text-setting">
    <input type="checkbox" id="left-align">
    Left-align text
  </label>
  <div class="article-body">
    <p>Each mug starts as a lump of stoneware clay, thrown by hand on the wheel …</p>
    <p>Glazing is where the differences really show. …</p>
    …
  </div>
</article>
```

```css
.article {
  color: #2b2622;
  background: #fbf8f3;
}
.article-body {
  max-width: 34em;
  line-height: 1.6;
}
.article-body p {
  margin: 0 0 1.5em;
  text-align: justify;
}
body:has(#left-align:checked) .article-body p {
  text-align: start;
}
```

1. Put a checkbox labelled "Left-align text" between the headline and the first paragraph. The reader meets it before the text, near the beginning of the page, where W3C technique G172 asks for it.
2. Add a rule that sets every paragraph to `text-align: start` while the box is ticked. The straight edge stays for everyone who leaves it alone, and the spaces even out the moment the box is ticked.

This fixes the Before and passes 1.4.8 through the switch, as G172 describes for a site that keeps justified text for its look. It is not enough on its own: every reader meets the justified text first, and has to notice the switch and know what it does. The snippet forgets the choice when the page changes; to keep it from page to page, save it with a few lines of script, for example in `localStorage`, and apply it before the page is drawn, so the text doesn't jump on each load.

## Which option to use

Both pass 1.4.8. Aligning to the start is one word in the stylesheet, and it passes for every reader on every page, with nothing to find and nothing to remember, so use it unless the design truly needs its straight edge. The switch keeps the look as drawn, for a site that is copying a printed original, but it is not enough on its own: it adds a control to design, build and test, and the readers it is for have to find it first.

## Implementation decisions

Look for justification wherever text is styled by hand, not only in the theme's stylesheet. It comes in through a theme's custom CSS box (`.rte p { text-align: justify !important; }`), through a page builder's alignment buttons, through the `align="justify"` attribute that old editors wrote, and through inline styles. WordPress removed the Justify button from its editor toolbar in version 4.7, because browsers implement it unevenly and it often makes text less readable, but its keyboard shortcut kept working, and a plugin puts the button back.

`hyphens: auto` is not a fix. It lets the browser split long words across lines, which narrows the widest gaps, but the text is still justified, and F88's test is whether it is justified. `text-align-last` only changes the last line of each paragraph.

Japanese, Chinese and Korean text is different. W3C's Requirements for Japanese Text Layout say Japanese composition has no equivalent of ragged right, and that justification there is spread over many points in the line, not only the spaces between words. During the review of WCAG 2.2, W3C's internationalization group raised this for Chinese and Japanese, and WCAG 2.2 added a note to 1.4.8: where a writing system doesn't use one of its presentation aspects, content in that writing system can conform without it. A Japanese page set justified is therefore not the failure this guide describes. The English pages of a Japanese site are: the same `text-align: justify` stretches the spaces between English words, so a site that serves both languages from one stylesheet sets English text to `start`, for example with `:lang(en)`.

The example meets the other four parts already, and each has a guide of its own when it goes wrong. A reader who widens line, letter or word spacing with their own stylesheet is covered by [button labels cut off when people widen text spacing](/learn/text-spacing), a column that has to be scrolled sideways once the text is enlarged by [pages that scroll sideways on a narrow screen](/learn/reflow), and colours that are hard to read by [low-contrast text on brand colours, photos and hover states](/learn/text-contrast).

## Verify the fix

1. Open each template that holds paragraphs of text, such as an article, a product description, a help page and a policy page, in a common browser, and look at the right edge of each paragraph: it should be ragged, with every space between words the same width.
2. Narrow the window to a phone's width, or open the page on a phone, and look again: no line has gaps that stand out from the spaces on the lines around it.
3. In the browser's developer tools, check the computed `text-align` of each paragraph in a language other than Chinese, Japanese or Korean: `start` or `left` (or `right` in a right-to-left language), never `justify`. Search the theme's custom CSS and the rich-text content for `justify`.
4. If the site keeps justified text with a switch instead, press Tab from the top of the page and check that the switch comes before the text, has a visible label, and when turned on with Space, sets every paragraph on the page to a ragged right edge; then open another page and check whether the choice was kept.

Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat whenever the theme, the article template or the custom CSS changes.

## Limits

This is a starting pattern, not a guarantee for every application. 1.4.8 is Level AAA, above the AA level that most policies ask for, but this part of it costs one word of CSS. The guide covers the justification part only; the example meets the other four by its line height, column width, colours and relative sizes. Class names in the snippets are placeholders, and no particular reading mode or browser setting is claimed to meet the criterion.

## What the checkers report

- WAVE: "Justified text"

---

Get this guide in your coding agent: MCP https://easeweb.dev/mcp (setup at https://easeweb.dev/services/developers)