[View on W3C.org]
Testing & Remediation How to test:
For elements which contain text that is intended to wrap:
- Set zoom level to 100%.
- 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.
- Check that all content and functionality is available e.g., text in containers is not truncated and does not overlap other content.
*When a page has multiple layouts (e.g. in a responsive design website), text spacing should be tested in each layout.
How to remediate:
In English languages, if authors do not set the CSS height property, it can help ensure paragraphs expand. Paragraphs need to allow text to increase vertically for languages or scripts such as English which are read horizontally or to increase horizontally for languages or scripts which are read vertically.
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.