Skip to content

Commit 468e04f

Browse files
fantasaifantasai
committed
[css-text] Rearrange some white-space sections for better readability/referenceability
1 parent ff45977 commit 468e04f

2 files changed

Lines changed: 120 additions & 110 deletions

File tree

‎css-text/Overview.html‎

Lines changed: 66 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -222,11 +222,14 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
222222
<li><a href="#white-space-rules"><span class=secno>4.1. </span> The
223223
White Space Processing Rules</a>
224224
<ul class=toc>
225-
<li><a href="#egbidiwscollapse"><span class=secno>4.1.1. </span>
226-
Example of bidirectionality with white space collapsing</a>
225+
<li><a href="#white-space-phase-1"><span class=secno>4.1.1.
226+
</span>Phase I: Collapsing and Transformation</a>
227227

228228
<li><a href="#line-break-transform"><span class=secno>4.1.2. </span>
229229
Line Break Transformation Rules</a>
230+
231+
<li><a href="#white-space-phase-2"><span class=secno>4.1.3.
232+
</span>Phase II: Trimming and Positioning</a>
230233
</ul>
231234

232235
<li><a href="#tab-size"><span class=secno>4.2. </span> Tab Character
@@ -652,16 +655,6 @@ <h2 id=white-space><span class=secno>3. </span><a
652655
Wrapping: the ‘<a href="#white-space0"><code
653656
class=property>white-space</code></a>’ property</h2>
654657

655-
<p>This property specifies two things:
656-
657-
<ul>
658-
<li>whether and how <a href="#white-space-processing">white space</a>
659-
inside the element is collapsed
660-
661-
<li>whether lines may <a href="#wrapping"><i>wrap</i></a> at unforced <a
662-
href="#soft-wrap-opportunity"><i>soft wrap opportunities</i></a>
663-
</ul>
664-
665658
<table class=propdef>
666659
<tbody>
667660
<tr>
@@ -705,6 +698,16 @@ <h2 id=white-space><span class=secno>3. </span><a
705698
<td>see individual properties
706699
</table>
707700

701+
<p>This property specifies two things:
702+
703+
<ul>
704+
<li>whether and how <a href="#white-space-processing">white space</a>
705+
inside the element is collapsed
706+
707+
<li>whether lines may <a href="#wrapping"><i>wrap</i></a> at unforced <a
708+
href="#soft-wrap-opportunity"><i>soft wrap opportunities</i></a>
709+
</ul>
710+
708711
<p>Values have the following meanings, which must be interpreted according
709712
to the <a href="#white-space-rules">White Space Processing</a> and <a
710713
href="#line-breaking">Line Breaking</a> rules:
@@ -718,7 +721,7 @@ <h2 id=white-space><span class=secno>3. </span><a
718721
cases</a>, no character). Lines may wrap at allowed <a
719722
href="#soft-wrap-opportunity"><i>soft wrap opportunities</i></a>, as
720723
determined by the line-breaking rules in effect, in order to minimize
721-
overflow.
724+
inline-axis overflow.
722725

723726
<dt><dfn id=pre title="white-space:pre">‘<code
724727
class=css>pre</code>’</dfn>
@@ -857,12 +860,13 @@ <h2 id=white-space-processing><span class=secno>4. </span> White Space
857860
<p id=segment-normalization> CSS does not define document segmentation
858861
rules. Segments could be separated by a particular newline seqence (such
859862
as a line feed or CRLF pair), or delimited by some other mechanism, such
860-
as the SGML RECORD-START and RECORD-END tokens. For CSS processing, each
861-
document language–defined segment break, CRLF sequence (U+000D U+000A),
862-
carriage return (U+000D), and line feed (U+000A) in the text is treated as
863-
a <dfn id=segment-break>segment break</dfn>, which is then interpreted for
864-
rendering as specified by the ‘<a href="#white-space0"><code
865-
class=property>white-space</code></a>’ property.
863+
as the SGML <code>RECORD-START</code> and <code>RECORD-END</code> tokens.
864+
For CSS processing, each document language–defined segment break, CRLF
865+
sequence (U+000D U+000A), carriage return (U+000D), and line feed (U+000A)
866+
in the text is treated as a <dfn id=segment-break>segment break</dfn>,
867+
which is then interpreted for rendering as specified by the ‘<a
868+
href="#white-space0"><code class=property>white-space</code></a>’
869+
property.
866870

867871
<p class=note>Note that the document parser may have not only normalized
868872
any segment breaks, but also collapsed other space characters or otherwise
@@ -888,6 +892,9 @@ <h3 id=white-space-rules><span class=secno>4.1. </span> The White Space
888892
<p>White space processing affects only spaces (U+0020), tabs (U+0009), and
889893
<a href="#segment-normalization">segment breaks</a>.
890894

895+
<h4 id=white-space-phase-1><span class=secno>4.1.1. </span>Phase I:
896+
Collapsing and Transformation</h4>
897+
891898
<p>For each inline (including anonymous inlines) within an inline
892899
formatting context, white space characters are handled as follows,
893900
ignoring bidi formatting characters as if they were not there:
@@ -910,9 +917,9 @@ <h3 id=white-space-rules><span class=secno>4.1. </span> The White Space
910917

911918
<li>Every tab is converted to a space (U+0020).
912919

913-
<li>Any space immediately following another collapsible space —even
914-
one outside the boundary of the inline containing the space, provided
915-
they are within the same inline formatting context—is collapsed to
920+
<li>Any space immediately following another collapsible space—even one
921+
outside the boundary of the inline containing that space, provided they
922+
are both within the same inline formatting context—is collapsed to
916923
have zero advance width. (It is invisible, but retains its <a
917924
href="#soft-wrap-opportunity"><i>soft wrap opportunity</i></a>, if
918925
any.)
@@ -932,37 +939,11 @@ <h3 id=white-space-rules><span class=secno>4.1. </span> The White Space
932939
specified by the ‘<a href="#white-space0"><code
933940
class=property>white-space</code></a>’ property.
934941

935-
<p>As each line is laid out,
936-
937-
<ol>
938-
<li>A sequence of collapsible spaces at the beginning of a line is
939-
removed.
940-
941-
<li>Each tab is rendered as a horizontal shift that lines up the start
942-
edge of the next glyph with the next tab stop. <dfn id=tab-stops>Tab
943-
stops</dfn> occur at points that are multiples of the <a
944-
href="#tab-size0"><i>tab size</i></a> from the block's starting content
945-
edge. The <dfn id=tab-size0>tab size</dfn> is given by the ‘<a
946-
href="#tab-size1"><code class=property>tab-size</code></a>’ property.
947-
948-
<li>A sequence of <a href="#collapsible"><i>collapsible</i></a> spaces at
949-
the end of a line is removed.
950-
951-
<li>If spaces or tabs at the end of a line are non-collapsible but have
952-
‘<code class=property>text-wrap</code>’ set to ‘<code
953-
class=property>normal</code>’ the UA may visually collapse their
954-
character advance widths.
955-
</ol>
956-
957-
<p>White space that was not removed or collapsed during the white space
958-
processing steps is called <dfn id=preserved>preserved</dfn> white space.
959-
960-
<div class=example>
961-
<h4 id=egbidiwscollapse><span class=secno>4.1.1. </span> Example of
962-
bidirectionality with white space collapsing</h4>
963-
964-
<p>Consider the following markup fragment, taking special note of spaces
965-
(with varied backgrounds and borders for emphasis and identification):
942+
<div class=example id=egbidiwscollapse>
943+
<p>The following example illustrates the interaction of white-space
944+
collapsing and bidirectionality. Consider the following markup fragment,
945+
taking special note of spaces (with varied backgrounds and borders for
946+
emphasis and identification):
966947

967948
<pre><code>&lt;ltr&gt;A<span class=egbidiwsaA> </span>&lt;rtl&gt;<span
968949
class=egbidiwsbB> </span>B<span
@@ -971,10 +952,10 @@ <h4 id=egbidiwscollapse><span class=secno>4.1.1. </span> Example of
971952

972953
<p>where the <code>&lt;ltr&gt;</code> element represents a left-to-right
973954
embedding and the <code>&lt;rtl&gt;</code> element represents a
974-
right-to-left embedding. If the ‘<code
975-
class=property>text-space-collapse</code>’ property is set to ‘<code
976-
class=css>collapse</code>’, the above processing model would result in
977-
the following:
955+
right-to-left embedding. If the ‘<a href="#white-space0"><code
956+
class=property>white-space</code></a>’ property is set to ‘<code
957+
class=css>normal</code>’, the white-space processing model would result
958+
in the following:
978959

979960
<ul style="line-height:1.3">
980961
<li>The space before the B (<span class=egbidiwsbB> </span>) would
@@ -1036,6 +1017,34 @@ <h4 id=line-break-transform><span class=secno>4.1.2. </span> Line Break
10361017
similar scripts. Note that browser implementations do not currently follow
10371018
these rules (although IE does in some cases transform the break).
10381019

1020+
<h4 id=white-space-phase-2><span class=secno>4.1.3. </span>Phase II:
1021+
Trimming and Positioning</h4>
1022+
1023+
<p>As each line is laid out,
1024+
1025+
<ol>
1026+
<li>A sequence of collapsible spaces at the beginning of a line is
1027+
removed.
1028+
1029+
<li>Each tab is rendered as a horizontal shift that lines up the start
1030+
edge of the next glyph with the next tab stop. <dfn id=tab-stops>Tab
1031+
stops</dfn> occur at points that are multiples of the <a
1032+
href="#tab-size0"><i>tab size</i></a> from the block's starting content
1033+
edge. The <dfn id=tab-size0>tab size</dfn> is given by the ‘<a
1034+
href="#tab-size1"><code class=property>tab-size</code></a>’ property.
1035+
1036+
<li>A sequence of <a href="#collapsible"><i>collapsible</i></a> spaces at
1037+
the end of a line is removed.
1038+
1039+
<li>If spaces or tabs at the end of a line are non-collapsible but have
1040+
‘<a href="#white-space0"><code class=property>white-space</code></a>’
1041+
set to ‘<code class=property>pre-wrap</code>’ the UA may visually
1042+
collapse their character advance widths.
1043+
</ol>
1044+
1045+
<p>White space that was not removed or collapsed during the white space
1046+
processing steps is called <dfn id=preserved>preserved</dfn> white space.
1047+
10391048
<h3 id=tab-size><span class=secno>4.2. </span> Tab Character Size: the
10401049
‘<a href="#tab-size1"><code class=property>tab-size</code></a>’
10411050
property</h3>

‎css-text/Overview.src.html‎

Lines changed: 54 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -412,12 +412,6 @@ <h3 id="text-transform">
412412
<h2 id="white-space"><a id="white-space-collapsing"></a><a id='text-wrap'></a>
413413
White Space and Wrapping: the 'white-space' property</h2>
414414

415-
<p>This property specifies two things:
416-
<ul>
417-
<li>whether and how <a href="#white-space-processing">white space</a> inside the element is collapsed
418-
<li>whether lines may <i>wrap</i> at unforced <i>soft wrap opportunities</i>
419-
</ul>
420-
421415
<table class="propdef">
422416
<tr>
423417
<th>Name:</th>
@@ -453,6 +447,12 @@ <h2 id="white-space"><a id="white-space-collapsing"></a><a id='text-wrap'></a>
453447
</tr>
454448
</table>
455449

450+
<p>This property specifies two things:
451+
<ul>
452+
<li>whether and how <a href="#white-space-processing">white space</a> inside the element is collapsed
453+
<li>whether lines may <i>wrap</i> at unforced <i>soft wrap opportunities</i>
454+
</ul>
455+
456456
<p>Values have the following meanings, which must be interpreted
457457
according to
458458
the <a href="#white-space-rules">White Space Processing</a> and
@@ -465,7 +465,7 @@ <h2 id="white-space"><a id="white-space-collapsing"></a><a id='text-wrap'></a>
465465
cases</a>, no character).
466466
Lines may wrap at allowed <i>soft wrap opportunities</i>,
467467
as determined by the line-breaking rules in effect,
468-
in order to minimize overflow.
468+
in order to minimize inline-axis overflow.
469469
<dt><dfn title="white-space:pre">''pre''</dfn></dt>
470470
<dd>This value prevents user agents from collapsing sequences of white space.
471471
<i>Segment breaks</i> such as line feeds and carriage returns are preserved as <i>forced line breaks</i>.
@@ -563,7 +563,7 @@ <h2 id="white-space-processing">
563563
CSS does not define document segmentation rules. Segments could be
564564
separated by a particular newline seqence (such as a line feed or
565565
CRLF pair), or delimited by some other mechanism, such as the SGML
566-
RECORD-START and RECORD-END tokens.
566+
<code>RECORD-START</code> and <code>RECORD-END</code> tokens.
567567
For CSS processing, each document language&ndash;defined segment break,
568568
CRLF sequence (U+000D U+000A), carriage return (U+000D), and line feed (U+000A)
569569
in the text is treated as a <dfn>segment break</dfn>,
@@ -592,6 +592,8 @@ <h3 id="white-space-rules">
592592
<p>White space processing affects only spaces (U+0020), tabs (U+0009),
593593
and <a href="#segment-normalization">segment breaks</a>.
594594

595+
<h4 id="white-space-phase-1">Phase I: Collapsing and Transformation</h4>
596+
595597
<p>For each inline (including anonymous inlines) within an inline
596598
formatting context, white space characters are handled as follows,
597599
ignoring bidi formatting characters as if they were not there:</p>
@@ -609,9 +611,9 @@ <h3 id="white-space-rules">
609611
break transformation rules</a>.
610612
</li>
611613
<li>Every tab is converted to a space (U+0020).</li>
612-
<li>Any space immediately following another collapsible space
613-
&mdash;even one outside the boundary of the inline containing
614-
the space, provided they are within the same inline formatting
614+
<li>Any space immediately following another collapsible space&mdash;even
615+
one outside the boundary of the inline containing that space,
616+
provided they are both within the same inline formatting
615617
context&mdash;is collapsed to have zero advance width. (It is
616618
invisible, but retains its <i>soft wrap opportunity</i>, if any.)</li>
617619
</ol>
@@ -625,60 +627,39 @@ <h3 id="white-space-rules">
625627
reordering into account, and <i>wrapping</i> as specified by the
626628
'white-space' property.</p>
627629

628-
<p>As each line is laid out,</p>
629-
<ol>
630-
<li>A sequence of collapsible spaces at the beginning of a line is
631-
removed.
632-
<li>Each tab is rendered as a horizontal shift
633-
that lines up the start edge of the next glyph with the next tab stop.
634-
<dfn>Tab stops</dfn> occur at points that are multiples of the <i>tab size</i>
635-
from the block's starting content edge.
636-
The <dfn>tab size</dfn> is given by the 'tab-size' property.
637-
<li>A sequence of <i>collapsible</i> spaces at the end of a line is removed.
638-
<li>If spaces or tabs at the end of a line are non-collapsible but
639-
have 'text-wrap' set to 'normal' the UA may visually
640-
collapse their character advance widths.
641-
</ol>
642-
643-
<p>White space that was not removed or collapsed during the white space
644-
processing steps is called <dfn>preserved</dfn> white space.</p>
645-
646-
<div class="example">
647-
<h4 id="egbidiwscollapse">
648-
Example of bidirectionality with white space collapsing</h4>
649-
650-
<p>Consider the following markup fragment, taking special note of spaces
630+
<div class="example" id="egbidiwscollapse">
631+
<p>The following example illustrates
632+
the interaction of white-space collapsing and bidirectionality.
633+
Consider the following markup fragment, taking special note of spaces
651634
(with varied backgrounds and borders for emphasis and identification):
652-
</p>
635+
653636
<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>
654637

655-
<p>where the <code>&lt;ltr&gt;</code> element represents a left-to-right
656-
embedding and the <code>&lt;rtl&gt;</code> element represents a
657-
right-to-left embedding. If the 'text-space-collapse' property is set
658-
to ''collapse'', the above processing model would result in the
659-
following:</p>
638+
<p>where the <code>&lt;ltr&gt;</code> element represents a left-to-right embedding
639+
and the <code>&lt;rtl&gt;</code> element represents a right-to-left embedding.
640+
If the 'white-space' property is set to ''normal'',
641+
the white-space processing model would result in the following:
660642

661643
<ul style="line-height:1.3">
662644
<li>The space before the B (<span class="egbidiwsbB">&#160;</span>)
663-
would collapse with the space after the A (<span
664-
class="egbidiwsaA">&#160;</span>).</li>
645+
would collapse with the space after the A (<span class="egbidiwsaA">&#160;</span>).
665646
<li>The space before the C (<span class="egbidiwsbC">&#160;</span>)
666-
would collapse with the space after the B (<span
667-
class="egbidiwsaB">&#160;</span>).</li>
647+
would collapse with the space after the B (<span class="egbidiwsaB">&#160;</span>).
668648
</ul>
669649

670-
<p>This would leave two spaces, one after the A in the left-to-right
671-
embedding level, and one after the B in the right-to-left embedding
672-
level. This is then ordered according to the Unicode bidirectional
673-
algorithm, with the end result being:</p>
650+
<p>This would leave two spaces,
651+
one after the A in the left-to-right embedding level,
652+
and one after the B in the right-to-left embedding level.
653+
This is then ordered according to the Unicode bidirectional algorithm,
654+
with the end result being:
674655

675656
<pre>A<span class="egbidiwsaA">&#160;</span><span class="egbidiwsaB">&#160;</span>BC</pre>
676657

677-
<p>Note that there are two spaces between A and B, and none between B
678-
and C. This is best avoided by putting spaces outside the element
679-
instead of just inside the opening and closing tags and, where
680-
practical, by relying on implicit bidirectionality instead of explicit
681-
embedding levels.</p>
658+
<p>Note that there are two spaces between A and B,
659+
and none between B and C.
660+
This is best avoided by putting spaces outside the element
661+
instead of just inside the opening and closing tags and, where practical,
662+
by relying on implicit bidirectionality instead of explicit embedding levels.
682663
</div>
683664

684665
<h4 id="line-break-transform">
@@ -712,6 +693,26 @@ <h4 id="line-break-transform">
712693
Note that browser implementations do not currently follow these rules
713694
(although IE does in some cases transform the break).</p>
714695

696+
<h4 id="white-space-phase-2">Phase II: Trimming and Positioning</h4>
697+
698+
<p>As each line is laid out,</p>
699+
<ol>
700+
<li>A sequence of collapsible spaces at the beginning of a line is
701+
removed.
702+
<li>Each tab is rendered as a horizontal shift
703+
that lines up the start edge of the next glyph with the next tab stop.
704+
<dfn>Tab stops</dfn> occur at points that are multiples of the <i>tab size</i>
705+
from the block's starting content edge.
706+
The <dfn>tab size</dfn> is given by the 'tab-size' property.
707+
<li>A sequence of <i>collapsible</i> spaces at the end of a line is removed.
708+
<li>If spaces or tabs at the end of a line are non-collapsible but
709+
have 'white-space' set to 'pre-wrap' the UA may visually
710+
collapse their character advance widths.
711+
</ol>
712+
713+
<p>White space that was not removed or collapsed during the white space
714+
processing steps is called <dfn>preserved</dfn> white space.</p>
715+
715716
<h3 id="tab-size">
716717
Tab Character Size: the 'tab-size' property</h3>
717718

0 commit comments

Comments
 (0)