Small containers allow for text spacing

Metadata

css

sufficient

When to Use

This technique is applicable to Cascading Style Sheet/HTML technologies where a box does not allow for wrapping text.

Description

The objective of this technique is to ensure that when a small container with text (such as items in a navigation) have sufficient space to allow text to increase in it's spacing.

Examples

Example 1: 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 links are less than 7em wide, so the 10em width of each list item allows for expanded letter and word width.

/* CSS */
.nav li { width: 10em; }
<!-- HTML -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact/">Contact</a></li>
  <ul>
</nav>

Example 2: A box which expands with the text size

The containers are given an display of inline-block .

/* CSS */
.nav li { display: inline-block; }
<!-- HTML -->
<nav>
    <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact/">Contact</a></li>
    <ul>
</nav>

Tests

Procedure

  1. Display content in a user agent.
  2. Set zoom level to 100%.
  3. Use a tool or another mechanism to apply the text spacing metrics, such as the Text Spacing Bookmarklet or a user-style browser plugin.
  4. Check that all content and functionality is available.

Expected Results

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