Skip to content
Browse files

[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
  • Loading branch information...
1 parent f62e2ad commit ad004a0698087df779bfd38a792444d3188c9d5a @Hixie Hixie committed
Showing with 63 additions and 18 deletions.
  1. +21 −6 complete.html
  2. +21 −6 index
  3. +21 −6 source
View
27 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>
View
27 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>
View
27 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>

0 comments on commit ad004a0

Please sign in to comment.
Something went wrong with that request. Please try again.