[giow] (0) Make the width values usable in practice.

Affected topics: Canvas

git-svn-id: http://svn.whatwg.org/webapps@7038 340c8d12-0b0e-0410-8428-c7bf67bfef74

complete.html

@@ -35026,7 +35026,8 @@ <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
 interface <dfn id=textmetrics>TextMetrics</dfn> {
   // 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>;
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxleft title=dom-textmetrics-actualBoundingBoxLeft>actualBoundingBoxLeft</a>;
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxright title=dom-textmetrics-actualBoundingBoxRight>actualBoundingBoxRight</a>;
 
   // y-direction
   readonly attribute double <a href=#dom-textmetrics-fontboundingboxascent title=dom-textmetrics-fontBoundingBoxAscent>fontBoundingBoxAscent</a>;
@@ -37455,7 +37456,8 @@ <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing t
    </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-actualBoundingBoxLeft><a href=#dom-textmetrics-actualboundingboxleft>actualBoundingBoxLeft</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-actualBoundingBoxRight><a href=#dom-textmetrics-actualboundingboxright>actualBoundingBoxRight</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>
@@ -37701,15 +37703,28 @@ <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing t
 
   <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>
+   <dd><p>The width of that inline box, in CSS pixels. (The text's advance width.)</dd>
 
-   <dt><dfn id=dom-textmetrics-actualboundingboxwidth title=dom-textmetrics-actualBoundingBoxWidth><code>actualBoundingBoxWidth</code></dfn> attribute</dt>
+   <dt><dfn id=dom-textmetrics-actualboundingboxleft title=dom-textmetrics-actualBoundingBoxLeft><code>actualBoundingBoxLeft</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>
+   <dd>
+    <p>The distance parallel to the baseline from the alignment point given by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.
+    <p class=note>The sum of this value and the next (<code title=dom-textmetrics-actualBoundingBoxRight><a href=#dom-textmetrics-actualboundingboxright>actualBoundingBoxRight</a></code>) can be wider than the width of the inline box (<code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code>), in particular with slanted fonts where characters overhang their advance width.</p>
+
+   </dd>
+
+   <dt><dfn id=dom-textmetrics-actualboundingboxright title=dom-textmetrics-actualBoundingBoxRight><code>actualBoundingBoxRight</code></dfn> attribute</dt>
+
+   <dd>
+    <p>The distance parallel to the baseline from the alignment point given by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute to the right side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going right from the given alignment point.</p>
+   </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>
+   <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.</p>
+    <p class=note>This value and the next are useful when rendering a background that must have a consistent height even if the exact text being rendered changes. The <code title=dom-textmetrics-actualBoundingBoxAscent><a href=#dom-textmetrics-actualboundingboxascent>actualBoundingBoxAscent</a></code> attribute (and its corresponding attribute for the descent) are useful when drawing a bounding box around specific text.</p>
+   </dd>
 
    <dt><dfn id=dom-textmetrics-fontboundingboxdescent title=dom-textmetrics-fontBoundingBoxDescent><code>fontBoundingBoxDescent</code></dfn> attribute</dt>
 

index

@@ -35026,7 +35026,8 @@ interface <dfn id=canvaspattern>CanvasPattern</dfn> {
 interface <dfn id=textmetrics>TextMetrics</dfn> {
   // 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>;
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxleft title=dom-textmetrics-actualBoundingBoxLeft>actualBoundingBoxLeft</a>;
+  readonly attribute double <a href=#dom-textmetrics-actualboundingboxright title=dom-textmetrics-actualBoundingBoxRight>actualBoundingBoxRight</a>;
 
   // y-direction
   readonly attribute double <a href=#dom-textmetrics-fontboundingboxascent title=dom-textmetrics-fontBoundingBoxAscent>fontBoundingBoxAscent</a>;
@@ -37455,7 +37456,8 @@ try {
    </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-actualBoundingBoxLeft><a href=#dom-textmetrics-actualboundingboxleft>actualBoundingBoxLeft</a></code></dt>
+   <dt><var title="">metrics</var> . <code title=dom-textmetrics-actualBoundingBoxRight><a href=#dom-textmetrics-actualboundingboxright>actualBoundingBoxRight</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>
@@ -37701,15 +37703,28 @@ v6DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-contex
 
   <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>
+   <dd><p>The width of that inline box, in CSS pixels. (The text's advance width.)</dd>
 
-   <dt><dfn id=dom-textmetrics-actualboundingboxwidth title=dom-textmetrics-actualBoundingBoxWidth><code>actualBoundingBoxWidth</code></dfn> attribute</dt>
+   <dt><dfn id=dom-textmetrics-actualboundingboxleft title=dom-textmetrics-actualBoundingBoxLeft><code>actualBoundingBoxLeft</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>
+   <dd>
+    <p>The distance parallel to the baseline from the alignment point given by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.
+    <p class=note>The sum of this value and the next (<code title=dom-textmetrics-actualBoundingBoxRight><a href=#dom-textmetrics-actualboundingboxright>actualBoundingBoxRight</a></code>) can be wider than the width of the inline box (<code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code>), in particular with slanted fonts where characters overhang their advance width.</p>
+
+   </dd>
+
+   <dt><dfn id=dom-textmetrics-actualboundingboxright title=dom-textmetrics-actualBoundingBoxRight><code>actualBoundingBoxRight</code></dfn> attribute</dt>
+
+   <dd>
+    <p>The distance parallel to the baseline from the alignment point given by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute to the right side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going right from the given alignment point.</p>
+   </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>
+   <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.</p>
+    <p class=note>This value and the next are useful when rendering a background that must have a consistent height even if the exact text being rendered changes. The <code title=dom-textmetrics-actualBoundingBoxAscent><a href=#dom-textmetrics-actualboundingboxascent>actualBoundingBoxAscent</a></code> attribute (and its corresponding attribute for the descent) are useful when drawing a bounding box around specific text.</p>
+   </dd>
 
    <dt><dfn id=dom-textmetrics-fontboundingboxdescent title=dom-textmetrics-fontBoundingBoxDescent><code>fontBoundingBoxDescent</code></dfn> attribute</dt>
 

source

@@ -40708,7 +40708,8 @@ interface <dfn>CanvasPattern</dfn> {
 interface <dfn>TextMetrics</dfn> {
   // x-direction
   readonly attribute double <span title="dom-textmetrics-width">width</span>; // advance width
-  readonly attribute double <span title="dom-textmetrics-actualBoundingBoxWidth">actualBoundingBoxWidth</span>;
+  readonly attribute double <span title="dom-textmetrics-actualBoundingBoxLeft">actualBoundingBoxLeft</span>;
+  readonly attribute double <span title="dom-textmetrics-actualBoundingBoxRight">actualBoundingBoxRight</span>;
 
   // y-direction
   readonly attribute double <span title="dom-textmetrics-fontBoundingBoxAscent">fontBoundingBoxAscent</span>;
@@ -43655,7 +43656,8 @@ try {
    </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-actualBoundingBoxLeft">actualBoundingBoxLeft</code></dt>
+   <dt><var title="">metrics</var> . <code title="dom-textmetrics-actualBoundingBoxRight">actualBoundingBoxRight</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>
@@ -43926,15 +43928,28 @@ v6DVT (also check for '- -' bits in the part above) -->
 
    <dt><dfn title="dom-textmetrics-width"><code>width</code></dfn> attribute</dt>
 
-   <dd><p>The width of that inline box, in CSS pixels.</p></dd>
+   <dd><p>The width of that inline box, in CSS pixels. (The text's advance width.)</p></dd>
 
-   <dt><dfn title="dom-textmetrics-actualBoundingBoxWidth"><code>actualBoundingBoxWidth</code></dfn> attribute</dt>
+   <dt><dfn title="dom-textmetrics-actualBoundingBoxLeft"><code>actualBoundingBoxLeft</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></dd>
+   <dd>
+    <p>The distance parallel to the baseline from the alignment point given by the <code title="dom-context-2d-textAlign">textAlign</code> attribute to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.
+    <p class="note">The sum of this value and the next (<code title="dom-textmetrics-actualBoundingBoxRight">actualBoundingBoxRight</code>) can be wider than the width of the inline box (<code title="dom-textmetrics-width">width</code>), in particular with slanted fonts where characters overhang their advance width.</p>
+
+   </dd>
+
+   <dt><dfn title="dom-textmetrics-actualBoundingBoxRight"><code>actualBoundingBoxRight</code></dfn> attribute</dt>
+
+   <dd>
+    <p>The distance parallel to the baseline from the alignment point given by the <code title="dom-context-2d-textAlign">textAlign</code> attribute to the right side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going right from the given alignment point.</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>
+   <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>
+    <p class="note">This value and the next are useful when rendering a background that must have a consistent height even if the exact text being rendered changes. The <code title="dom-textmetrics-actualBoundingBoxAscent">actualBoundingBoxAscent</code> attribute (and its corresponding attribute for the descent) are useful when drawing a bounding box around specific text.</p>
+   </dd>
 
    <dt><dfn title="dom-textmetrics-fontBoundingBoxDescent"><code>fontBoundingBoxDescent</code></dfn> attribute</dt>