Skip to content

[css-text] force-hang end-of-line pre-wrap spaces before soft wraps #3868

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

Closed
wants to merge 2 commits into from
Closed

[css-text] force-hang end-of-line pre-wrap spaces before soft wraps #3868

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe625c2
[css-text] force-hang end-of-line pre-wrap spaces before soft wraps
frivoal Apr 23, 2019
6736f55
[css-text-3] Provide more extensive examples
frivoal Jul 27, 2019
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
84 changes: 72 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,8 @@ 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 [=hang=] this sequence (unconditionally),
unless the sequence is followed by a [=forced line break=].
It may also visually collapse the character advance widths
of any that would otherwise overflow.

Expand Down Expand Up @@ -1708,29 +1709,88 @@ 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 not [=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
it does not hang,
and centering works as expected.
</div>

<div class=example>
This example illustrates the difference
between [=hanging=] white space
at the end of lines without forced breaks,
and not 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
do not hang.
Therefore, the space at the end of the last line in this example
does not [=hang=]
and 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 the line without forced break.
The last space,
if placed on the second line,
would overflow, and is not allowed to hang.
Therefore, it causes a soft wrap break earlier in the line,
before the last <code>0</code>.
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 <br>0 </div>
</div>

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