8000 csswg-drafts/css3-text/Overview.html at 797ea4c6377560fd7b58662d36b30f62f2370fe5 · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
7411 lines (5214 loc) · 226 KB

Overview.html

File metadata and controls

7411 lines (5214 loc) · 226 KB
href="http://www.w3.org/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.
<p><strong>Feedback on this draft should be posted to the (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a
href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a
href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with
<kbd>[css3-text]</kbd> in the subject line.</strong> You are strongly
encouraged to complain if you see something stupid in this draft. The
editors will do their best to respond to all feedback.
<p><strong>If you have implemented properties from the <a
href="http://www.w3.org/TR/2003/CR-css3-text-20030514/">May 2003 CSS3 Text
CR</a></strong> <em>please</em> let us know so we can take that into
account as we redraft the spec. You can post to <a
href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
(public), post to the <a
href="http://lists.w3.org/Archives/Member/w3c-css-wg/">CSS WG mailing
list</a> (<a
href="http://cgi.w3.org/MemberAccess/AccessRequest">Member-restricted</a>),
or <a href="http://fantasai.inkedblade.net/contact">email fantasai
directly</a> (personal).
<p>The following features are at risk and may be cut from the spec during
its CR period if there are no (correct) implementations:
<ul>
<li>the &lt;length> values of the &lsquo;<a href="#tab-size0"><code
class=property>tab-size</code></a>&rsquo; property
<li>the &lsquo;<a href="#hanging-punctuation0"><code
class=property>hanging-punctuation</code></a>&rsquo; property
<li>the percentage values of &lsquo;<a href="#letter-spacing0"><code
class=property>letter-spacing</code></a>&rsquo; and &lsquo;<a
href="#word-spacing0"><code class=property>word-spacing</code></a>&rsquo;
<li>the &lsquo;<code class=css>hyphenate-limit-*</code>&rsquo; properties
<li>the &lsquo;<a href="#hyphenate-resource"><code
class=property>hyphenate-resource</code></a>&rsquo; property / &lsquo;<a
href="#hyphenate-resource"><code
class=css>@hyphenate-resource</code></a>&rsquo; at-rule
<li>the &lsquo;<a href="#text-spacing"><code
class=property>text-spacing</code></a>&rsquo; property
<li>the &lsquo;<a href="#text-decoration-skip0"><code
class=property>text-decoration-skip</code></a>&rsquo; property /
&lsquo;<code class=css>ink</code>&rsquo; value
<li>the &lsquo;<a href="#text-emphasis-skip0"><code
class=property>text-emphasis-skip</code></a>&rsquo; property
<li><span class=issue>audit draft and add more here</span>
</ul>
<h2 class="no-num no-toc" id=contents>Table of Contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#intro"><span class=secno>1. </span> Introduction</a>
<li><a href="#transforming"><span class=secno>2. </span> Transforming
Text</a>
<ul class=toc>
<li><a href="#text-transform"><span class=secno>2.1. </span>
Transforming Text: the &lsquo;<code
class=property>text-transform</code>&rsquo; property</a>
</ul>
<li><a href="#white-space-processing"><span class=secno>3. </span> White
Space Processing</a>
<ul class=toc>
<li><a href="#white-space-collapsing"><span class=secno>3.1. </span>
White Space Collapsing: the &lsquo;<code
class=property>text-space-collapse</code>&rsquo; property</a>
<li><a href="#tab-size"><span class=secno>3.2. </span> Tab Character
Size: the &lsquo;<code class=property>tab-size</code>&rsquo;
property</a>
<li><a href="#white-space-rules"><span class=secno>3.3. </span> The
White Space Processing Rules</a>
<ul class=toc>
<li><a href="#egbidiwscollapse"><span class=secno>3.3.1. </span>
Example of bidirectionality with white space collapsing</a>
<li><a href="#line-break-transform"><span class=secno>3.3.2. </span>
Line Feed Transformation Rules</a>
<li><a href="#white-space-summary"><span class=secno>3.3.3. </span>
Informative Summary of White Space Collapsing Effects</a>
</ul>
<li><a href="#white-space"><span class=secno>3.4. </span> White Space
and Text Wrapping Shorthand: the &lsquo;<code
class=property>white-space</code>&rsquo; property</a>
</ul>
<li><a href="#line-breaking"><span class=secno>4. </span> Line Breaking
and Word Boundaries</a>
<ul class=toc>
<li><a href="#line-break"><span class=secno>4.1. </span> Line Breaking
Strictness: the &lsquo;<code class=property>line-break</code>&rsquo;
property</a>
<li><a href="#word-break"><span class=secno>4.2. </span> Word Brea 8878 king
Rules: the &lsquo;<code class=property>word-break</code>&rsquo;
property</a>
</ul>
<li><a href="#hyphenation"><span class=secno>5. </span>Hyphenation</a>
<ul class=toc>
<li><a href="#hyphens"><span class=secno>5.1. </span>Hyphenation
Control: the &lsquo;<code class=property>hyphens</code>&rsquo;
property</a>
<li><a href="#hyphenate-character"><span class=secno>5.2. </span>
Hyphens: the &lsquo;<code
class=property>hyphenate-character</code>&rsquo; property</a>
<li><a href="#hyphenate-size-limits"><span class=secno>5.3. </span>
Hyphenation Size Limit: the &lsquo;<code
class=property>hyphenate-limit-zone</code>&rsquo; property</a>
<li><a href="#hyphenate-char-limits"><span class=secno>5.4. </span>
Hyphenation Character Limits: the &lsquo;<code
class=property>hyphenate-limit-word</code>&rsquo; property</a>
<li><a href="#hyphenate-line-limits"><span class=secno>5.5. </span>
Hyphenation Line Limits: the &lsquo;<code
class=property>hyphenate-limit-lines</code>&rsquo; and &lsquo;<code
class=property>hyphenate-limit-last</code>&rsquo; properties</a>
<li><a href="#hyphenation-resource"><span class=secno>5.6. </span>
Hyphenation Resources</a>
<ul class=toc>
<li><a href="#at-hyphenate-resource"><span class=secno>5.6.1.
</span>The &lsquo;<code class=css>@hyphenate-resource</code>&rsquo;
rule</a>
<li><a href="#the-hyphenate-resource"><span class=secno>5.6.2.
</span>The &lsquo;<code
class=property>hyphenate-resource</code>&rsquo; property</a>
</ul>
</ul>
<li><a href="#wrapping"><span class=secno>6. </span> Text Wrapping</a>
<ul class=toc>
<li><a href="#text-wrap"><span class=secno>6.1. </span> Text Wrap
Settings: the &lsquo;<code class=property>text-wrap</code>&rsquo;
property</a>
<ul class=toc>
<li><a href="#example-avoid"><span class=secno>6.1.1. </span>Example
of using &lsquo;<code class=css>text-wrap: avoid</code>&rsquo; in
presenting a footer</a>
</ul>
<li><a href="#word-wrap"><span class=secno>6.2. </span> Emergency
Wrapping: the &lsquo;<code class=property>word-wrap</code>&rsquo;
property</a>
</ul>
<li><a href="#justification"><span class=secno>7. </span> Alignment and
Justification</a>
<ul class=toc>
<li><a href="#text-align"><span class=secno>7.1. </span> Text Alignment:
the &lsquo;<code class=property>text-align</code>&rsquo; property</a>
<ul class=toc>
<li><a href="#character-alignment"><span class=secno>7.1.1.
</span>Details on Character-based Alignment in a Table Column</a>
</ul>
<li><a href="#text-align-last"><span class=secno>7.2. </span> Last Line
Alignment: the &lsquo;<code
class=property>text-align-last</code>&rsquo; property</a>
<li><a href="#text-justify"><span class=secno>7.3. </span> Justification
Method: the &lsquo;<code class=property>text-justify</code>&rsquo;
property</a>
</ul>
<li><a href="#spacing"><span class=secno>8. </span> Spacing</a>
<ul class=toc>
<li><a href="#word-spacing"><span class=secno>8.1. </span> Word Spacing:
the &lsquo;<code class=property>word-spacing</code>&rsquo; property</a>
<li><a href="#letter-spacing"><span class=secno>8.2. </span> Tracking:
the &lsquo;<code class=property>letter-spacing</code>&rsquo;
property</a>
<li><a href="#text-spacing-prop"><span class=secno>8.3. </span>
Character Class Spacing: the &lsquo;<code
class=property>text-spacing</code>&rsquo; property</a>
<ul class=toc>
<li><a href="#fullwidth-collapsing"><span class=secno>8.3.1. </span>
Fullwidth Punctuation Collapsing</a>
<li><a href="#text-spacing-classes"><span class=secno>8.3.2. </span>
Text Spacing Character Classes</a>
</ul>
</ul>
<li><a href="#edge-effects"><span class=secno>9. </span> Edge Effects</a>
<ul class=toc>
<li><a href="#text-indent"><span class=secno>9.1. </span> First Line
Indentation: the &lsquo;<code class=property>text-indent</code>&rsquo;
property</a>
<li><a href="#hanging-punctuation"><span class=secno>9.2. </span>
Hanging Punctuation: the &lsquo;<code
class=property>hanging-punctuation</code>&rsquo; property</a>
</ul>
<li><a href="#decoration"><span class=secno>10. </span> Text
Decoration</a>
<ul class=toc>
<li><a href="#line-decoration"><span class=secno>10.1. </span> Line
Decoration: Underline, Overline, and Strike-Through</a>
<ul class=toc>
<li><a href="#text-decoration-line"><span class=secno>10.1.1. </span>
Text Decoration Lines: the &lsquo;<code
class=property>text-decoration-line</code>&rsquo; property</a>
<li><a href="#text-decoration-color"><span class=secno>10.1.2. </span>
Text Decoration Color: the &lsquo;<code
class=property>text-decoration-color</code>&rsquo; property</a>
<li><a href="#text-decoration-style"><span class=secno>10.1.3. </span>
Text Decoration Style: the &lsquo;<code
class=property>text-decoration-style</code>&rsquo; property</ 8348 a>
<li><a href="#text-decoration"><span class=secno>10.1.4. </span> Text
Decoration Shorthand: the &lsquo;<code
class=property>text-decoration</code>&rsquo; property</a>
<li><a href="#text-decoration-skip"><span class=secno>10.1.5. </span>
Text Decoration Line Continuity: the &lsquo;<code
class=property>text-decoration-skip</code>&rsquo; property</a>
<li><a href="#text-underline-position"><span class=secno>10.1.6.
</span> Text Underline Position: the &lsquo;<code
class=property>text-underline-position</code>&rsquo; property</a>
</ul>
<li><a href="#emphasis-marks"><span class=secno>10.2. </span> Emphasis
Marks</a>
<ul class=toc>
<li><a href="#text-emphasis-style"><span class=secno>10.2.1. </span>
Emphasis Mark Style: the &lsquo;<code
class=property>text-emphasis-style</code>&rsquo; property</a>
<li><a href="#text-emphasis-color"><span class=secno>10.2.2. </span>
Emphasis Mark Color: the &lsquo;<code
class=property>text-emphasis-color</code>&rsquo; property</a>
<li><a href="#text-emphasis"><span class=secno>10.2.3. </span>
Emphasis Mark Shorthand: the &lsquo;<code
class=property>text-emphasis</code>&rsquo; property</a>
<li><a href="#text-emphasis-position"><span class=secno>10.2.4.
</span> Emphasis Mark Position: the &lsquo;<code
class=property>text-emphasis-position</code>&rsquo; property</a>
<li><a href="#text-emphasis-skip"><span class=secno>10.2.5. </span>
Emphasis Mark Skip: the &lsquo;<code
class=property>text-emphasis-skip</code>&rsquo; property</a>
</ul>
<li><a href="#text-shadow"><span class=secno>10.3. </span> Text Shadows:
the &lsquo;<code class=property>text-shadow</code>&rsquo; property</a>
</ul>
<li class=no-num><a href="#acknowledgements"> Appendix A:
Acknowledgements</a>
<li class=no-num><a href="#appendix-b-references">Appendix B:
References</a>
<ul class=toc>
<li class=no-num><a href="#normative-ref">Normative references</a>
<li class=no-num><a href="#informative-ref">Informative references</a>
</ul>
<li class=no-num><a href="#changes">Appendix C: Changes</a>
<ul class=toc>
<li class=no-num><a href="#recent-changes"> Changes from the April 2011
CSS3 Text <abbr title="Working Draft">WD</abbr></a>
</ul>
<li class=no-num><a href="#default-stylesheet">Appendix D: Default UA
Stylesheet</a>
<li class=no-num><a href="#script-groups">Appendix E: Scripts and
Spacing</a>
<li class=no-num><a href="#small-kana">Appendix F: Small Kana Mappings</a>
<li class=no-num><a
href="#appendix-g-text-processing-order-of-oper">Appendix G: Text
Processing Order of Operations</a>
<li class=no-num><a href="#appendix-h-full-property-index">Appendix H:
Full Property Index</a>
<li class=no-num><a href="#index">Appendix I: Index</a>
<li class=no-num><a href="#traditions">Appendix J: Cultural
Correlations</a>
</ul>
<!--end-toc-->
<h2 id=intro><span class=secno>1. </span> Introduction</h2>
<p>[document here]
<p class=issue>This draft describes features that are specific to certain
scripts. There is an ongoing discussion about where these features belong:
in existing CSS properties, in new CSS properties, or perhaps in other
specifications.
<p id=grapheme-cluster>A <dfn id=grapheme-cluster0>grapheme cluster</dfn>
is what a language user considers to be a character or a basic unit of the
script. The term is described in detail in the Unicode Technical Report:
Text Boundaries <a href="#UAX29"
rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a>. This specification uses the
<em>extended grapheme cluster</em> definition in <a href="#UAX29"
rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a> (not the <em>legacy grapheme
cluster</em> definition). The UA may further tailor the definition as
allowed by Unicode. Within this specification, the ambiguous term <dfn
id=character>character</dfn> is used as a friendlier synonym for <a
href="#grapheme-cluster0"><i>grapheme cluster</i></a>. See <a
href="http://dev.w3.org/csswg/css3-writing-modes/#character-properties">Characters
and Properties</a> for how to determine the Unicode properties of a
character.
<p id=letter>A <dfn id=letter0>letter</dfn> for the purpose of this
specification is a <a href="#character"><i>character</i></a> belonging to
one of the Letter or Number general categories in Unicode. <a
href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>
<h2 id=transforming><span class=secno>2. </span> Transforming Text</h2>
<h3 id=text-transform><span class=secno>2.1. </span> <a name=caps-prop></a>
Transforming Text: the &lsquo;<a href="#text-transform0"><code
class=property>text-transform</code></a>&rsquo; property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=text-transform0>text-transform</dfn>
<tr>
<th>Value:
<td>none | [ [ capitalize | uppercase | lowercase ] || full-width ||
full-size-kana ]
<tr>
<th>Initial:
<td>none
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>yes
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed&#160;value:
<td>as specified
</table>
<p>This property transforms text for styling purposes. Values have the
following meanings:
<dl>
<dt><dfn id=none title="text-transform:none"><code>none</code></dfn>
<dd>No effects.
<dt><dfn id=capitalize
title="text-transform:capitalize"><code>capitalize</code></dfn>
<dd>Puts the first <a href="#character"><i>character</i></a> of each word
in titlecase; other characters are unaffected.
<dt><dfn id=uppercase
title="text-transform:uppercase"><code>uppercase</code></dfn>
<dd>Puts all characters in uppercase.
<dt><dfn id=lowercase
title="text-transform:lowercase"><code>lowercase</code></dfn>
<dd>Puts all characters in lowercase.
<dt><dfn id=full-width
title="text-transform:full-width"><code>full-width</code></dfn>
<dd>Puts all characters in fullwidth form. If the character does not have
a corresponding fullwidth form, it is left as is. This value is typically
used to typeset Latin characters and digits like ideographic characters.
<dt><dfn id=full-size-kana
title="text-transform:full-size-kana"><code>full-size-kana</code></dfn>
<dd>Converts all small Kana characters to normal Kana. This value is
typically used for ruby annotation text, where all small Kana should be
drawn as large Kana.
</dl>
<p>The case mapping rules for the character repertoire specified by the
Unicode Standard can be found on the Unicode Consortium Web site <a
href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>. The UA
must use the full case mappings for Unicode characters, including any
conditional casing rules, as defined in Default Case Algorithm section. If
(and only if) the content language of the element is known, then any
applicable language-specific rules must be used as well. (See <a
href="http://www.unicode.org/Public/UNIDATA/SpecialCasing.txt">SpecialCasing.txt</a>)
<p>The definition of "word" used for &lsquo;<code
class=css>capitalize</code>&rsquo; is UA-dependent; <a href="#UAX29"
rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a> is suggested (but not
required) for determining such word boundaries. Authors should not expect
&lsquo;<code class=css>capitalize</code>&rsquo; to follow
language-specific titlecasing conventions (such as skipping articles in
English).
<!-- www-style notes that UAX29 won't work for 'Tis and similar, so
the UA might want to use UAX29 to split into words, but skip forward
past any starting non-letters (as an example of why UAX29 is not ideal) -->
<p>The definition of fullwidth and halfwidth forms can be found on the
Unicode consortium web site at <a href="#UAX11"
rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>. The mapping to fullwidth
form is defined by taking code points with the &lt;wide&gt; tag in their
Decomposition_Mapping in <a href="#UAX44"
rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a> and mapping their
decomposition (minus the &lt;wide&gt; tag) back to the original code
point.
<p>The mappings for small Kana to normal Kana are defined in <a
href="#small-kana-map">Small Kana Mappings</a>.
<p>When multiple values are specified and therefore multiple
transformations need to be applied, they are applied in the following
order:
<ol>
<li>&lsquo;<code class=css>capitalize</code>&rsquo;, &lsquo;<code
class=css>uppercase</code>&rsquo;, and &lsquo;<code
class=css>lowercase</code>&rsquo;
<li>&lsquo;<code class=css>fullwidth</code>&rsquo;
<li>&lsquo;<code class=css>fullsize-kana</code>&rsquo;
</ol>
7E1
<p>Text transformation happens after <a href="#white-space-rules">white
space processing</a>, which means that &lsquo;<code
class=css>full-width</code>&rsquo; transforms only preserved U+0020 spaces
to U+3000.
<div class=example>
<p>The following example converts the ASCII characters in abbreviations in
Japanese to their fullwidth variants so that they lay out and line break
like ideographs:
<pre>abbr:lang(ja) { text-transform: fullwidth; }</pre>
</div>
<p class=issue>All-caps text sometimes has special typographic
considerations. For example: Punctuation and number glyphs might be
adjusted for the higher "center of gravity" (see the <a
href="http://www.microsoft.com/typography/otspec/features_ae.htm#case">case</a>
feature in OpenType). Should we turn that on by default, as they suggest?
Or spacing might be adjusted for the increased visual weight of the glyphs
(see the <a
href="http://www.microsoft.com/typography/otspec/features_ae.htm#cpsp">cpsp</a>
feature in OpenType). Should we turn that on when &lsquo;<a
href="#letter-spacing0"><code
class=property>letter-spacing</code></a>&rsquo; is &lsquo;<code
class=css>normal</code>&rsquo;?
<p>A more complicated problem is the <a
href="http://blogs.msdn.com/b/michkap/archive/2006/08/18/706383.aspx">greek
uppercasing rules</a> which actually alter the diacritics. How should we
handle that?
<p class=note>A future level of CSS may introduce an &lsquo;<a
href="#text-transform0"><code class=css>@text-transform</code></a>&rsquo;
rule similar to &lsquo;<code class=css>@counter-style</code>&rsquo; from
[[CSS3LISTS]] to create mapping tables for less common text transforms.
<h2 id=white-space-processing><span class=secno>3. </span> White Space
Processing</h2>
<p>The source text of a document often contains formatting that is not
relevant to the final rendering: for example, breaking the source into
segments (lines) for ease of editing or adding white space characters such
as tabs and spaces to indent the source code. CSS white space processing
allows the author to control interpretation of such formatting: to
preserve or collapse it away when rendering the document.
<p id=segment-normalization> In the document source, segments can be
delimited by carriage returns (U+000D), linefeeds (U+000A) or a
combination (U+000D U+000A), or by some other mechanism, such as the SGML
RECORD-START and RECORD-END tokens. If no segmentation rules are specified
for the document language, each line feed (U+000A), carriage return
(U+000D) and CRLF sequence (U+000D U+000A) in the text is considered a
segment break. (This default rule also applies to generated content.) In
CSS, each such segment break is treated as a single line feed character
(U+000A).
<p>White space processing in CSS interprets white space characters only for
rendering: it has no effect on the underlying document data.
<p class=note>Note that the document parser may have not only normalized
segment breaks, but also collapsed other space characters or otherwise
processed white space according to markup rules. Because CSS processing
occurs <em>after</em> the parsing stage, it is not possible to restore
these characters for styling. Therefore, some of the behavior specified
below can be affected by these limitations and may be user agent
dependent.
<p>Control characters (Unicode class Cc) other than tab (U+0009), line feed
(U+000A), space (U+0020), and the bidi formatting characters
(U+202<var>x</var>) should be rendered as invisible zero-width characters.
UAs may instead treat them as visible characters. (Note, however, that
this will usually result in them being rendered as missing glyphs.) <span
class=issue>What's the line-breaking behavior? Effects on joining? Can we
just copy the behavior of some zero-width Unicode character?</span>
<h3 id=white-space-collapsing><span class=secno>3.1. </span> White Space
Collapsing: the &lsquo;<a href="#text-space-collapse"><code
class=property>text-space-collapse</code></a>&rsquo; property</h3>
<p class=issue>This section is still under discussion and may change in
future drafts.
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=text-space-collapse>text-space-collapse</dfn>
<tr>
<th>Value:
<td>collapse | discard | [ [preserve | preserve-breaks] && [ trim-inner
|| consume-before || consume-after ]
<tr>
<th>Initial:
<td>collapse
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>yes
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed&#160;value:
<td>specified value
</table>
<p class=issue>Need a property name
<p>This property declares whether and how <a
href="#white-space-processing">white space</a> inside the element is
collapsed. Values have the following meanings, which must be interpreted
according to the <a href="#white-space-rules">white space processing
rules</a>:
<dl>
<dt><dfn id=collapse0
title="white-space:collapse"><code>collapse</code></dfn>
<dd>This value directs user agents to collapse sequences of white space
into a single character (or <a href="#line-break-transform">in some
cases</a>, no character).
<dt><dfn id=preserve
title="white-space:preserve"><code>preserve</code></dfn>
<dd>This value prevents user agents from collapsing sequences of white
space. Line feeds are preserved as forced line breaks.
<dt><dfn id=preserve-breaks
title="white-space:preserve-breaks"><code>preserve-breaks</code></dfn>
<dd>This value collapses white space as for &lsquo;<code
class=css>collapse</code>&rsquo;, but preserves line feeds as forced line
breaks.
<dt><dfn id=discard title="white-space:discard"><code>discard</code></dfn>
<dd>This value directs user agents to "discard" all white space in the
element.
<dt><dfn id=trim-inner
title="white-space:trim-inner"><code>trim-inner</code></dfn>
<dd>For block containers this value directs UAs to discard all whitespace
at the beginning of the element up to and including the last line feed
before the first non-white-space character in the element as well as to
discard all white space at the end of the element starting with the first
line feed after the last non-white-space character in the element. For
inline elements this value directs UAs to discard all whitespace at the
beginning and end of the element. For other elements, this has no effect.
<dt><dfn id=consume-before
title="white-space:consume-before"><code>consume-before</code></dfn>
<dd>This value directs the UA to collapse all collapsible whitespace
immediately before the start of the element.
<dt><dfn id=consume-after
title="white-space:consume-after"><code>consume-after</code></dfn>
<dd>This value directs the UA to collapse all collapsible whitespace
immediately after the end of the element.
</dl>
<h3 id=tab-size><span class=secno>3.2. </span> Tab Character Size: the
&lsquo;<a href="#tab-size0"><code
class=property>tab-size</code></a>&rsquo; property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=tab-size0>tab-size</dfn>
<tr>
<th>Value:
<td>&lt;integer&gt; | &lt;length&gt;
<tr>
<th>Initial:
<td>8
<tr>
<th>Applies to:
<td>block containers
<tr>
<th>Inherited:
<td>yes
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed&#160;value:
<td>specified value
</table>
<p>This property determines the measure of the tab character (U+0009) when
rendered. Integers represent the measure in space characters (U+0020).
Negative integers are not allowed.
<h3 id=white-space-rules><span class=secno>3.3. </span> The White Space
Processing Rules</h3>
<p>White space processing affects only spaces (U+0020), tabs (U+0009), and
(<a href="#segment-normalization">post-normalization</a>) line feeds
(U+00A0).
<p>For each inline (including anonymous inlines) within an inline
formatting context, white space characters are handled as follows,
ignoring bidi formatting characters as if they were not there:
<ul>
<li id=collapse>
<p>If &lsquo;<a href="#text-space-collapse"><code
class=property>text-space-collapse</code></a>&rsquo; is set to
&lsquo;<code class=css>collapse</code>&rsquo; or &lsquo;<code
class=css>preserve-breaks</code>&rsquo;, white space characters are
considered <dfn id=collapsible>collapsible</dfn> and are processed by
performing the following steps:</p>
<ol>
<li>All spaces and tabs immediately preceding or following a line feed
character are removed.
<li>If &lsquo;<a href="#text-space-collapse"><code
class=property>text-space-collapse</code></a>&rsquo; is not
&lsquo;<code class=css>preserve-breaks</code>&rsquo;, line feed
characters are transformed for rendering according to the <a
href="#line-break-transform">line feed transformation rules</a>.
<li>Every tab is converted to a space (U+0020).
<li>Any space immediately following another collapsible space
&mdash;even one outside the boundary of the inline&mdash;is removed.
However, if removing this space would eliminate a line breaking
opportunity in the text, that opportunity is still considered to exist.
<li>A collapsible space immediately preceding an element with
&lsquo;<code class=css>consume-before</code>&rsquo; is removed. Such
removed spaces do not indicate a line breaking opportunity in the text.
<li>Any collapsible spaces after the end of an element with &lsquo;<code
class=css>consume-after</code>&rsquo; are removed. Such removed spaces
do not indicate a line breaking opportunity in the text.
</ol>
<li>
<p>If &lsquo;<a href="#text-space-collapse"><code
class=property>text-space-collapse</code></a>&rsquo; is set to
&lsquo;<code class=css>preserve</code>&rsquo;, any sequence of spaces
unbroken by an element boundary is treated as a sequence of non-breaking
spaces. However, a line breaking opportunity exists at the end of the
sequence.
<li>
<p>If &lsquo;<a href="#text-space-collapse"><code
class=property>text-space-collapse</code></a>&rsquo; is set to
&lsquo;<code class=css>discard</code>&rsquo;, the first white space
character in every white space sequence is converted to a zero width
non-joiner (U+200C) and the rest of the sequence is removed.</p>
</ul>
<p>Then, the entire block is rendered. Inlines are laid out, taking bidi
reordering into account, and wrapping as specified by the &lsquo;<a
href="#text-wrap0"><code class=property>text-wrap</code></a>&rsquo;
property.
<p>As each line is laid out,
<ol>
<li>A sequence of collapsible spaces at the beginning of a line is
removed.
<li>Each tab is rendered as a horizontal shift that lines up the start
edge of the next glyph with the next tab stop. Tab stops occur at points
that are multiples of the width of a space (U+0020) rendered in the
block's font from the block's starting content edge. How many spaces is
given by the &lsquo;<a href="#tab-size0"><code
class=property>tab-size</code></a>&rsquo; property.
<li>A sequence of collapsible spaces at the end of a line is removed.
<li>If spaces or tabs at the end of a line are non-collapsible but have
&lsquo;<a href="#text-wrap0"><code
class=property>text-wrap</code></a>&rsquo; set to &lsquo;<code
class=property>normal</code>&rsquo; or &lsquo;<code
class=property>avoid</code>&rsquo; the UA may visually collapse their
character advance widths.
</ol>
<p>White space that was not removed during the white space processing steps
is called <dfn id=preserved>preserved</dfn> white space.
<div class=example>
<h4 id=egbidiwscollapse><span class=secno>3.3.1. </span> Example of
bidirectionality with white space collapsing</h4>
<p>Consider the following markup fragment, taking special note of spaces
(with varied backgrounds and borders for emphasis and identification):</p>
<pre><code>&lt;ltr&gt;A<span class=egbidiwsaA>&#160;</span>&lt;rtl&gt;<span class=egbidiwsbB>&#160;</span>B<span class=egbidiwsaB>&#160;</span>&lt;/rtl&gt;<span class=egbidiwsbC>&#160;</span>C&lt;/ltr&gt;</code></pre>
<p>where the <code>&lt;ltr&gt;</code> element represents a left-to-right
embedding and the <code>&lt;rtl&gt;</code> element represents a
View remainder of file in raw view