Skip to content

[css-text-3] Define the hanging behavior of end-of-line pre-wrap spaces #4095

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 17, 2019
Merged

[css-text-3] Define the hanging behavior of end-of-line pre-wrap spaces #4095

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 76 additions & 12 deletions css-text-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1631,7 +1631,9 @@ Text Processing</h3>
at the end of a line:
<ul>
<li>If 'white-space' is set to ''pre-wrap'',
the UA must [=conditionally hang=] this sequence.
the UA must (unconditionally) [=hang=] this sequence,
unless the sequence is followed by a [=forced line break=],
in which case it must [=conditionally hang=] the sequence is instead.
It may also visually collapse the character advance widths
of any that would otherwise overflow.

Expand Down Expand Up @@ -1708,29 +1710,91 @@ Text Processing</h3>
</ol>

<div class=example>
This example illustrates the consequence of [=hanging=] white space
at the end of the line
on text alignment.
This example shows that [=conditionally hanging=] white space
at the end of lines with forced breaks
provides symmetry with the start of the line.
An underline is added to help visualize the spaces.
<pre><code class=lang-css>
p {
white-space: pre-wrap;
text-align: end;
width: 20ch;
width: 5ch;
border: solid 1px;
font-family: monospace;
text-align: center;
}</code></pre>
<pre><code class=lang-markup>
&lt;p>Lorem ipsum &lt;/p>
&lt;p> 0 &lt;/p>
</code></pre>

As the [=preserved=] [=spaces=] at the end of the line must [=hang=],
The sample above would be rendered as follows:
<div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 5ch; border: solid 1px; white-space: pre;"> <span style="text-decoration: underline; text-decoration: underline orange"> 0 </span> </div>

Since the final [=space=] is before a forced line break
and does not overflow,
it does not hang,
and centering works as expected.
</div>

<div class=example>
This example illustrates the difference
between [=hanging=] [=spaces=]
at the end of lines without forced breaks,
and [=conditionally hanging=] them at the end of lines with forced breaks.
An underline is added to help visualize the [=spaces=].
<pre><code class=lang-css>
p {
white-space: pre-wrap;
width: 3ch;
border: solid 1px;
font-family: monospace;
}</code></pre>
<pre><code class=lang-markup>
&lt;p> 0 0 0 0 &lt;/p>
</code></pre>

The sample above would be rendered as follows:
<div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre; text-decoration: underline; text-decoration: underline orange"> 0 <br>0 0 <br>0 </div>

If <code class=lang-css>p { text-align: right; }</code> was added,
the result would be as follows:
<div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre;"> <span style="text-decoration: underline; text-decoration: underline orange"> 0 </span><br><span style="text-decoration: underline; text-decoration: underline orange">0 0 </span><br> <span style="text-decoration: underline; text-decoration: underline orange">0 </span></div>

As the [=preserved=] [=spaces=] at the end of lines without a forced break must [=hang=],
they are not considered when placing the rest of the line during text alignment.
When aligning towards the end,
this means any such [=spaces=] will overflow,
and will not prevent the rest of the line's content from being flush with the edge of the line.
The sample above would therefore be rendered as follows:
<pre class=output style="width: 20ch; border: solid 1px; text-align: end;">
Lorem ipsum
</pre>
On the other hand,
preserved spaces at the end of a line <em>with</em> a forced break
[=conditionally hang=].
Since the space at the end of the last line would not overflow in this example,
it does not [=hang=]
and therefore is considered during text alignment.
</div>

<div class=example>
In the following example,
there is not enough room on any line to fit the end-of-line spaces,
so they [=hang=] on all lines:
the one on the line without a forced break because it must,
as well as the one on the line with a forced break,
because it [=conditionally hangs=] and overflows.
An underline is added to help visualize the spaces.
<pre><code class=lang-css>
p {
white-space: pre-wrap;
width: 3ch;
border: solid 1px;
font-family: monospace;
}</code></pre>
<pre><code class=lang-markup>
&lt;p>0 0 0 0 &lt;/p>
</code></pre>
<div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre; text-decoration: underline; text-decoration: underline orange">0 0 <br>0 0 </div>

The last line is not wrapped before the last <code>0</code>
because characters that [=conditionally hang=] are not considered
when measuring the line’s contents for fit.
</div>

<h3 id="tab-size-property" caniuse="css3-tabsize" oldids="tab-size">
Expand Down