Skip to content

Commit

Permalink
Reference more baseline concepts in CSS Inline Layout
Browse files Browse the repository at this point in the history 
In particular hanging, alphabetic, and ideographic-under. (This also clarifies that ideographic meant ideographic-under.)

See w3c/csswg-drafts#5266 for context.
  • Loading branch information
@annevk @mfreed7
annevk authored and mfreed7 committed Sep 11, 2020
1 parent 535a5f8 commit d82e116
Showing 1 changed file with 28 additions and 35 deletions.
63 changes: 28 additions & 35 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3461,8 +3461,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<p>The following terms are defined in <cite>CSS Inline Layout</cite>: <ref spec=CSSINLINE></p>

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-inline/#alphabetic-baseline">alphabetic baseline</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-inline/#ascent-metric">ascent metric</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-inline/#descent-metric">descent metric</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-inline/#hanging-baseline">hanging baseline</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-inline/#ideographic-under-baseline">ideographic-under baseline</dfn></li>
</ul>

<p>The following terms and features are defined in <cite>CSS Intrinsic &amp; Extrinsic
Expand Down Expand Up @@ -60917,7 +60920,7 @@ worker.postMesage(offscreenCanvas, [offscreenCanvas]);</code></pre>
attribute's allowed keywords correspond to alignment points in the
font:</p>

<p><img src="/images/baselines.png" width="738" height="300" alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like &#x0906; are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like &#x00C1;, &#x00FF;, &#x0066;, and &#x03A9; are anchored, the ideographic baseline is where glyphs like &#x79C1; and &#x9054; are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square."></p>
<p><img src="/images/baselines.png" width="738" height="300" alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like &#x0906; are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like &#x00C1;, &#x00FF;, &#x0066;, and &#x03A9; are anchored, the ideographic-under baseline is where glyphs like &#x79C1; and &#x9054; are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square."></p>

<p>The keywords map to these alignment points as follows:</p>

Expand All @@ -60926,16 +60929,16 @@ worker.postMesage(offscreenCanvas, [offscreenCanvas]);</code></pre>
<dd>The top of the em square</dd>

<dt><dfn><code data-x="dom-context-2d-textBaseline-hanging">hanging</code></dfn>
<dd>The hanging baseline</dd>
<dd>The <span>hanging baseline</span></dd>

<dt><dfn><code data-x="dom-context-2d-textBaseline-middle">middle</code></dfn>
<dd>The middle of the em square</dd>

<dt><dfn><code data-x="dom-context-2d-textBaseline-alphabetic">alphabetic</code></dfn>
<dd>The alphabetic baseline</dd>
<dd>The <span>alphabetic baseline</span></dd>

<dt><dfn><code data-x="dom-context-2d-textBaseline-ideographic">ideographic</code></dfn>
<dd>The ideographic baseline</dd>
<dd>The <span>ideographic-under baseline</span></dd>

<dt><dfn><code data-x="dom-context-2d-textBaseline-bottom">bottom</code></dfn>
<dd>The bottom of the em square</dd>
Expand Down Expand Up @@ -61092,43 +61095,32 @@ worker.postMesage(offscreenCanvas, [offscreenCanvas]);</code></pre>
<dl>
<dt>If <code data-x="dom-context-2d-textBaseline">textBaseline</code> is <code
data-x="dom-context-2d-textBaseline-top">top</code></dt>

<dd>Let the <var>anchor point</var>'s vertical position be the top of the em box of
the <span>first available font</span> of the <span>inline box</span>.</dd>


<dt>If <code data-x="dom-context-2d-textBaseline">textBaseline</code> is <code
data-x="dom-context-2d-textBaseline-hanging">hanging</code></dt>

<dd>Let the <var>anchor point</var>'s vertical position be the hanging baseline of the
<span>first available font</span> of the <span>inline box</span>.</dd>

<dd>Let the <var>anchor point</var>'s vertical position be the <span>hanging baseline</span> of
the <span>first available font</span> of the <span>inline box</span>.</dd>

<dt>If <code data-x="dom-context-2d-textBaseline">textBaseline</code> is <code
data-x="dom-context-2d-textBaseline-middle">middle</code></dt>

<dd>Let the <var>anchor point</var>'s vertical position be half way between the bottom
and the top of the em box of the <span>first available font</span> of the <span>inline
box</span>.</dd>


<dt>If <code data-x="dom-context-2d-textBaseline">textBaseline</code> is <code
data-x="dom-context-2d-textBaseline-alphabetic">alphabetic</code></dt>

<dd>Let the <var>anchor point</var>'s vertical position be the alphabetic baseline of
the <span>first available font</span> of the <span>inline box</span>.</dd>

<dd>Let the <var>anchor point</var>'s vertical position be the <span>alphabetic baseline</span>
of the <span>first available font</span> of the <span>inline box</span>.</dd>

<dt>If <code data-x="dom-context-2d-textBaseline">textBaseline</code> is <code
data-x="dom-context-2d-textBaseline-ideographic">ideographic</code></dt>

<dd>Let the <var>anchor point</var>'s vertical position be the ideographic baseline of
the <span>first available font</span> of the <span>inline box</span>.</dd>

<dd>Let the <var>anchor point</var>'s vertical position be the <span>ideographic-under
baseline</span> of the <span>first available font</span> of the <span>inline box</span>.</dd>

<dt>If <code data-x="dom-context-2d-textBaseline">textBaseline</code> is <code
data-x="dom-context-2d-textBaseline-bottom">bottom</code></dt>

<dd>Let the <var>anchor point</var>'s vertical position be the bottom of the em box of
the <span>first available font</span> of the <span>inline box</span>.</dd>
</dl>
Expand Down Expand Up @@ -62870,8 +62862,8 @@ try {
<p class="note">This number can vary greatly based on the input text, even if the first font
specified covers all the characters in the input. For example, the <code
data-x="dom-textmetrics-actualBoundingBoxAscent">actualBoundingBoxAscent</code> of a lowercase
"o" from an alphabetic baseline would be less than that of an uppercase "F". The value can
easily be negative; for example, the distance from the top of the em box (<code
"o" from an <span>alphabetic baseline</span> would be less than that of an uppercase "F". The
value can easily be negative; for example, the distance from the top of the em box (<code
data-x="dom-context-2d-textBaseline">textBaseline</code> value "<code
data-x="dom-context-2d-textBaseline-top">top</code>") to the top of the bounding rectangle when
the given text is just a single comma "<code data-x="">,</code>" would likely (unless the font is
Expand Down Expand Up @@ -62905,26 +62897,27 @@ try {
<dt><dfn><code data-x="dom-textmetrics-hangingBaseline">hangingBaseline</code></dfn> attribute</dt>

<dd><p>The distance from the horizontal line indicated by the <code
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the hanging baseline of the
<span>inline box</span>, in <span data-x="'px'">CSS pixels</span>; positive numbers indicating that
the given baseline is below the hanging baseline. (Zero if the given baseline is the hanging
baseline.)</p></dd>
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the <span>hanging
baseline</span> of the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>;
positive numbers indicating that the given baseline is below the <span>hanging baseline</span>.
(Zero if the given baseline is the <span>hanging baseline</span>.)</p></dd>

<dt><dfn><code data-x="dom-textmetrics-alphabeticBaseline">alphabeticBaseline</code></dfn> attribute</dt>

<dd><p>The distance from the horizontal line indicated by the <code
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the alphabetic baseline of
the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>; positive numbers indicating
that the given baseline is below the alphabetic baseline. (Zero if the given baseline is the
alphabetic baseline.)</p></dd>
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the <span>alphabetic
baseline</span> of the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>;
positive numbers indicating that the given baseline is below the <span>alphabetic
baseline</span>. (Zero if the given baseline is the <span>alphabetic baseline</span>.)</p></dd>

<dt><dfn><code data-x="dom-textmetrics-ideographicBaseline">ideographicBaseline</code></dfn> attribute</dt>

<dd><p>The distance from the horizontal line indicated by the <code
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the ideographic baseline of
the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>; positive numbers indicating
that the given baseline is below the ideographic baseline. (Zero if the given baseline is the
ideographic baseline.)</p></dd>
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the <span>ideographic-under
baseline</span> of the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>;
positive numbers indicating that the given baseline is below the <span>ideographic-under
baseline</span>. (Zero if the given baseline is the <span>ideographic-under
baseline</span>.)</p></dd>
</dl>

<p class="note">Glyphs rendered using <code data-x="dom-context-2d-fillText">fillText()</code> and
Expand Down

0 comments on commit d82e116

Please sign in to comment.