Skip to content
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

[css-text-3] #10066 Describe ink overflow from hanging glyphs #9842

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[css-text-3] #10066 Describe ink overflow from hanging glyphs #9842

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
706fb9e
[css-text-3] #8649 Describe the extent of ink overflow from hanging g…
szager-chromium Jan 23, 2024
88b3b8e
Add font selection caveat, don't reference hanging glyphs
szager-chromium May 7, 2024
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
52 changes: 47 additions & 5 deletions css-text-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ WPT Path Prefix: /css/css-text/
<pre class=link-defaults>
spec:css2; type:dfn; text:document language
spec:css-ruby-1; type:dfn; text:ruby
spec:css-overflow-3; type:dfn; text:ink overflow
</pre>

<style type="text/css">
Expand Down Expand Up @@ -6948,7 +6949,7 @@ Hanging Glyphs</h3>
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
The <dfn>hanging glyph</dfn> 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;
Expand All @@ -6961,14 +6962,13 @@ Hanging Glyphs</h3>
overflow-wrap/overflow-wrap-min-content-size-009.html
</wpt>

A <dfn><a lt=hang>hanging</a> glyph</dfn>
is still enclosed inside its parent inline box
A [=hanging glyph=] is still enclosed inside its parent inline box
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 [=hanging=] glyph character advance
Effectively, the [=hanging glyph=] character advance
is re-interpreted as an additional negative margin
on the affected edge of its parent [=inline box=];
the line is otherwise laid out as usual.
Expand All @@ -6979,6 +6979,8 @@ Hanging Glyphs</h3>
when the content is editable
or in other circumstances where treating it as [=scrollable overflow=]
would be useful to the user.
[[#text-ink-overflow]] contains additional information about
[=ink overflow=] from text rendering.
[[!CSS-OVERFLOW-3]]

<wpt>
Expand Down Expand Up @@ -7047,7 +7049,7 @@ Hanging Punctuation: the 'hanging-punctuation' property</h4>
* it is not considered when measuring the line’s contents for […] justification
* Non-zero inline-axis borders or padding between a hangable mark and the edge of the line prevent the mark from hanging
* At most one punctuation character may hang at each edge of the line.
* should be treated as ink overflow"></wpt>
* should be treated as [=ink overflow=]"></wpt>

<pre class="propdef">
Name: hanging-punctuation
Expand Down Expand Up @@ -8253,6 +8255,46 @@ Small Kana Mappings</h2>
text-transform/text-transform-full-size-kana-008.html
</wpt>

<h2 id="text-ink-overflow" class="no-num">
Appendix H:
Ink Overflow from Text</h2>

<p><em>This appendix is non-normative.</em></p>

<div class="example">
<p>The example below demonstrates a [=hanging glyph=].</p>
<div class="figure" style="margin:0; font-size:10rem; font-family:garamond; font-style:italic">
<span style="display:inline-block; width:1ch; height:1lh; background:green; opacity:0.5"></span><span style="vertical-align: top;">f</span><span style="display:inline-block; width:1ch; height:1lh; background:green; opacity:0.5"></span>
</div>
</div>

Because [=hanging glyphs=] are considered [=ink overflow=],
and hence are not included in [=inline box=] geometry,
there is no straightforward way to measure their extent,
or to pre-compute padding or margin lengths that will
prevent [=hanging glyphs=] from overlapping adjacent content.
The extent of [=ink overflow=] from [=hanging glyphs=]
is determined by the font rendering system,
and beyond the scope of this specification.

However, any two conforming browser implementations,
when rendering a given piece of text content
using a given font in a supported format
(see [[css-fonts-4#font-format-definitions]]),
will produce identically-sized [=ink overflow rectangles=],
within a 2-pixel margin of error.

A practical way to prevent [=hanging glyphs=] from
overlapping adjacent content is to load the target
content in any conforming web browser, gauge the extent
of [=ink overflow=] from [=hanging glyphs=] via visual inspection,
and adjust padding/margin lengths to avoid overlap, plus
an extra two pixels to allow for variations between implementations.
This should be sufficient to prevent unwanted overlap in all
conforming implementations without the necessity of testing
each implementation individually.


<h2 id="priv" class="no-num">
Privacy Considerations</h2>

Expand Down