Allowing for text spacing without wrapping

Metadata

css

sufficient

Description

The objective of this technique is to allow a user to override text spacing via user stylesheet, bookmarklet, extension, or application. Increased spacing between paragraphs, lines, words, and characters benefits people with low vision or some cognitive disabilities. Content needs to allow spacing changes without loss of content or functionality by allowing the elements containing the text to expand as needed.

Where text is not intended to wrap, authors should either:

There is some variability in the width that words or phrases will grow to when setting the letter and word spacing. If elements must use a fixed width, a safe value is 20% wider than the default maximum width. For example, if a small text-container allows for 20 characters, allowing enough width for 24 characters should allow enough space for text-spacing to be applied.

For boxes which can expand with the text, authors can take advantage of the inline-block value of the CSS display property and not set negative margins to allow for text-spacing overrides.

Examples

When a user adapts the page to increase the text spacing, text fits within the bounds of its containing box.

The ex unit has been used as as the closest available unit for character width, ex Represents the x-height of the element's font. (MDN page for CSS units). It is not perfect, different characters have different default widths.

A box sized with space to allow for expansion

The containers are sized to a value greater than the default width of the text.

The CSS

<style>
/* Links are less than 8ex wide,
so 10ex width of each li allows for expanded letter and word width */
nav li { width: 10em; }
</style>

The HTML

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact/">Contact</a></li>
  <ul>
</nav>

If the navigation element used fix-width containers of the same size, the width would need to allow for text 20% larger than the longest word.

A box which expands with the text size

The CSS

<style>
/* CSS containers are given a display of inline-block. No negative margins set. */
 nav li { display: inline-block; }
 </style>

The HTML

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact/">Contact</a></li>
  <ul>
</nav>

In the case of variable-width text containers for each item, the parent item may need to allow for wrapping of the items.

Working examples of #1 and #2 are available.

Tests

Procedure

For elements which contain text that is not intended to wrap:

  1. Set zoom level to 100%.
  2. Use a tool or another mechanism to apply the text spacing metrics (line height, and paragraph, letter, and word spacing), such as the Text Spacing Bookmarklet or a user-style browser plugin.
  3. Check that all content and functionality is available e.g., text in containers is not truncated and does not overlap other content.

Expected Results

Where a page has multiple layouts (e.g. in a responsive design) text spacing should be tested in each layout.