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

Jump to bottom

[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 all commits
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
58 changes: 53 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,52 @@ 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 [=ink overflow=] from text.</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>

Some glyphs have a painted area that extends beyond the
bounding box described by their origin and advance.
In these cases, the extra painted area generates [=ink overflow=],
and hence is not included in [=inline box=] geometry.
There is no straightforward way to measure the extent
of [=ink overflow=] generated by these glyphs,
or to pre-compute padding or margin lengths that will
prevent them from overlapping adjacent content.
The actual extent of [=ink overflow=] is determined by the font rendering system,
and is 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. For a known font,
a practical way to prevent glyph [=ink overflow=] from
overlapping adjacent content is to load the target
content in any conforming web browser, gauge the extent
of [=ink overflow=] via visual inspection,
and adjust padding/margin lengths to avoid overlap, plus
an extra two pixels to allow for variations between implementations.

Note that there are many factors that may cause the glyph rendering subsystem
to use a font other than the one specified in stylesheets when drawing text,
including but not limited to UA settings, accessibility features,
and the availability of web fonts.
The extent of [=ink overflow=] derives from the actual font used for rendering text,
and developers should allow for the possibility that
the actual rendered extent of [=ink overflow=] from text
does not match what they measured during development.

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

Expand Down