[html5] r7033 - [giow] (0) More font metrics. Affected topics: Canvas

whatwg at whatwg.org whatwg at whatwg.org
Tue Mar 27 16:10:05 PDT 2012


Author: ianh
Date: 2012-03-27 16:10:04 -0700 (Tue, 27 Mar 2012)
New Revision: 7033

Modified:
   complete.html
   index
   source
Log:
[giow] (0) More font metrics.
Affected topics: Canvas

Modified: complete.html
===================================================================
--- complete.html	2012-03-27 22:24:26 UTC (rev 7032)
+++ complete.html	2012-03-27 23:10:04 UTC (rev 7033)
@@ -35022,7 +35022,20 @@
 };
 
 interface <dfn id=textmetrics>TextMetrics</dfn> {
-  readonly attribute double <a href=#dom-textmetrics-width title=dom-textmetrics-width>width</a>;
+  // x-direction
+  readonly attribute double <a href=#dom-textmetrics-width title=dom-textmetrics-width>width</a>; // advance width
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxwidth title=dom-textmetrics-actualBoundingBoxWidth>actualBoundingBoxWidth</a>;
+
+  // y-direction
+  readonly attribute double <a href=#dom-textmetrics-fontboundingboxascent title=dom-textmetrics-fontBoundingBoxAscent>fontBoundingBoxAscent</a>;
+  readonly attribute double <a href=#dom-textmetrics-fontboundingboxdescent title=dom-textmetrics-fontBoundingBoxDescent>fontBoundingBoxDescent</a>;
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxascent title=dom-textmetrics-actualBoundingBoxAscent>actualBoundingBoxAscent</a>;
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxdescent title=dom-textmetrics-actualBoundingBoxDescent>actualBoundingBoxDescent</a>;
+  readonly attribute double <a href=#dom-textmetrics-emheightascent title=dom-textmetrics-emHeightAscent>emHeightAscent</a>;
+  readonly attribute double <a href=#dom-textmetrics-emheightdescent title=dom-textmetrics-emHeightDescent>emHeightDescent</a>;
+  readonly attribute double <a href=#dom-textmetrics-hangingbaseline title=dom-textmetrics-hangingBaseline>hangingBaseline</a>;
+  readonly attribute double <a href=#dom-textmetrics-alphabeticbaseline title=dom-textmetrics-alphabeticBaseline>alphabeticBaseline</a>;
+  readonly attribute double <a href=#dom-textmetrics-ideographicbaseline title=dom-textmetrics-ideographicBaseline>ideographicBaseline</a>;
 };
 
 dictionary <dfn id=hitregionoptions>HitRegionOptions</dfn> {
@@ -37393,12 +37406,20 @@
    </dd>
 
    <dt><var title="">metrics</var> . <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-actualBoundingBoxWidth><a href=#dom-textmetrics-actualboundingboxwidth>actualBoundingBoxWidth</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-fontBoundingBoxAscent><a href=#dom-textmetrics-fontboundingboxascent>fontBoundingBoxAscent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-fontBoundingBoxDescent><a href=#dom-textmetrics-fontboundingboxdescent>fontBoundingBoxDescent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-actualBoundingBoxAscent><a href=#dom-textmetrics-actualboundingboxascent>actualBoundingBoxAscent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-actualBoundingBoxDescent><a href=#dom-textmetrics-actualboundingboxdescent>actualBoundingBoxDescent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-emHeightAscent><a href=#dom-textmetrics-emheightascent>emHeightAscent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-emHeightDescent><a href=#dom-textmetrics-emheightdescent>emHeightDescent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-hangingBaseline><a href=#dom-textmetrics-hangingbaseline>hangingBaseline</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-alphabeticBaseline><a href=#dom-textmetrics-alphabeticbaseline>alphabeticBaseline</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-ideographicBaseline><a href=#dom-textmetrics-ideographicbaseline>ideographicBaseline</a></code></dt>
 
    <dd>
 
-    <p>Returns the advance width of the text that was passed to the
-    <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
-    method.</p>
+    <p>Returns the measurement described below.</p>
 
    </dd>
 
@@ -37614,8 +37635,7 @@
   inline element set to the current font of the context as given by
   the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
   must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
-  <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
-  the width of that inline box, in CSS pixels.
+  attributes set as described in the following list.
 <!--ADD-TOPIC:Security-->
   If doing these measurements requires using a font that has an
   <a href=#origin>origin</a> that is not the <a href=#same-origin title="same
@@ -37628,24 +37648,61 @@
   Otherwise, it must return the new <code><a href=#textmetrics>TextMetrics</a></code> object.
   <a href=#refsCSS>[CSS]</a></p>
 
-  <p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
-  returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
-  attribute, <dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn>, which is set
-  by the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
-  method.</p>
+  </div>
 
-  <p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
+  <dl><dt><dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn> attribute</dt>
+
+   <dd><p>The width of that inline box, in CSS pixels.</dd>
+
+   <dt><dfn id=dom-textmetrics-actualboundingboxwidth title=dom-textmetrics-actualBoundingBoxWidth><code>actualBoundingBoxWidth</code></dfn> attribute</dt>
+
+   <dd><p>The width of the bounding rectangle of the given text, in CSS pixels. This can be wider than the width of the inline box, in particular with slanted fonts where characters overhang their advance width.</dd>
+
+   <dt><dfn id=dom-textmetrics-fontboundingboxascent title=dom-textmetrics-fontBoundingBoxAscent><code>fontBoundingBoxAscent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.</dd>
+
+   <dt><dfn id=dom-textmetrics-fontboundingboxdescent title=dom-textmetrics-fontBoundingBoxDescent><code>fontBoundingBoxDescent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the bottom of the lowest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.</dd>
+
+   <dt><dfn id=dom-textmetrics-actualboundingboxascent title=dom-textmetrics-actualBoundingBoxAscent><code>actualBoundingBoxAscent</code></dfn> attribute</dt>
+
+   <dd>
+    <p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the top of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.
+    <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 title=dom-textmetrics-actualBoundingBoxAscent><a href=#dom-textmetrics-actualboundingboxascent>actualBoundingBoxAscent</a></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 title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> value "<code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>") to the top of the bounding rectangle when the given text is just a single comma "<code title="">,</code>" would likely (unless the font is quite unusual) be negative.</p>
+   </dd>
+
+   <dt><dfn id=dom-textmetrics-actualboundingboxdescent title=dom-textmetrics-actualBoundingBoxDescent><code>actualBoundingBoxDescent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the bottom of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.</dd>
+
+   <dt><dfn id=dom-textmetrics-emheightascent title=dom-textmetrics-emHeightAscent><code>emHeightAscent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the top of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the top of the em square (so this value will usually be positive). Zero if the given baseline is the top of the em square; half the font size if the given baseline is the middle of the em square.</dd>
+
+   <dt><dfn id=dom-textmetrics-emheightdescent title=dom-textmetrics-emHeightDescent><code>emHeightDescent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the bottom of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the bottom of the em square (so this value will usually be negative). (Zero if the given baseline is the top of the em square.)</dd>
+
+   <dt><dfn id=dom-textmetrics-hangingbaseline title=dom-textmetrics-hangingBaseline><code>hangingBaseline</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the hanging baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the hanging baseline. (Zero if the given baseline is the hanging baseline.)</dd>
+
+   <dt><dfn id=dom-textmetrics-alphabeticbaseline title=dom-textmetrics-alphabeticBaseline><code>alphabeticBaseline</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the alphabetic baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the alphabetic baseline. (Zero if the given baseline is the alphabetic baseline.)</dd>
+
+   <dt><dfn id=dom-textmetrics-ideographicbaseline title=dom-textmetrics-ideographicBaseline><code>ideographicBaseline</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the ideographic baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the ideographic baseline. (Zero if the given baseline is the ideographic baseline.)</dd>
+
+  </dl><p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
   of the box given by the font size (the em square size) and the width
   returned by <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> (the text
-  width). This version of the specification does not provide a way to
-  obtain the bounding box dimensions of the text. If the text is to be
-  rendered and removed, care needs to be taken to replace the entire
-  area of the canvas that the <a href=#clipping-region>clipping region</a> covers, not
-  just the box given by the em square height and measured text
-  width.</p>
+  width). Authors are encouraged to use the bounding box values
+  described above if this is an issue.</p>
 
-  </div>
-
   <p class=note>A future version of the 2D context API may provide a
   way to render fragments of documents, rendered using CSS, straight
   to the canvas. This would be provided in preference to a dedicated

Modified: index
===================================================================
--- index	2012-03-27 22:24:26 UTC (rev 7032)
+++ index	2012-03-27 23:10:04 UTC (rev 7033)
@@ -35022,7 +35022,20 @@
 };
 
 interface <dfn id=textmetrics>TextMetrics</dfn> {
-  readonly attribute double <a href=#dom-textmetrics-width title=dom-textmetrics-width>width</a>;
+  // x-direction
+  readonly attribute double <a href=#dom-textmetrics-width title=dom-textmetrics-width>width</a>; // advance width
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxwidth title=dom-textmetrics-actualBoundingBoxWidth>actualBoundingBoxWidth</a>;
+
+  // y-direction
+  readonly attribute double <a href=#dom-textmetrics-fontboundingboxascent title=dom-textmetrics-fontBoundingBoxAscent>fontBoundingBoxAscent</a>;
+  readonly attribute double <a href=#dom-textmetrics-fontboundingboxdescent title=dom-textmetrics-fontBoundingBoxDescent>fontBoundingBoxDescent</a>;
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxascent title=dom-textmetrics-actualBoundingBoxAscent>actualBoundingBoxAscent</a>;
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxdescent title=dom-textmetrics-actualBoundingBoxDescent>actualBoundingBoxDescent</a>;
+  readonly attribute double <a href=#dom-textmetrics-emheightascent title=dom-textmetrics-emHeightAscent>emHeightAscent</a>;
+  readonly attribute double <a href=#dom-textmetrics-emheightdescent title=dom-textmetrics-emHeightDescent>emHeightDescent</a>;
+  readonly attribute double <a href=#dom-textmetrics-hangingbaseline title=dom-textmetrics-hangingBaseline>hangingBaseline</a>;
+  readonly attribute double <a href=#dom-textmetrics-alphabeticbaseline title=dom-textmetrics-alphabeticBaseline>alphabeticBaseline</a>;
+  readonly attribute double <a href=#dom-textmetrics-ideographicbaseline title=dom-textmetrics-ideographicBaseline>ideographicBaseline</a>;
 };
 
 dictionary <dfn id=hitregionoptions>HitRegionOptions</dfn> {
@@ -37393,12 +37406,20 @@
    </dd>
 
    <dt><var title="">metrics</var> . <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-actualBoundingBoxWidth><a href=#dom-textmetrics-actualboundingboxwidth>actualBoundingBoxWidth</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-fontBoundingBoxAscent><a href=#dom-textmetrics-fontboundingboxascent>fontBoundingBoxAscent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-fontBoundingBoxDescent><a href=#dom-textmetrics-fontboundingboxdescent>fontBoundingBoxDescent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-actualBoundingBoxAscent><a href=#dom-textmetrics-actualboundingboxascent>actualBoundingBoxAscent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-actualBoundingBoxDescent><a href=#dom-textmetrics-actualboundingboxdescent>actualBoundingBoxDescent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-emHeightAscent><a href=#dom-textmetrics-emheightascent>emHeightAscent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-emHeightDescent><a href=#dom-textmetrics-emheightdescent>emHeightDescent</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-hangingBaseline><a href=#dom-textmetrics-hangingbaseline>hangingBaseline</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-alphabeticBaseline><a href=#dom-textmetrics-alphabeticbaseline>alphabeticBaseline</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-ideographicBaseline><a href=#dom-textmetrics-ideographicbaseline>ideographicBaseline</a></code></dt>
 
    <dd>
 
-    <p>Returns the advance width of the text that was passed to the
-    <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
-    method.</p>
+    <p>Returns the measurement described below.</p>
 
    </dd>
 
@@ -37614,8 +37635,7 @@
   inline element set to the current font of the context as given by
   the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
   must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
-  <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
-  the width of that inline box, in CSS pixels.
+  attributes set as described in the following list.
 <!--ADD-TOPIC:Security-->
   If doing these measurements requires using a font that has an
   <a href=#origin>origin</a> that is not the <a href=#same-origin title="same
@@ -37628,24 +37648,61 @@
   Otherwise, it must return the new <code><a href=#textmetrics>TextMetrics</a></code> object.
   <a href=#refsCSS>[CSS]</a></p>
 
-  <p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
-  returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
-  attribute, <dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn>, which is set
-  by the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
-  method.</p>
+  </div>
 
-  <p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
+  <dl><dt><dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn> attribute</dt>
+
+   <dd><p>The width of that inline box, in CSS pixels.</dd>
+
+   <dt><dfn id=dom-textmetrics-actualboundingboxwidth title=dom-textmetrics-actualBoundingBoxWidth><code>actualBoundingBoxWidth</code></dfn> attribute</dt>
+
+   <dd><p>The width of the bounding rectangle of the given text, in CSS pixels. This can be wider than the width of the inline box, in particular with slanted fonts where characters overhang their advance width.</dd>
+
+   <dt><dfn id=dom-textmetrics-fontboundingboxascent title=dom-textmetrics-fontBoundingBoxAscent><code>fontBoundingBoxAscent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.</dd>
+
+   <dt><dfn id=dom-textmetrics-fontboundingboxdescent title=dom-textmetrics-fontBoundingBoxDescent><code>fontBoundingBoxDescent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the bottom of the lowest bounding rectangle of all the fonts used to render the text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.</dd>
+
+   <dt><dfn id=dom-textmetrics-actualboundingboxascent title=dom-textmetrics-actualBoundingBoxAscent><code>actualBoundingBoxAscent</code></dfn> attribute</dt>
+
+   <dd>
+    <p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the top of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.
+    <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 title=dom-textmetrics-actualBoundingBoxAscent><a href=#dom-textmetrics-actualboundingboxascent>actualBoundingBoxAscent</a></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 title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> value "<code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>") to the top of the bounding rectangle when the given text is just a single comma "<code title="">,</code>" would likely (unless the font is quite unusual) be negative.</p>
+   </dd>
+
+   <dt><dfn id=dom-textmetrics-actualboundingboxdescent title=dom-textmetrics-actualBoundingBoxDescent><code>actualBoundingBoxDescent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the bottom of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.</dd>
+
+   <dt><dfn id=dom-textmetrics-emheightascent title=dom-textmetrics-emHeightAscent><code>emHeightAscent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the top of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the top of the em square (so this value will usually be positive). Zero if the given baseline is the top of the em square; half the font size if the given baseline is the middle of the em square.</dd>
+
+   <dt><dfn id=dom-textmetrics-emheightdescent title=dom-textmetrics-emHeightDescent><code>emHeightDescent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the bottom of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the bottom of the em square (so this value will usually be negative). (Zero if the given baseline is the top of the em square.)</dd>
+
+   <dt><dfn id=dom-textmetrics-hangingbaseline title=dom-textmetrics-hangingBaseline><code>hangingBaseline</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the hanging baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the hanging baseline. (Zero if the given baseline is the hanging baseline.)</dd>
+
+   <dt><dfn id=dom-textmetrics-alphabeticbaseline title=dom-textmetrics-alphabeticBaseline><code>alphabeticBaseline</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the alphabetic baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the alphabetic baseline. (Zero if the given baseline is the alphabetic baseline.)</dd>
+
+   <dt><dfn id=dom-textmetrics-ideographicbaseline title=dom-textmetrics-ideographicBaseline><code>ideographicBaseline</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute to the ideographic baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the ideographic baseline. (Zero if the given baseline is the ideographic baseline.)</dd>
+
+  </dl><p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
   of the box given by the font size (the em square size) and the width
   returned by <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> (the text
-  width). This version of the specification does not provide a way to
-  obtain the bounding box dimensions of the text. If the text is to be
-  rendered and removed, care needs to be taken to replace the entire
-  area of the canvas that the <a href=#clipping-region>clipping region</a> covers, not
-  just the box given by the em square height and measured text
-  width.</p>
+  width). Authors are encouraged to use the bounding box values
+  described above if this is an issue.</p>
 
-  </div>
-
   <p class=note>A future version of the 2D context API may provide a
   way to render fragments of documents, rendered using CSS, straight
   to the canvas. This would be provided in preference to a dedicated

Modified: source
===================================================================
--- source	2012-03-27 22:24:26 UTC (rev 7032)
+++ source	2012-03-27 23:10:04 UTC (rev 7033)
@@ -40704,7 +40704,20 @@
 };
 
 interface <dfn>TextMetrics</dfn> {
-  readonly attribute double <span title="dom-textmetrics-width">width</span>;
+  // x-direction
+  readonly attribute double <span title="dom-textmetrics-width">width</span>; // advance width
+  readonly attribute double <span title="dom-textmetrics-actualBoundingBoxWidth">actualBoundingBoxWidth</span>;
+
+  // y-direction
+  readonly attribute double <span title="dom-textmetrics-fontBoundingBoxAscent">fontBoundingBoxAscent</span>;
+  readonly attribute double <span title="dom-textmetrics-fontBoundingBoxDescent">fontBoundingBoxDescent</span>;
+  readonly attribute double <span title="dom-textmetrics-actualBoundingBoxAscent">actualBoundingBoxAscent</span>;
+  readonly attribute double <span title="dom-textmetrics-actualBoundingBoxDescent">actualBoundingBoxDescent</span>;
+  readonly attribute double <span title="dom-textmetrics-emHeightAscent">emHeightAscent</span>;
+  readonly attribute double <span title="dom-textmetrics-emHeightDescent">emHeightDescent</span>;
+  readonly attribute double <span title="dom-textmetrics-hangingBaseline">hangingBaseline</span>;
+  readonly attribute double <span title="dom-textmetrics-alphabeticBaseline">alphabeticBaseline</span>;
+  readonly attribute double <span title="dom-textmetrics-ideographicBaseline">ideographicBaseline</span>;
 };
 
 dictionary <dfn>HitRegionOptions</dfn> {
@@ -43588,12 +43601,20 @@
    </dd>
 
    <dt><var title="">metrics</var> . <code title="dom-textmetrics-width">width</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-actualBoundingBoxWidth">actualBoundingBoxWidth</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-fontBoundingBoxAscent">fontBoundingBoxAscent</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-fontBoundingBoxDescent">fontBoundingBoxDescent</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-actualBoundingBoxAscent">actualBoundingBoxAscent</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-actualBoundingBoxDescent">actualBoundingBoxDescent</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-emHeightAscent">emHeightAscent</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-emHeightDescent">emHeightDescent</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-hangingBaseline">hangingBaseline</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-alphabeticBaseline">alphabeticBaseline</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-ideographicBaseline">ideographicBaseline</code></dt>
 
    <dd>
 
-    <p>Returns the advance width of the text that was passed to the
-    <code title="dom-context-2d-measureText">measureText()</code>
-    method.</p>
+    <p>Returns the measurement described below.</p>
 
    </dd>
 
@@ -43832,8 +43853,7 @@
   inline element set to the current font of the context as given by
   the <code title="dom-context-2d-font">font</code> attribute, and
   must then create a new <code>TextMetrics</code> object with its
-  <code title="dom-textmetrics-width">width</code> attribute set to
-  the width of that inline box, in CSS pixels.
+  attributes set as described in the following list.
 <!--ADD-TOPIC:Security-->
   If doing these measurements requires using a font that has an
   <span>origin</span> that is not the <span title="same
@@ -43846,29 +43866,68 @@
   Otherwise, it must return the new <code>TextMetrics</code> object.
   <a href="#refsCSS">[CSS]</a></p>
 
-  <p>The <code>TextMetrics</code> interface is used for the objects
-  returned from <code
-  title="dom-context-2d-measureText">measureText()</code>. It has one
-  attribute, <dfn
-  title="dom-textmetrics-width"><code>width</code></dfn>, which is set
-  by the <code title="dom-context-2d-measureText">measureText()</code>
-  method.</p>
+  </div>
 
+  <dl>
+
+   <dt><dfn title="dom-textmetrics-width"><code>width</code></dfn> attribute</dt>
+
+   <dd><p>The width of that inline box, in CSS pixels.</p></p></dd>
+
+   <dt><dfn title="dom-textmetrics-actualBoundingBoxWidth"><code>actualBoundingBoxWidth</code></dfn> attribute</dt>
+
+   <dd><p>The width of the bounding rectangle of the given text, in CSS pixels. This can be wider than the width of the inline box, in particular with slanted fonts where characters overhang their advance width.</p></p></dd>
+
+   <dt><dfn title="dom-textmetrics-fontBoundingBoxAscent"><code>fontBoundingBoxAscent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title="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 CSS pixels; positive numbers indicating a distance going up from the given baseline.</p></dd>
+
+   <dt><dfn title="dom-textmetrics-fontBoundingBoxDescent"><code>fontBoundingBoxDescent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title="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 CSS pixels; positive numbers indicating a distance going down from the given baseline.</p></dd>
+
+   <dt><dfn title="dom-textmetrics-actualBoundingBoxAscent"><code>actualBoundingBoxAscent</code></dfn> attribute</dt>
+
+   <dd>
+    <p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline">textBaseline</code> attribute to the top of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.
+    <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 title="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 title="dom-context-2d-textBaseline">textBaseline</code> value "<code title="dom-context-2d-textBaseline-top">top</code>") to the top of the bounding rectangle when the given text is just a single comma "<code title="">,</code>" would likely (unless the font is quite unusual) be negative.</p>
+   </dd>
+
+   <dt><dfn title="dom-textmetrics-actualBoundingBoxDescent"><code>actualBoundingBoxDescent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline">textBaseline</code> attribute to the bottom of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.</p></dd>
+
+   <dt><dfn title="dom-textmetrics-emHeightAscent"><code>emHeightAscent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline">textBaseline</code> attribute to the top of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the top of the em square (so this value will usually be positive). Zero if the given baseline is the top of the em square; half the font size if the given baseline is the middle of the em square.</p></dd>
+
+   <dt><dfn title="dom-textmetrics-emHeightDescent"><code>emHeightDescent</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline">textBaseline</code> attribute to the bottom of the em square in the line box, in CSS pixels; positive numbers indicating that the given baseline is below the bottom of the em square (so this value will usually be negative). (Zero if the given baseline is the top of the em square.)</p></dd>
+
+   <dt><dfn title="dom-textmetrics-hangingBaseline"><code>hangingBaseline</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline">textBaseline</code> attribute to the hanging baseline of the line box, in CSS pixels; 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 title="dom-textmetrics-alphabeticBaseline"><code>alphabeticBaseline</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline">textBaseline</code> attribute to the alphabetic baseline of the line box, in CSS pixels; 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 title="dom-textmetrics-ideographicBaseline"><code>ideographicBaseline</code></dfn> attribute</dt>
+
+   <dd><p>The distance from the horizontal line indicated by the <code title="dom-context-2d-textBaseline">textBaseline</code> attribute to the ideographic baseline of the line box, in CSS pixels; positive numbers indicating that the given baseline is below the ideographic baseline. (Zero if the given baseline is the ideographic baseline.)</p></dd>
+
+  </dl>
+
   <p class="note">Glyphs rendered using <code
   title="dom-context-2d-fillText">fillText()</code> and <code
   title="dom-context-2d-strokeText">strokeText()</code> can spill out
   of the box given by the font size (the em square size) and the width
   returned by <code
   title="dom-context-2d-measureText">measureText()</code> (the text
-  width). This version of the specification does not provide a way to
-  obtain the bounding box dimensions of the text. If the text is to be
-  rendered and removed, care needs to be taken to replace the entire
-  area of the canvas that the <span>clipping region</span> covers, not
-  just the box given by the em square height and measured text
-  width.</p>
+  width). Authors are encouraged to use the bounding box values
+  described above if this is an issue.</p>
 
-  </div>
-
   <p class="note">A future version of the 2D context API may provide a
   way to render fragments of documents, rendered using CSS, straight
   to the canvas. This would be provided in preference to a dedicated




More information about the Commit-Watchers mailing list