Skip to content

Commit

Permalink
Use CSS-defined primitives for TextMetrics
Browse files Browse the repository at this point in the history 
And other font-related canvas settings.

Closes #4073.

Co-authored-by: Anne van Kesteren <[email protected]>
  • Loading branch information
@yiyix @annevk
yiyix and annevk authored Jun 29, 2020
1 parent 3bc350e commit 93e4504
Showing 1 changed file with 32 additions and 18 deletions.
50 changes: 32 additions & 18 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3427,9 +3427,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">'flex-wrap'</dfn> property</li>
</ul>

<p>The following features are defined in <cite>CSS Fonts</cite>: <ref spec=CSSFONTS></p>
<p>The following terms and features are defined in <cite>CSS Fonts</cite>: <ref spec=CSSFONTS></p>

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-fonts/#first-available-font">first available font</dfn></li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-fonts/#font-family-prop">'font-family'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-fonts/#font-weight-prop">'font-weight'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-fonts/#font-size-prop">'font-size'</dfn> property</li>
Expand All @@ -3449,6 +3450,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-grid/#propdef-grid-template-rows">'grid-template-rows'</dfn> property</li>
</ul>

<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/#ascent-metric">ascent metric</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-inline/#descent-metric">descent metric</dfn></li>
</ul>

<p>The following terms and features are defined in <cite>CSS Intrinsic &amp; Extrinsic
Sizing</cite>: <ref spec=CSSSIZING></p>

Expand Down Expand Up @@ -3663,6 +3671,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
</ul>
</dd>



<dt>Intersection Observer</dt>

<dd>
Expand Down Expand Up @@ -60800,42 +60810,43 @@ worker.postMesage(offscreenCanvas, [offscreenCanvas]);</code></pre>
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 first available font of the <span>inline box</span>.</dd>
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
first available font of the <span>inline box</span>.</dd>
<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 first available font of the <span>inline box</span>.</dd>
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 first available font of the <span>inline box</span>.</dd>
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 first available font of the <span>inline box</span>.</dd>
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 first available font of the <span>inline box</span>.</dd>
the <span>first available font</span> of the <span>inline box</span>.</dd>
</dl>
</li>

Expand Down Expand Up @@ -62546,8 +62557,8 @@ try {

<dd>
<p>The distance from the horizontal line indicated by the <code
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the top of the highest
bounding rectangle of all the fonts used to render the text, in <span data-x="'px'">CSS
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the <span>ascent
metric</span> of the <span>first available font</span>, in <span data-x="'px'">CSS
pixels</span>; positive numbers indicating a distance going up from the given baseline.</p>

<p class="note">This value and the next are useful when rendering a background that have to have
Expand All @@ -62560,10 +62571,9 @@ try {
<dt><dfn><code data-x="dom-textmetrics-fontBoundingBoxDescent">fontBoundingBoxDescent</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 bottom of the lowest
bounding rectangle of all the fonts used to render the text, in <span data-x="'px'">CSS
pixels</span>; positive numbers indicating a distance going down from the given
baseline.</p></dd>
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the <span>descent
metric</span> of the <span>first available font</span>, in <span data-x="'px'">CSS pixels</span>;
positive numbers indicating a distance going down from the given baseline.</p></dd>

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

Expand Down Expand Up @@ -62595,7 +62605,7 @@ try {

<dd><p>The distance from the horizontal line indicated by the <code
data-x="dom-context-2d-textBaseline">textBaseline</code> attribute to the highest top of the em
squares in the <span>line box</span>, in <span data-x="'px'">CSS pixels</span>; positive numbers
squares in the <span>inline box</span>, in <span data-x="'px'">CSS pixels</span>; positive numbers
indicating that the given baseline is below the top of that em square (so this value will usually
be positive). Zero if the given baseline is the top of that em square; half the font size if the
given baseline is the middle of that em square.</p></dd>
Expand All @@ -62604,31 +62614,31 @@ try {

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

<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>line box</span>, in <span data-x="'px'">CSS pixels</span>; positive numbers indicating that
<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>

<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>line box</span>, in <span data-x="'px'">CSS pixels</span>; positive numbers indicating
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>

<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>line box</span>, in <span data-x="'px'">CSS pixels</span>; positive numbers indicating
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>
</dl>
Expand Down Expand Up @@ -121450,6 +121460,9 @@ INSERT INTERFACES HERE
<dt id="refsCSSIMAGES4">[CSSIMAGES4]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-images-4/">CSS Images Module Level 4</a></cite>, E. Etemad, T. Atkins, L. Verou. W3C.</dd>

<dt id="refsCSSINLINE">[CSSINLINE]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-inline/">CSS Inline Layout</a></cite>, D. Cramer, E. Etemad. W3C.</dd>

<dt id="refsCSSLISTS">[CSSLISTS]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-lists/">CSS Lists and Counters</a></cite>, T. Atkins. W3C.</dd>

Expand Down Expand Up @@ -122919,6 +122932,7 @@ INSERT INTERFACES HERE
Yay295,
Ye-Kui Wang,
Yehuda Katz,
Yi Xu,
Yi-An Huang,
Yngve Nysaeter Pettersen,
Yoav Weiss,
Expand Down

0 comments on commit 93e4504

Please sign in to comment.