Skip to content

Commit 12a8e8c

Browse files
committed
[css-text] Clarifications on "hanging"
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 conditional hanging. Also, be explicit about the effects on intrinsic sizes. Closes w3c#3784 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.
1 parent da9d878 commit 12a8e8c

File tree

1 file changed

+63
-43
lines changed

1 file changed

+63
-43
lines changed

css-text-3/Overview.bs

Lines changed: 63 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -802,7 +802,7 @@ Text Processing</h3>
802802
word-break/word-break-break-all-017.html
803803
</wpt>
804804

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

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

852850
<p>The following informative table summarizes the behavior of various
853851
'white-space' values:</p>
@@ -1535,8 +1533,7 @@ Text Processing</h3>
15351533
at the end of a line:
15361534
<ul>
15371535
<li>If 'white-space' is set to ''pre-wrap'',
1538-
the UA must <a>hang</a> this sequence
1539-
if it does not otherwise fit prior to justification.
1536+
the UA must [=conditionally hang=] this sequence.
15401537
It may also visually collapse the character advance widths
15411538
of any that would otherwise overflow.
15421539

@@ -1572,10 +1569,10 @@ Text Processing</h3>
15721569
white-space/white-space-intrinsic-size-004.html
15731570
</wpt>
15741571

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

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

4189-
<h3 id="hanging-punctuation-property" caniuse="css-hanging-punctuation" oldids="hanging-punctuation">
4190-
Hanging Punctuation: the 'hanging-punctuation' property</h3>
4186+
<h3 id="hanging">
4187+
Hanging Glyphs</h3>
4188+
4189+
<p>When a glyph at the start or end edge of a line <dfn lt="hang">hangs</dfn>,
4190+
it is not considered
4191+
when measuring the line's contents for fit, alignment, or justification.
4192+
Depending on the line's alignment/justification, this can
4193+
result in the mark being placed outside the line box.
4194+
The [=hanging=] glyph is also not taken into account
4195+
when computing intrinsic sizes (min-content size and max-content size),
4196+
and any sizes derived thereof.
4197+
(The interaction of this measurement and kerning is currently UA-defined;
4198+
the CSSWG <a href="https://github.com/w3c/csswg-drafts/issues/2397">welcomes advice</a> on this point.)
4199+
4200+
<p>A <a lt=hang>hanging</a> glyph
4201+
is still enclosed inside its parent inline box,
4202+
is still counted as part of the <a>scrollable overflow region</a> [[!CSS-OVERFLOW-3]],
4203+
and still participates in text justification:
4204+
its character advance is just not measured when determining
4205+
how much content fits on the line,
4206+
how much the line's contents need to be expanded or compressed for justification,
4207+
or how to position the content within the line box for text alignment.
4208+
Effectively, the <a>hanging</a> glyph character advance
4209+
is re-interpreted as an additional negative margin
4210+
on the affected edge of its parent <a>inline box</a>;
4211+
the line is otherwise laid out as usual.
4212+
4213+
<wpt>
4214+
hanging-punctuation/hanging-scrollable-001.html
4215+
</wpt>
4216+
4217+
<p>In some cases, a glyph at the end of a line
4218+
can <dfn>conditionally hang</dfn>:
4219+
it [=hangs=] only if it does not otherwise fit in the line prior to justification.
4220+
It is not considered when measuring the line’s contents for fit.
4221+
However, any part of it that does not fit
4222+
is considered to [=hang=].
4223+
Glyphs that [=conditionally hang=] are not taken into account
4224+
when computing [=min-content sizes=]
4225+
and any sizes derived thereof,
4226+
but they are taken into account for [=max-content sizes=]
4227+
and any sizes derived thereof.
4228+
4229+
<p>Non-zero inline-axis borders or padding between
4230+
a <a>hang</a>able glyph and the edge of the line prevent the glyph from hanging.
4231+
For example, a period at the end of an inline box with end padding
4232+
does not <a>hang</a> at the end edge of a line.
4233+
4234+
<p>Multiple adjacent glyphs can hang together,
4235+
however there may be limits on how many are allowed to hang
4236+
(e.g. at most one punctuation character may <a>hang</a> at each edge of the line).
4237+
4238+
<h4 id="hanging-punctuation-property" caniuse="css-hanging-punctuation" oldids="hanging-punctuation">
4239+
Hanging Punctuation: the 'hanging-punctuation' property</h4>
41914240

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

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

42254267
<dl dfn-for=hanging-punctuation dfn-type=value>
42264268
<dt><dfn>none</dfn></dt>
4227-
<dd>No character <a>hangs</a>.</dd>
4269+
<dd>No punctuation character is made to <a>hang</a>.</dd>
42284270
<dt><dfn>first</dfn></dt>
42294271
<dd>An opening bracket or quote at the start of the
42304272
<a href="https://www.w3.org/TR/CSS2/selector.html#first-line-pseudo">first
@@ -4252,37 +4294,15 @@ Cursive Scripts</h4>
42524294
</wpt>
42534295
</dd>
42544296
<dt><dfn>allow-end</dfn></dt>
4255-
<dd>A <a>stop or comma</a> at the end of a line <a>hangs</a> if it
4256-
does not otherwise fit prior to justification.
4297+
<dd>A <a>stop or comma</a> at the end of a line <a>conditionally hangs</a>.
42574298

42584299
<wpt>
42594300
hanging-punctuation/hanging-punctuation-allow-end-001.xht
42604301
</wpt>
42614302
</dd>
42624303
</dl>
42634304

4264-
<p>Non-zero inline-axis borders or padding between
4265-
a <a>hang</a>able mark and the edge of the line prevent the mark from hanging.
4266-
For example, a period at the end of an inline box with end padding
4267-
does not <a>hang</a> at the end edge of a line.
4268-
At most one punctuation character may <a>hang</a> at each edge of the line.
4269-
4270-
<p>A <a lt=hang>hanging</a> mark
4271-
is still enclosed inside its parent inline box,
4272-
is still counted as part of the <a>scrollable overflow region</a> [[!CSS-OVERFLOW-3]],
4273-
and still participates in text justification:
4274-
its character advance is just not measured when determining
4275-
how much content fits on the line,
4276-
how much the line's contents need to be expanded or compressed for justification,
4277-
or how to position the content within the line box for text alignment.
4278-
Effectively, the <a>hanging</a> glyph character advance
4279-
is re-interpreted as an additional negative margin
4280-
on the affected edge of its parent <a>inline box</a>;
4281-
the line is otherwise laid out as usual.
4282-
4283-
<wpt>
4284-
hanging-punctuation/hanging-scrollable-001.html
4285-
</wpt>
4305+
<p>At most one punctuation character may <a>hang</a> at each edge of the line.
42864306

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

0 commit comments

Comments
 (0)