Techniques for WCAG 2.0

Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text, changed text, deleted text, [start]/[end] markers, and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

-

C20: Using ems to set the column width [begin add] so that lines can average 80 characters or less [end add]

Applicability

CSS

This technique relates to:

Description

The purpose of this technique is to define column width using ems. This allows for column width to grow wider as font sizes increase, which will reduce the possibility of clipping as the text size increases.

Examples

Example 1

In this example, the first column will be 50em wide, the second will be 80em wide.

 div.article {
  column-number: 2;
  column-width: 50em 80em;
 }

Example 2

In this example the div width is set in ems in the stylesheet

main_content {width: 80em}

And the text block would be placed inside the div in the content

<div id="main_content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Test to see that the columns are defined in ems.

  2. [begin add]

    Check to see that line length can be set to 80 characters or less by resizing the browser window.

    [end add]

Expected Results