Skip to content

Commit

Permalink
[css-text] Clarifications on "hanging"
Browse files Browse the repository at this point in the history 
Separate the notion of hanging in general, from it's specific
application to hanging-punctuation, and provide reusable anchor
terminology that distinguishes unconditional hanging from “allowed” hanging.

Also, be explicit about the effects on intrinsic sizes.

Note: there are open issues and pending edits on how preserved
white-space at the end of a line is supposed to hang. This edit does not
solve these, and keeps the current behavior as it is. By making the
definitions of hanging reusable, it is a useful step towards solving
these as well.
  • Loading branch information
@frivoal
frivoal committed Jul 9, 2019
1 parent da9d878 commit 8d54566
Showing 1 changed file with 64 additions and 43 deletions.
107 changes: 64 additions & 43 deletions css-text-3/Overview.bs
View file
Expand Up @@ -802,7 +802,7 @@ Text Processing</h3>
word-break/word-break-break-all-017.html
</wpt>

Such preserved spaces take up space and do not hang,
Such preserved spaces take up space and do not [=hang=],
and thus affect the box's intrinsic sizes
([=min-content size=] and [=max-content size=]).

Expand Down Expand Up @@ -843,11 +843,9 @@ Text Processing</h3>
In general, <a>preserved white space</a> is measured when calculating
the intrinsic sizes ([=min-content size=] and [=max-content size=]) of text;
however <a>preserved white space</a>
that would be allowed to <a>hang</a> at the end of the line
that would <a>hang</a> when at the end of the line
(i.e. that preserved by ''pre-wrap'')
is excluded--
that is, considered to <a>hang</a>--
when calculating <a>min-content sizes</a> and any sizes derived thereof.
is excluded.

<p>The following informative table summarizes the behavior of various
'white-space' values:</p>
Expand Down Expand Up @@ -1535,8 +1533,7 @@ Text Processing</h3>
at the end of a line:
<ul>
<li>If 'white-space' is set to ''pre-wrap'',
the UA must <a>hang</a> this sequence
if it does not otherwise fit prior to justification.
the UA must <a lt="allow to hang">allow this sequence to hang</a>.
It may also visually collapse the character advance widths
of any that would otherwise overflow.

Expand Down Expand Up @@ -1572,10 +1569,10 @@ Text Processing</h3>
white-space/white-space-intrinsic-size-004.html
</wpt>

Note: Hanging the white space rather than collapsing it
Note: [=Hanging=] the white space rather than collapsing it
allows users to see the space when selecting or editing text.
<li>If 'white-space' is set to ''break-spaces'',
hanging or collapsing the advance width of spaces
[=hanging=] or collapsing the advance width of spaces
at the end of the line is not allowed;
those that overflow must <a>wrap</a> to the next line.

Expand Down Expand Up @@ -4186,8 +4183,61 @@ Cursive Scripts</h4>
For this reason, it is often wise to specify 'text-indent: 0' on
elements that are specified 'display: inline-block'.</p>

<h3 id="hanging-punctuation-property" caniuse="css-hanging-punctuation" oldids="hanging-punctuation">
Hanging Punctuation: the 'hanging-punctuation' property</h3>
<h3 id="hanging">
Hanging Glyphs</h3>

<p>When a glyph at the start or end edge of a line <dfn lt="hang">hangs</dfn>,
it is not considered
when measuring the line's contents for fit, alignment, or justification.
Depending on the line's alignment/justification, this can
result in the mark being placed outside the line box.
The [=hanging=] glyph is also not taken into account
when computing intrinsic sizes (min-content size and max-content size),
and any sizes derived thereof.
(The interaction of this measurement and kerning is currently UA-defined;
the CSSWG <a href="https://github.com/w3c/csswg-drafts/issues/2397">welcomes advice</a> on this point.)

<p>A <a lt=hang>hanging</a> glyph
is still enclosed inside its parent inline box,
is still counted as part of the <a>scrollable overflow region</a> [[!CSS-OVERFLOW-3]],
and still participates in text justification:
its character advance is just not measured when determining
how much content fits on the line,
how much the line's contents need to be expanded or compressed for justification,
or how to position the content within the line box for text alignment.
Effectively, the <a>hanging</a> glyph character advance
is re-interpreted as an additional negative margin
on the affected edge of its parent <a>inline box</a>;
the line is otherwise laid out as usual.

<wpt>
hanging-punctuation/hanging-scrollable-001.html
</wpt>

<p>Alternatively, a glyph at the end of a line
may be <dfn>allowed to hang</dfn>:
It [=hangs=] only if it does not otherwise fit in the line prior to justification.
It is not considered when measuring the line’s contents for fit,
nor does it impact alignment or justification
if it does not fit.
However, it is considered for alignment and justification
when it does fit the line prior to justification.
Glyphs that are [=allowed to hang=] are not taken into account
when computing [=min-content sizes=]
and any sizes derived thereof,
but they are taken into account for [=max-content sizes=]
and any sizes derived thereof.

<p>Non-zero inline-axis borders or padding between
a <a>hang</a>able glyph and the edge of the line prevent the glyph from hanging.
For example, a period at the end of an inline box with end padding
does not <a>hang</a> at the end edge of a line.

<p>Unless specified otherwise,
several adjacent glyphs may [=hang=] together.

<h4 id="hanging-punctuation-property" caniuse="css-hanging-punctuation" oldids="hanging-punctuation">
Hanging Punctuation: the 'hanging-punctuation' property</h4>

<pre class="propdef">
Name: hanging-punctuation
Expand All @@ -4213,18 +4263,11 @@ Cursive Scripts</h4>
<p class="note">Note: If there is not sufficient padding on the
block container, 'hanging-punctuation' can trigger overflow.</p>

<p>When a glyph <dfn lt="hang">hangs</dfn>, it is not considered
when measuring the line's contents for fit, alignment, or justification.
Depending on the line's alignment/justification, this can
result in the mark being placed outside the line box.
(The interaction of this measurement and kerning is currently UA-defined;
the CSSWG <a href="https://github.com/w3c/csswg-drafts/issues/2397">welcomes advice</a> on this point.)

<p>Values have the following meanings:</p>

<dl dfn-for=hanging-punctuation dfn-type=value>
<dt><dfn>none</dfn></dt>
<dd>No character <a>hangs</a>.</dd>
<dd>No punctuation character is made to <a>hang</a>.</dd>
<dt><dfn>first</dfn></dt>
<dd>An opening bracket or quote at the start of the
<a href="https://www.w3.org/TR/CSS2/selector.html#first-line-pseudo">first
Expand Down Expand Up @@ -4252,37 +4295,15 @@ Cursive Scripts</h4>
</wpt>
</dd>
<dt><dfn>allow-end</dfn></dt>
<dd>A <a>stop or comma</a> at the end of a line <a>hangs</a> if it
does not otherwise fit prior to justification.
<dd>A <a>stop or comma</a> at the end of a line is <a>allowed to hang</a>.

<wpt>
hanging-punctuation/hanging-punctuation-allow-end-001.xht
</wpt>
</dd>
</dl>

<p>Non-zero inline-axis borders or padding between
a <a>hang</a>able mark and the edge of the line prevent the mark from hanging.
For example, a period at the end of an inline box with end padding
does not <a>hang</a> at the end edge of a line.
At most one punctuation character may <a>hang</a> at each edge of the line.

<p>A <a lt=hang>hanging</a> mark
is still enclosed inside its parent inline box,
is still counted as part of the <a>scrollable overflow region</a> [[!CSS-OVERFLOW-3]],
and still participates in text justification:
its character advance is just not measured when determining
how much content fits on the line,
how much the line's contents need to be expanded or compressed for justification,
or how to position the content within the line box for text alignment.
Effectively, the <a>hanging</a> glyph character advance
is re-interpreted as an additional negative margin
on the affected edge of its parent <a>inline box</a>;
the line is otherwise laid out as usual.

<wpt>
hanging-punctuation/hanging-scrollable-001.html
</wpt>
<p>At most one punctuation character may <a>hang</a> at each edge of the line.

<p><dfn lt="stop or comma">Stops and commas</dfn> allowed to <a>hang</a> include:
<table class="data">
Expand Down

0 comments on commit 8d54566

Please sign in to comment.