表示サンプル： このページの修正箇所は次のように表示されます。
ウィンドウのサイズを変更するとテキストを折り返す、全てのウェブコンテンツ技術
これは、次の達成基準に関連する実装方法である：
ユーザーエージェントの中には、テキストコンテナの幅又は高さを変えることなく、文字サイズの変更をサポートしているものがある。コンテンツ又は機能の損失は、テキストがその割り当てられたスペースからあふれてしまう時に起こりうる。しかし、レイアウトのプロパティは、コンテンツの表示を効果的に継続する方法を提供することができる。 ブロックのサイズは、200%まで変更した時に文字があふれないほどの十分な幅を定義している。 文字はブロック内に入りきらない時包まり、そしてブロックは、ブロック内にすべての文字が入り続けるために十分な高さとなる。ブロックは変更された文字が入りきらない時、スクロールバーを提供する。
HTMLとCSSはテキストのページのために２つのカラムのレイアウトを作るために使われている。white-space特性とnormalのデフォルト値を使うことで文字を包み込んでいる。
文字のサイズが200％になると、文字は再びあふれ、、テキストのカラムは長くなる。もしカラムが表示域に対して長すぎると、コンテンツ制作者がoverflow:scroll 又は overflow:autoのCSSルールを指定しているため、ユーザーエージェントはスクロールバーを提供し、利用者がビューの中にテキストをスクロールすることができるようにする。
カラムの中でテキストブロックでレイアウトしている新聞がある。そのブロックは横幅は固定されているが、高さは指定していない。ブラウザでテキストが変更された時、文字は包まれ、ブロックは高さが高くなる。
テキストとコンテナの両方に関係する単位を使うことは、テキストに切り捨てすることなく適応させるようにコンテナを拡張することができる。 この画像はインターネットエクスプローラーにおける”標準”サイズの文字である。灰色のボックスはdivのコンテナである。
この画像はInternet Explorerの“最大”の文字サイズを用いて同じテキストとコンテナを示している。灰色のボックスはより大きなテキストを囲むために拡張している。
コード例:
<style type="text/css">
div { background-color:#ccc; line-height:120%; position:relative; }
div.RelativeRelative { font-size:100%; width:8.1em; height:6.7em; }
</style>
<div class="RelativeRelative">
すべての善良な人々にとって彼らの国を援助するのは今だ。
</div>文字サイズが200％に拡大する。
すべてのコンテンツと機能が閲覧及び使用可能である。
2.を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。