[html5] r1519 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Mon May 5 18:09:49 PDT 2008
Author: ianh
Date: 2008-05-05 18:09:48 -0700 (Mon, 05 May 2008)
New Revision: 1519
Added:
images/baselines.png
Modified:
index
source
Log:
[] (0) Rendering text to a canvas: the fillText(), strokeText(), and measureText() APIs.
Added: images/baselines.png
===================================================================
(Binary files differ)
Property changes on: images/baselines.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: index
===================================================================
--- index 2008-04-30 21:59:01 UTC (rev 1518)
+++ index 2008-05-06 01:09:48 UTC (rev 1519)
@@ -25,8 +25,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft>Draft Recommendation — 30 April
- 2008</h2>
+ <h2 class="no-num no-toc" id=draft>Draft Recommendation — 6 May 2008</h2>
<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
@@ -732,13 +731,16 @@
<li><a href="#complex"><span class=secno>3.12.11.1.8.
</span>Complex shapes (paths)</a>
- <li><a href="#images"><span class=secno>3.12.11.1.9.
+ <li><a href="#text"><span class=secno>3.12.11.1.9. </span>Text</a>
+
+
+ <li><a href="#images"><span class=secno>3.12.11.1.10.
</span>Images</a>
- <li><a href="#pixel"><span class=secno>3.12.11.1.10. </span>Pixel
+ <li><a href="#pixel"><span class=secno>3.12.11.1.11. </span>Pixel
manipulation</a>
- <li><a href="#drawing"><span class=secno>3.12.11.1.11.
+ <li><a href="#drawing"><span class=secno>3.12.11.1.12.
</span>Drawing model</a>
</ul>
@@ -1614,7 +1616,7 @@
elements</a>
</ul>
- <li><a href="#text"><span class=secno>8.1.3 </span>Text</a>
+ <li><a href="#text0"><span class=secno>8.1.3 </span>Text</a>
<ul class=toc>
<li><a href="#newlines"><span class=secno>8.1.3.1.
</span>Newlines</a>
@@ -2369,7 +2371,9 @@
context, the "computed value of the 'color' property" for the purposes of
determining the computed value of the <code title="">currentColor</code>
keyword is the computed value of the 'color' property on the element in
- question. <a href="#refsCSS3COLOR">[CSS3COLOR]</a>
+ question. <a href="#refsCSS3COLOR">[CSS3COLOR]</a></p>
+ <!-- XXX what if that
+ element has no computed value? e.g. if it is not in a document? -->
<p class=example>If a canvas gradient's <code
title=dom-canvasgradient-addColorStop><a
@@ -6647,7 +6651,8 @@
<p>The processing of this attribute depends on the presentation layer. For
example, CSS 2.1 defines a mapping from this attribute to the CSS
'direction' and 'unicode-bidi' properties, and defines rendering in terms
- of those properties.
+ of those properties.</p>
+ <!-- XXXDIR -->
<p>The <dfn id=dir0 title=dom-dir><code>dir</code></dfn> DOM attribute on
an element must <a href="#reflect">reflect</a> the <code title=attr-dir><a
@@ -13214,7 +13219,7 @@
<dd><code title=attr-img-ismap><a href="#ismap">ismap</a></code>
- <dd><code title=attr-dim-width><a href="#width3">width</a></code>
+ <dd><code title=attr-dim-width><a href="#width4">width</a></code>
<dd><code title=attr-dim-height><a href="#height3">height</a></code>
@@ -13984,7 +13989,7 @@
<dd><code title=attr-embed-type><a href="#type4">type</a></code>
- <dd><code title=attr-dim-width><a href="#width3">width</a></code>
+ <dd><code title=attr-dim-width><a href="#width4">width</a></code>
<dd><code title=attr-dim-height><a href="#height3">height</a></code>
@@ -13997,7 +14002,7 @@
class=idl>interface <dfn id=htmlembedelement>HTMLEmbedElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#src4" title=dom-embed-src>src</a>;
attribute DOMString <a href="#type5" title=dom-embed-type>type</a>;
- attribute long <a href="#width4" title=dom-dim-width>width</a>;
+ attribute long <a href="#width5" title=dom-dim-width>width</a>;
attribute long <a href="#height4" title=dom-dim-height>height</a>;
};</pre>
@@ -14117,7 +14122,7 @@
<dd><code title=attr-hyperlink-usemap><a href="#usemap1">usemap</a></code>
- <dd><code title=attr-dim-width><a href="#width3">width</a></code>
+ <dd><code title=attr-dim-width><a href="#width4">width</a></code>
<dd><code title=attr-dim-height><a href="#height3">height</a></code>
@@ -14129,7 +14134,7 @@
attribute DOMString <a href="#data0" title=dom-object-data>data</a>;
attribute DOMString <a href="#type7" title=dom-object-type>type</a>;
attribute DOMString <a href="#usemap0" title=dom-object-useMap>useMap</a>;
- attribute long <a href="#width4" title=dom-dim-width>width</a>;
+ attribute long <a href="#width5" title=dom-dim-width>width</a>;
attribute long <a href="#height4" title=dom-dim-height>height</a>;<!--
readonly attribute Document <span title="dom-object-contentDocument">contentDocument</span>;
readonly attribute <span>Window</span> <span title="dom-object-contentWindow">contentWindow</span>;-->
@@ -14484,7 +14489,7 @@
<dd><code title=attr-media-controls><a
href="#controls">controls</a></code>
- <dd><code title=attr-dim-width><a href="#width3">width</a></code>
+ <dd><code title=attr-dim-width><a href="#width4">width</a></code>
<dd><code title=attr-dim-height><a href="#height3">height</a></code>
@@ -14493,7 +14498,7 @@
<dd>
<pre
class=idl>interface <dfn id=htmlvideoelement>HTMLVideoElement</dfn> : <a href="#htmlmediaelement">HTMLMediaElement</a> {
- attribute long <a href="#width4" title=dom-dim-width>width</a>;
+ attribute long <a href="#width5" title=dom-dim-width>width</a>;
attribute long <a href="#height4" title=dom-dim-height>height</a>;
readonly attribute unsigned long <a href="#videowidth" title=dom-video-videoWidth>videoWidth</a>;
readonly attribute unsigned long <a href="#videoheight" title=dom-video-videoHeight>videoHeight</a>;
@@ -14847,7 +14852,7 @@
<code title=attr-media-controls><a href="#controls">controls</a></code>,
apply to all <a href="#media5" title="media element">media elements</a>.
They are defined in this section.</p>
- <!-- XXX v3 features:
+ <!-- XXXv3 features:
* frame forward / backwards / step(n) while paused
* hasAudio, hasVideo, hasCaptions, etc
* per-frame control: get current frame; set current frame
@@ -17304,7 +17309,7 @@
void <a href="#transform" title=dom-context-2d-transform>transform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
void <a href="#settransform" title=dom-context-2d-setTransform>setTransform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
<!--
- // XXXv3 we've also received requests for:
+ // XXXv4 we've also received requests for:
void skew(...);
void reflect(...); // or mirror(...)
-->
@@ -17352,6 +17357,20 @@
void <a href="#clip" title=dom-context-2d-clip>clip</a>();
boolean <a href="#ispointinpath" title=dom-context-2d-isPointInPath>isPointInPath</a>(in float x, in float y);
+ // text
+ attribute DOMString <a href="#font" title=dom-context-2d-font>font</a>; // (default 8px sans-serif)
+ attribute DOMString <a href="#textalign" title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
+ attribute DOMString <a href="#textbaseline" title=dom-context-2d-textBaseline>textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+ void <a href="#filltext" title=dom-context-2d-fillText>fillText</a>(in DOMString text, in float x, in float y);
+ void <a href="#filltext" title=dom-context-2d-fillText>fillText</a>(in DOMString text, in float x, in float y, in float maxWidth);
+ void <a href="#stroketext" title=dom-context-2d-strokeText>strokeText</a>(in DOMString text, in float x, in float y);
+ void <a href="#stroketext" title=dom-context-2d-strokeText>strokeText</a>(in DOMString text, in float x, in float y, in float maxWidth);<!-- XXXDVT
+ void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y);
+ void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y, in float maxHeight);
+ void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y);
+ void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, in float maxHeight); -->
+ <a href="#textmetrics">TextMetrics</a> <a href="#measuretext" title=dom-context-2d-measureText>measureText</a>(in DOMString text);
+
// drawing images
void <a href="#drawimage" title=dom-context-2d-drawImage>drawImage</a>(in <a href="#htmlimageelement">HTMLImageElement</a> image, in float dx, in float dy);
void <a href="#drawimage" title=dom-context-2d-drawImage>drawImage</a>(in <a href="#htmlimageelement">HTMLImageElement</a> image, in float dx, in float dy, in float dw, in float dh);
@@ -17365,11 +17384,6 @@
<a href="#imagedata">ImageData</a> <a href="#getimagedata" title=dom-context-2d-getImageData>getImageData</a>(in float sx, in float sy, in float sw, in float sh);
void <a href="#putimagedata" title=dom-context-2d-putImageData>putImageData</a>(in <a href="#imagedata">ImageData</a> imagedata, in float dx, in float dy);
void <a href="#putimagedata" title=dom-context-2d-putImageData>putImageData</a>(in <a href="#imagedata">ImageData</a> imagedata, in float dx, in float dy, in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
-
- // drawing text is not supported in this version of the API
- // (there is no way to predict what metrics the fonts will have,
- // which makes fonts very hard to use for painting)
-
};
interface <dfn id=canvasgradient>CanvasGradient</dfn> {
@@ -17381,8 +17395,12 @@
// opaque object
};
+interface <dfn id=textmetrics>TextMetrics</dfn> {
+ readonly attribute float <a href="#width2" title=dom-textmetrics-width>width</a>;
+};
+
interface <dfn id=imagedata>ImageData</dfn> {
- readonly attribute long int <a href="#width2" title=dom-imagedata-width>width</a>;
+ readonly attribute long int <a href="#width3" title=dom-imagedata-width>width</a>;
readonly attribute long int <a href="#height2" title=dom-imagedata-height>height</a>;
readonly attribute int[] <a href="#data1" title=dom-imagedata-data>data</a>;
};</pre>
@@ -17439,7 +17457,11 @@
title=dom-context-2d-shadowColor><a
href="#shadowcolor">shadowColor</a></code>, <code
title=dom-context-2d-globalCompositeOperation><a
- href="#globalcompositeoperation">globalCompositeOperation</a></code>.
+ href="#globalcompositeoperation">globalCompositeOperation</a></code>,
+ <code title=dom-context-2d-font><a href="#font">font</a></code>, <code
+ title=dom-context-2d-textAlign><a href="#textalign">textAlign</a></code>,
+ <code title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code>.
</ul>
<p class=note>The current path and the current bitmap are not part of the
@@ -17457,7 +17479,7 @@
title=dom-context-2d-restore><code>restore()</code></dfn> method must pop
the top entry in the drawing state stack, and reset the drawing state it
describes. If there is no saved state, the method must do nothing.</p>
- <!-- XXXv3
+ <!-- XXXv4
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
>
@@ -17972,7 +17994,7 @@
patterns, then <code title=dom-context-2d-createPattern><a
href="#createpattern">createPattern()</a></code> must return null.</p>
<!--
- XXXv3 Requests for v3 features:
+ XXXv4 Requests for v4 features:
* apply transforms to patterns, so you don't have to create
transformed patterns manually by rendering them to an off-screen
canvas then using that canvas as the pattern.
@@ -18074,7 +18096,7 @@
what they do on setting. not a big deal; it's pretty obvious. but if
anyone complains, we'll have to add it -->
<!--
-XXXv3 dashed lines have been requested. Philip Taylor provides these
+XXXv4 dashed lines have been requested. Philip Taylor provides these
notes on what would need to be defined for dashed lines:
> I don't think it's entirely trivial to add, to the detail that's
> necessary in a specification. The common graphics APIs (at least
@@ -18504,7 +18526,7 @@
<p>When the context is initialised, the clipping region must be set to the
rectangle with the top left corner at (0,0) and the width and height of
the coordinate space.</p>
- <!-- XXXv3
+ <!-- XXXv4
Jordan OSETE suggests:
* support ways of extending the clipping region (union instead of intersection)
- also "add", "substract", "replace", "intersect" and "xor"
@@ -18522,8 +18544,494 @@
If either of the arguments is infinite or NaN, then the method must return
false.
- <h6 id=images><span class=secno>3.12.11.1.9. </span>Images</h6>
+ <h6 id=text><span class=secno>3.12.11.1.9. </span>Text</h6>
+ <!-- a v3 feature -->
+ <p>The <dfn id=font title=dom-context-2d-font><code>font</code></dfn> DOM
+ attribute, on setting, must be parsed the same way as the 'font' property
+ of CSS (but without supporting property-global stylesheet syntax like
+ 'inherit'), and the resulting font must be assigned to the context, with
+ the 'line-height' component forced to 'normal'. <a
+ href="#refsCSS">[CSS]</a><!-- XXX generic version-independent
+ reference -->
+
+ <p>On getting, the <code title=dom-context-2d-font><a
+ href="#font">font</a></code> attribute must return the serialised form of
+ the current font of the context. <a
+ href="#refsCSSOM">[CSSOM]</a><!-- XXX ensure that this
+ defines serialisation of 'font' -->
+
+ <p>When the context is created, the font of the context must be set to 10px
+ sans-serif. When the 'font-size' component is set to lengths using
+ percentages, 'em' or 'ex' units, or the 'larger' or 'smaller' keywords,
+ these must be interpreted relative to the computed value of the
+ 'font-size' property of the corresponding <code><a
+ href="#canvas">canvas</a></code> element. When the 'font-weight' component
+ is set to the relative values 'bolder' and 'lighter', these must be
+ interpreted relative to the computed value of the 'font-weight' property
+ of the corresponding <code><a href="#canvas">canvas</a></code> element.</p>
+ <!-- XXX what if that
+ element has no computed value? e.g. if it is not in a document? -->
+
+ <p>The <dfn id=textalign
+ title=dom-context-2d-textAlign><code>textAlign</code></dfn> DOM attribute,
+ on getting, must return the current value. On setting, if the value is one
+ of <code title="">start</code>, <code title="">end</code>, <code
+ title="">left</code>, <code title="">right</code>, or <code
+ title="">center</code>, then the value must be changed to the new value.
+ Otherwise, the new value must be ignored. When the context is created, the
+ <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code> attribute must initially have the
+ value <code title="">start</code>.
+
+ <p>The <dfn id=textbaseline
+ title=dom-context-2d-textBaseline><code>textBaseline</code></dfn> DOM
+ attribute, on getting, must return the current value. On setting, if the
+ value is one of <code title=dom-context-2d-textBaseline-top><a
+ href="#top">top</a></code>, <code
+ title=dom-context-2d-textBaseline-hanging><a
+ href="#hanging">hanging</a></code>, <code
+ title=dom-context-2d-textBaseline-middle><a
+ href="#middle">middle</a></code>, <code
+ title=dom-context-2d-textBaseline-alphabetic><a
+ href="#alphabetic">alphabetic</a></code>, <code
+ title=dom-context-2d-textBaseline-ideographic><a
+ href="#ideographic">ideographic</a></code>, or <code
+ title=dom-context-2d-textBaseline-bottom><a
+ href="#bottom">bottom</a></code>, then the value must be changed to the
+ new value. Otherwise, the new value must be ignored. When the context is
+ created, the <code title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> attribute must initially have
+ the value <code title="">alphabetic</code>.
+
+ <p>The <code title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> attribute's allowed keywords
+ correspond to alignment points in the font:
+
+ <p><img 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 आ 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
+ Á, ÿ, f, and Ω are anchored, the ideographic
+ baseline is where glyphs like 私 and 達 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."
+ src="images/baselines.png">
+
+ <p>The keywords map to these alignment points as follows:
+
+ <dl>
+ <dt><dfn id=top
+ title=dom-context-2d-textBaseline-top><code>top</code></dfn>
+
+ <dd>The top of the em square
+
+ <dt><dfn id=hanging
+ title=dom-context-2d-textBaseline-hanging><code>hanging</code></dfn>
+
+ <dd>The hanging baseline
+
+ <dt><dfn id=middle
+ title=dom-context-2d-textBaseline-middle><code>middle</code></dfn>
+
+ <dd>The middle of the em square
+
+ <dt><dfn id=alphabetic
+ title=dom-context-2d-textBaseline-alphabetic><code>alphabetic</code></dfn>
+
+
+ <dd>The alphabetic baseline
+
+ <dt><dfn id=ideographic
+ title=dom-context-2d-textBaseline-ideographic><code>ideographic</code></dfn>
+
+
+ <dd>The ideographic baseline
+
+ <dt><dfn id=bottom
+ title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
+
+ <dd>The bottom of the em square
+ </dl>
+
+ <p>The <dfn id=filltext
+ title=dom-context-2d-fillText><code>fillText()</code></dfn> and <dfn
+ id=stroketext
+ title=dom-context-2d-strokeText><code>strokeText()</code></dfn> methods
+ take three or four arguments, <var title="">text</var>, <var
+ title="">x</var>, <var title="">y</var>, and optionally <var
+ title="">maxWidth</var>, and render the given <var title="">text</var> at
+ the given (<var title="">x</var>, <var title="">y</var>) coordinates
+ ensuring that the text isn't wider than <var title="">maxWidth</var> if
+ specified, using the current <code title=dom-context-2d-font><a
+ href="#font">font</a></code>, <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code>, and <code
+ title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> values. Specifically, when
+ the methods are called, the user agent must run the following steps:
+
+ <ol>
+ <li>
+ <p>Let <var title="">font</var> be the current font of the browsing
+ context, as given by the <code title=dom-context-2d-font><a
+ href="#font">font</a></code> attribute.
+
+ <li>
+ <p>Replace all the <a href="#space" title="space character">space
+ characters</a> in <var title="">text</var> with U+0020 SPACE characters.
+
+ <li>
+ <p>Form a hypothetical infinitely wide CSS line box containing a single
+ inline box containing the text <var title="">text</var>, with all the
+ properties at their initial values except the 'font' property of the
+ inline element set to <var title="">font</var> and the 'direction'
+ property of the inline element set to the 'direction' property of the
+ <code><a href="#canvas">canvas</a></code> element. <a
+ href="#refsCSS">[CSS]</a>
+ </li>
+ <!-- XXXDIR somehow mention
+ somewhere that if you don't support CSS, dir="" still maps to
+ 'direction' for the purposes of things like this. -->
+ <!-- if you insert a step here, make sure to adjust the next step's
+ final words -->
+
+ <li>
+ <p>If the <var title="">maxWidth</var> argument was specified and the
+ hypothetical width of the inline box in the hypothetical line box is
+ greater than <var title="">maxWidth</var> CSS pixels, then change <var
+ title="">font</var> to have a more condensed font (if one is available
+ or if a reasonably readable one can be synthesised by applying a
+ horizontal scale factor to the font) or a smaller font, and return to
+ the previous step.
+
+ <li>
+ <p>Let the <var title="">anchor point</var> be a point on the inline box,
+ determined by the <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code> and <code
+ title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> values, as follows:</p>
+
+ <p>Horizontal position:</p>
+
+ <dl>
+ <dt> If <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code> is <code title="">left</code>
+
+ <dt> If <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code> is <code title="">start</code>
+ and the 'direction'<!--XXXDIR--> property on the <code><a
+ href="#canvas">canvas</a></code> element has a computed value of 'ltr'
+
+ <dt> If <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code> is <code title="">end</code> and
+ the 'direction'<!--XXXDIR--> property on the <code><a
+ href="#canvas">canvas</a></code> element has a computed value of 'rtl'
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal position be
+ the left edge of the inline box.
+
+ <dt> If <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code> is <code title="">right</code>
+
+ <dt> If <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code> is <code title="">end</code> and
+ the 'direction'<!--XXXDIR--> property on the <code><a
+ href="#canvas">canvas</a></code> element has a computed value of 'ltr'
+
+ <dt> If <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code> is <code title="">start</code>
+ and the 'direction'<!--XXXDIR--> property on the <code><a
+ href="#canvas">canvas</a></code> element has a computed value of 'rtl'
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal position be
+ the right edge of the inline box.
+
+ <dt> If <code title=dom-context-2d-textAlign><a
+ href="#textalign">textAlign</a></code> is <code title="">center</code>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal position be
+ half way between the left and right edges of the inline box.
+ </dl>
+
+ <p>Vertical position:</p>
+
+ <dl>
+ <dt> If <code title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> is <code
+ title=dom-context-2d-textBaseline-top><a href="#top">top</a></code>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position be the
+ top of the em box of the first available font of the inline box.
+
+ <dt> If <code title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> is <code
+ title=dom-context-2d-textBaseline-hanging><a
+ href="#hanging">hanging</a></code>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position be the
+ hanging baseline of the first available font of the inline box.
+
+ <dt> If <code title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> is <code
+ title=dom-context-2d-textBaseline-middle><a
+ href="#middle">middle</a></code>
+
+ <dd>Let the <var title="">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 inline box.
+
+ <dt> If <code title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> is <code
+ title=dom-context-2d-textBaseline-alphabetic><a
+ href="#alphabetic">alphabetic</a></code>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position be the
+ alphabetic baseline of the first available font of the inline box.
+
+ <dt> If <code title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> is <code
+ title=dom-context-2d-textBaseline-ideographic><a
+ href="#ideographic">ideographic</a></code>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position be the
+ ideographic baseline of the first available font of the inline box.
+
+ <dt> If <code title=dom-context-2d-textBaseline><a
+ href="#textbaseline">textBaseline</a></code> is <code
+ title=dom-context-2d-textBaseline-bottom><a
+ href="#bottom">bottom</a></code>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position be the
+ bottom of the em box of the first available font of the inline box.
+ </dl>
+
+ <li>
+ <p>Paint the hypothetical inline box as the shape given by the text's
+ glyphs, as transformed by the <a href="#transformations0"
+ title=dom-context-2d-transformation>current transformation matrix</a>,
+ and anchored and sized so that before applying the <a
+ href="#transformations0" title=dom-context-2d-transformation>current
+ transformation matrix</a>, the <var title="">anchor point</var> is at
+ (<var title="">x</var>, <var title="">y</var>) and each CSS pixel is
+ mapped to one coordinate space unit.</p>
+
+ <p>For <code title=dom-context-2d-fillText><a
+ href="#filltext">fillText()</a></code> <code
+ title=dom-context-2d-fillStyle><a href="#fillstyle">fillStyle</a></code>
+ must be applied and <code title=dom-context-2d-strokeStyle><a
+ href="#strokestyle">strokeStyle</a></code> must be ignored. For <code
+ title=dom-context-2d-strokeText><a
+ href="#stroketext">strokeText()</a></code> the reverse holds and <code
+ title=dom-context-2d-strokeStyle><a
+ href="#strokestyle">strokeStyle</a></code> must be applied and <code
+ title=dom-context-2d-fillStyle><a href="#fillstyle">fillStyle</a></code>
+ must be ignored.</p>
+
+ <p>Text is painted without affecting the current path, and is subject to
+ <a href="#shadows0" title=shadows>shadow effects</a>, <a
+ href="#globalalpha" title=dom-context-2d-globalAlpha>global alpha</a>,
+ the <a href="#clipping" title="clipping region">clipping region</a>, and
+ <a href="#globalcompositeoperation"
+ title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>.</p>
+ </ol>
+ <!--XXXDVT - this is commented out until CSS can get its act together
+enough to actual specify vertical text rendering (how long have we
+been waiting now?)
+
+ <p>The <dfn
+ title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
+ and <dfn
+ title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
+ methods take three or four arguments, <var title="">text</var>, <var
+ title="">x</var>, <var title="">y</var>, and optionally <var
+ title="">maxHeight</var>, and render the given <var
+ title="">text</var> as vertical text at the given (<var
+ title="">x</var>, <var title="">y</var>) coordinates ensuring that
+ the text isn't taller than <var title="">maxHeight</var> if
+ specified, using the current <code
+ title="dom-context-2d-font">font</code> and <code
+ title="dom-context-2d-textAlign">textAlign</code>
+ values. Specifically, when the methods are called, the user agent
+ must run the following steps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">font</var> be the current font of the
+ browsing context, as given by the <code
+ title="dom-context-2d-font">font</code> attribute.</p></li>
+
+ <li><p>Replace all the <span title="space character">space
+ characters</span> in <var title="">text</var> with U+0020 SPACE
+ characters.</p></li>
+
+ <li><p>Form a <em class="big-issue">whatever CSS ends up calling
+ vertical line boxes and inline boxes</em> containing the text <var
+ title="">text</var>, with all the properties at their initial
+ values except the 'font' property of the inline element set to <var
+ title="">font</var> and the 'direction' property of the inline
+ element set to the 'direction' property of the <code>canvas</code>
+ element.</p></li><!- - XXXDIR - ->
+
+ <!- - if you insert a step here, make sure to adjust the next step's
+ final words - ->
+
+ <li><p>If the <var title="">maxHeight</var> argument was specified
+ and the hypothetical height of the <em class="big-issue">box</em>
+ in the hypothetical line box is greater than <var
+ title="">maxHeight</var> CSS pixels, then change <var
+ title="">font</var> to have a more condensed font (if one is
+ available or if a reasonably readable one can be synthesised by
+ applying an appropriate scale factor to the font) or a smaller
+ font, and return to the previous step.</p></li>
+
+ <li>
+
+ <p>Let the <var title="">anchor point</var> be a point on the <em
+ class="big-issue">inline box</var>, determined by the <code
+ title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>
+
+ <p>Vertical position:</p>
+
+ <dl>
+
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">start</code></dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and the 'direction'<!- -XXXDIR- -> property
+ on the <code>canvas</code> element has a computed value of
+ 'ltr'</dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and the 'direction'<!- -XXXDIR- -> property
+ on the <code>canvas</code> element has a computed value of
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the top edge of the <em class="big-issue">inline
+ box</em>.</dd>
+
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">end</code></dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and the 'direction'<!- -XXXDIR- -> property
+ on the <code>canvas</code> element has a computed value of
+ 'ltr'</dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and the 'direction'<!- -XXXDIR- -> property on
+ the <code>canvas</code> element has a computed value of
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the bottom edge of the <em class="big-issue">inline
+ box</em>.</dd>
+
+
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">center</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be half way between the top and bottom edges of the <em
+ class="big-issue">inline box</em>.</dd>
+
+ </dl>
+
+ <p>Let the horizontal position be half way between the left and
+ right edges of the em box of the first available font of the <em
+ class="big-issue">inline box</em>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Paint the hypothetical inline box as the shape given by the
+ text's glyphs, as transformed by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span>, and anchored and sized so that before applying the
+ <span title="dom-context-2d-transformation">current transformation
+ matrix</span>, the <var title="">anchor point</var> is at (<var
+ title="">x</var>, <var title="">y</var>) and each CSS pixel is
+ mapped to one coordinate space unit.</p>
+
+ <p>For <code
+ title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
+ <code title="dom-context-2d-fillStyle">fillStyle</code> must be
+ applied and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ ignored. For <code
+ title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
+ the reverse holds and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ applied and <code
+ title="dom-context-2d-fillStyle">fillStyle</code> must be
+ ignored.</p>
+
+ <p>Text is painted without affecting the current path, and is
+ subject to <span title="shadows">shadow effects</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, the <span
+ title="clipping region">clipping region</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>.</p>
+
+ </li>
+
+ </ol>
+
+XXXDVT (also check for '- -' bits in the part above) -->
+
+ <p>The <dfn id=measuretext
+ title=dom-context-2d-measureText><code>measureText()</code></dfn> method
+ takes one argument, <var title="">text</var>. When the method is invoked,
+ the user agent must replace all the <a href="#space" title="space
+ character">space characters</a> in <var title="">text</var> with U+0020
+ SPACE characters, and then must form a hypothetical infinitely wide CSS
+ line box containing a single inline box containing the text <var
+ title="">text</var>, with all the properties at their initial values
+ except the 'font' property of the inline element set to the current font
+ of the browsing context, as given by the <code
+ title=dom-context-2d-font><a href="#font">font</a></code> attribute, and
+ must then return a new <code><a href="#textmetrics">TextMetrics</a></code>
+ object with its <code title=dom-textmetrics-width><a
+ href="#width2">width</a></code> attribute set to the width of that inline
+ box, in CSS pixels. <a href="#refsCSS">[CSS]</a>
+
+ <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="#measuretext">measureText()</a></code>. It has one attribute, <dfn
+ id=width2 title=dom-textmetrics-width><code>width</code></dfn>, which is
+ set by the <code title=dom-context-2d-measureText><a
+ href="#measuretext">measureText()</a></code> method.
+
+ <p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a
+ href="#filltext">fillText()</a></code> and <code
+ title=dom-context-2d-strokeText><a
+ href="#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="#measuretext">measureText()</a></code> (the text width). If the text
+ is to be rendered and removed, care needs to be taken to replace the
+ entire area of the canvas that the clipping region covers, not just the
+ box given by the em square height and measured text width.</p>
+ <!-- XXXv4 Drawing text along a given path -->
+ <!-- XXXv4 Adding text to a path -->
+ <!-- see also: http://www.w3.org/TR/SVG11/text.html#TextpathLayoutRules -->
+ <!-- see also: http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas -->
+
+ <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 way of doing multiline
+ layout.
+
+ <h6 id=images><span class=secno>3.12.11.1.10. </span>Images</h6>
+
<p>To draw images onto the canvas, the <dfn id=drawimage
title=dom-context-2d-drawImage><code>drawImage</code></dfn> method can be
used.
@@ -18625,7 +19133,7 @@
of the target element, not the rendered image (e.g. height/width
attributes don't affect it -->
- <h6 id=pixel><span class=secno>3.12.11.1.10. </span><dfn id=pixel0>Pixel
+ <h6 id=pixel><span class=secno>3.12.11.1.11. </span><dfn id=pixel0>Pixel
manipulation</dfn></h6>
<!--
<span>ImageData</span> <span title="dom-context-2d-createImageData">createImageData</span>(in float sw, in float sh);
@@ -18667,7 +19175,7 @@
exception.
<p><code><a href="#imagedata">ImageData</a></code> objects must be
- initialised so that their <dfn id=width2
+ initialised so that their <dfn id=width3
title=dom-imagedata-width><code>width</code></dfn> attribute is set to
<var title="">w</var>, the number of physical device pixels per row in the
image data, their <dfn id=height2
@@ -18725,7 +19233,7 @@
<p>When the last four arguments are omitted, they must be assumed to have
the values 0, 0, the <code title=dom-imagedata-width><a
- href="#width2">width</a></code> member of the <var
+ href="#width3">width</a></code> member of the <var
title="">imagedata</var> structure, and the <code
title=dom-imagedata-height><a href="#height2">height</a></code>member of
the <var title="">imagedata</var> structure, respectively.
@@ -18771,10 +19279,10 @@
<li>
<p>If <span><var title="">dirtyX</var>+<var
title="">dirtyWidth</var></span> is greater than the <code
- title=dom-imagedata-width><a href="#width2">width</a></code> attribute
+ title=dom-imagedata-width><a href="#width3">width</a></code> attribute
of the <var title="">imagedata</var> argument, let <var
title="">dirtyWidth</var> be the value of that <code
- title=dom-imagedata-width><a href="#width2">width</a></code> attribute,
+ title=dom-imagedata-width><a href="#width3">width</a></code> attribute,
minus the value of <var title="">dirtyX</var>.</p>
<p>If <span><var title="">dirtyY</var>+<var
@@ -18934,7 +19442,7 @@
</html></pre>
</div>
- <h6 id=drawing><span class=secno>3.12.11.1.11. </span>Drawing model</h6>
+ <h6 id=drawing><span class=secno>3.12.11.1.12. </span>Drawing model</h6>
<p>When a shape or image is painted, user agents must follow these steps,
in the order given (or act as if they do):
@@ -19738,7 +20246,7 @@
<h4 id=dimension><span class=secno>3.12.17 </span><dfn
id=dimension0>Dimension attributes</dfn></h4>
- <p>The <dfn id=width3 title=attr-dim-width><code>width</code></dfn> and
+ <p>The <dfn id=width4 title=attr-dim-width><code>width</code></dfn> and
<dfn id=height3 title=attr-dim-height><code>height</code></dfn> attributes
on <code><a href="#img">img</a></code>, <code><a
href="#embed">embed</a></code>, <code><a href="#object">object</a></code>,
@@ -19767,7 +20275,7 @@
attributes, when parsing, returns no value, it must be treated, for the
purposes of those requirements, as if it was not specified.
- <p>The <dfn id=width4 title=dom-dim-width><code>width</code></dfn> and <dfn
+ <p>The <dfn id=width5 title=dom-dim-width><code>width</code></dfn> and <dfn
id=height4 title=dom-dim-height><code>height</code></dfn> DOM attributes
on the <code><a href="#embed">embed</a></code>, <code><a
href="#object">object</a></code>, and <code><a
@@ -21714,7 +22222,7 @@
attribute boolean <code title=dom-script-async><a href="#async0">async</a></code>;
attribute boolean <code title=dom-script-defer><a href="#defer0">defer</a></code>;
attribute DOMString <code title=dom-script-type><a href="#type12">type</a></code>;
- attribute DOMString <code title=dom-script-text><a href="#text0">text</a></code>;
+ attribute DOMString <code title=dom-script-text><a href="#text1">text</a></code>;
};</pre>
</dl>
@@ -22022,7 +22530,7 @@
<p>If the script is inline, then, for scripting languages that consist of
pure text, user agents must use the value of the DOM <code
- title=dom-script-text><a href="#text0">text</a></code> attribute (defined
+ title=dom-script-text><a href="#text1">text</a></code> attribute (defined
below) as the script to execute, and for XML-based scripting languages,
user agents must use all the child nodes of the <code><a
href="#script0">script</a></code> element as the script to execute.
@@ -22053,7 +22561,7 @@
href="#reflect">reflect</a> the respective content attributes of the same
name.
- <p>The DOM attribute <dfn id=text0
+ <p>The DOM attribute <dfn id=text1
title=dom-script-text><code>text</code></dfn> must return a concatenation
of the contents of all the <a href="#text-node" title="text node">text
nodes</a> that are direct children of the <code><a
@@ -27166,7 +27674,7 @@
protocol, then return a new globally unique identifier.
<li>
- <p>If the scheme is "<code title="">file:</code>", then the user agent
+ <p>If the scheme is "<code title="">file</code>", then the user agent
may return a UA-specific origin.
<li>
@@ -32071,7 +32579,7 @@
[XXX] void <a href="#removeitem" title=dom-Storage-removeItem>removeItem</a>(in DOMString key); <!-- XXX [[Delete]] DOMB -->
void <a href="#clear0" title=dom-Storage-clear>clear</a>();
};</pre>
- <!-- XXX v2 ideas:
+ <!-- XXXv2 ideas:
a getInfo() method that returns an object that tells you:
- when the key was added
- when the key was last modified
@@ -38985,11 +39493,11 @@
<p>Void elements can't have any contents (since there's no end tag, no
content can be put between the start tag and the end tag).
- <p>CDATA elements can have <a href="#text1" title=syntax-text>text</a>,
+ <p>CDATA elements can have <a href="#text2" title=syntax-text>text</a>,
though it has <a href="#cdata-rcdata-restrictions">restrictions</a>
described below.
- <p>RCDATA elements can have <a href="#text1" title=syntax-text>text</a> and
+ <p>RCDATA elements can have <a href="#text2" title=syntax-text>text</a> and
<a href="#character3" title=syntax-entities>character entity
references</a>, but the text must not contain an <a href="#ambiguous"
title=syntax-ambiguous-ampersand>ambiguous ampersand</a>. There are also
@@ -38999,7 +39507,7 @@
<p>Foreign elements whose start tag is marked as self-closing can't have
any contents (since, again, as there's no end tag, no content can be put
between the start tag and the end tag). Foreign elements whose start tag
- is <em>not</em> marked as self-closing can have <a href="#text1"
+ is <em>not</em> marked as self-closing can have <a href="#text2"
title=syntax-text>text</a>, <a href="#character3"
title=syntax-entities>character entity references</a>, <a href="#cdata0"
title=syntax-cdata>CDATA blocks</a>, other <a href="#elements2"
@@ -39009,7 +39517,7 @@
href="#ambiguous" title=syntax-ambiguous-ampersand>ambiguous
ampersand</a>.
- <p>Normal elements can have <a href="#text1" title=syntax-text>text</a>, <a
+ <p>Normal elements can have <a href="#text2" title=syntax-text>text</a>, <a
href="#character3" title=syntax-entities>character entity references</a>,
other <a href="#elements2" title=syntax-elements>elements</a>, and <a
href="#comments0" title=syntax-comments>comments</a>, but the text must
@@ -39105,7 +39613,7 @@
name; attribute names are case-insensitive.
<p><dfn id=attribute0 title=syntax-attribute-value>Attribute values</dfn>
- are a mixture of <a href="#text1" title=syntax-text>text</a> and <a
+ are a mixture of <a href="#text2" title=syntax-text>text</a> and <a
href="#character3" title=syntax-entities>character entity references</a>,
except with the additional restriction that the text cannot contain an <a
href="#ambiguous" title=syntax-ambiguous-ampersand>ambiguous
@@ -39438,20 +39946,20 @@
title=syntax-escape>escaping text span</a>.
<p>An <dfn id=escaping title=syntax-escape>escaping text span</dfn> is a
- span of <a href="#text1" title=syntax-text>text</a> that starts with an <a
+ span of <a href="#text2" title=syntax-text>text</a> that starts with an <a
href="#escaping0" title=syntax-escape-start>escaping text span start</a>
that is not itself in an <a href="#escaping" title=syntax-escape>escaping
text span</a>, and ends at the next <a href="#escaping1"
title=syntax-escape-end>escaping text span end</a>.
<p>An <dfn id=escaping0 title=syntax-escape-start>escaping text span
- start</dfn> is a part of <a href="#text1" title=syntax-text>text</a> that
+ start</dfn> is a part of <a href="#text2" title=syntax-text>text</a> that
consists of the four character sequence "<code title=""><!--</code>"
(U+003C LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+002D HYPHEN-MINUS,
U+002D HYPHEN-MINUS).
<p>An <dfn id=escaping1 title=syntax-escape-end>escaping text span
- end</dfn> is a part of <a href="#text1" title=syntax-text>text</a> that
+ end</dfn> is a part of <a href="#text2" title=syntax-text>text</a> that
consists of the three character sequence "<code title="">--></code>"
(U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN) whose
U+003E GREATER-THAN SIGN (>).
@@ -39466,9 +39974,9 @@
that is not followed by an <a href="#escaping1"
title=syntax-escape-end>escaping text span end</a>.
- <h4 id=text><span class=secno>8.1.3 </span>Text</h4>
+ <h4 id=text0><span class=secno>8.1.3 </span>Text</h4>
- <p><dfn id=text1 title=syntax-text>Text</dfn> is allowed inside elements,
+ <p><dfn id=text2 title=syntax-text>Text</dfn> is allowed inside elements,
attributes, and comments. Text must consist of Unicode characters. Text
must not contain U+0000 characters. Text must not contain permanently
undefined Unicode characters. Text must not contain control characters
@@ -39485,11 +39993,11 @@
<h4 id=character><span class=secno>8.1.4 </span>Character entity references</h4>
- <p>In certain cases described in other sections, <a href="#text1"
+ <p>In certain cases described in other sections, <a href="#text2"
title=syntax-text>text</a> may be mixed with <dfn id=character3
title=syntax-entities>character entity references</dfn>. These can be used
to escape characters that couldn't otherwise legally be included in <a
- href="#text1" title=syntax-text>text</a>.
+ href="#text2" title=syntax-text>text</a>.
<p>Character entity references must start with a U+0026 AMPERSAND
(<code>&</code>). Following this, there are three possible kinds of
@@ -39529,7 +40037,7 @@
<p>An <dfn id=ambiguous title=syntax-ambiguous-ampersand>ambiguous
ampersand</dfn> is a U+0026 AMPERSAND (<code>&</code>) character that
- is followed by some <a href="#text1" title=syntax-text>text</a> other than
+ is followed by some <a href="#text2" title=syntax-text>text</a> other than
a <a href="#space">space character</a>, a U+003C LESS-THAN SIGN character
('<'), or another U+0026 AMPERSAND (<code>&</code>) character.
@@ -39541,7 +40049,7 @@
LETTER D, U+0041 LATIN CAPITAL LETTER A, U+0054 LATIN CAPITAL LETTER T,
U+0041 LATIN CAPITAL LETTER A, U+005B LEFT SQUARE BRACKET (<code
title=""><![CDATA[</code>). Following this sequence, the block may have
- <a href="#text1" title=syntax-text>text</a>, with the additional
+ <a href="#text2" title=syntax-text>text</a>, with the additional
restriction that the text must not contain the three character sequence
U+005D RIGHT SQUARE BRACKET, U+005D RIGHT SQUARE BRACKET, U+003E
GREATER-THAN SIGN (<code title="">]]></code>). Finally, the CDATA block
@@ -39555,7 +40063,7 @@
the four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION
MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS (<code
title=""><!--</code>). Following this sequence, the comment may have <a
- href="#text1" title=syntax-text>text</a>, with the additional restriction
+ href="#text2" title=syntax-text>text</a>, with the additional restriction
that the text must not start with a single U+003E GREATER-THAN SIGN
('>') character, nor start with a U+002D HYPHEN-MINUS (<code
title="">-</code>) character followed by a U+003E GREATER-THAN SIGN
@@ -48870,7 +49378,7 @@
<pre
class=idl>[XXX] interface <a href="#htmlbodyelement">HTMLBodyElement</a> {
- attribute DOMString <a href="#text2" title=dom-body-text>text</a>;
+ attribute DOMString <a href="#text3" title=dom-body-text>text</a>;
attribute DOMString <a href="#bgcolor0" title=dom-body-bgColor>bgColor</a>;
attribute DOMString <a href="#background" title=dom-body-background>background</a>;
attribute DOMString <a href="#link0" title=dom-body-link>link</a>;
@@ -48878,7 +49386,7 @@
attribute DOMString <a href="#alink" title=dom-body-aLink>aLink</a>;
};</pre>
- <p>The <dfn id=text2 title=dom-body-text><code>text</code></dfn> DOM
+ <p>The <dfn id=text3 title=dom-body-text><code>text</code></dfn> DOM
attribute of the <code><a href="#body0">body</a></code> element must <a
href="#reflect">reflect</a> the element's <code
title=attr-body-text>text</code> content attribute.
@@ -49085,26 +49593,28 @@
Laurens Holst, Leif Halvard Silli, Lenny Domnitser, Léonard
Bouchet, Leons Petrazickis, Logan<!-- on
moz irc -->, Loune, Maciej
- Stachowiak, Malcolm Rowe, Mark Nottingham, Mark Rowe<!--bdash-->, Mark
- Schenk, Martijn Wargers, Martin Atkins, Martin Dürst, Martin Honnen,
- Mathieu Henri, Matthew Mastracci, Matthew Raymond, Matthew Thomas, Mattias
- Waldau, Max Romantschuk, Michael 'Ratt' Iannarelli, Michael A. Nachbaur,
- Michael A. Puls II<!--Shadow2531-->, Michael Carter, Michael Gratton,
- Michael Powers, Michael Smith, Michel Fortin, Michiel van der Blonk, Mihai
- Şucan<!-- from ROBO Design -->, Mike Brown, Mike
- Dierken<!-- S. Mike Dierken -->, Mike Dixon, Mike Schinkel, Mike Shaver,
- Mike Smith, Mikko Rantalainen, Neil Deakin, Neil Soiffer, Olav Junker
- Kjær, Oliver Hunt, Peter Kasting, Philip Taylor, Philip
- TAYLOR<!-- a different one -->, Rachid Finge, Rajas Moonka, Ralf Stoltze,
- Ralph Giles, Raphael Champeimont, Rene Saarsoo, Richard Ishida, Rimantas
- Liubertas, Robert O'Callahan, Robert Sayre, Roman Ivanov, S. Mike Dierken,
- Sam Ruby, Sam Weinig, Scott Hess, Sean Knapp, Shaun Inman, Silvia
- Pfeiffer, Simon Pieters, Stefan Haustein, Stephen Ma, Steve Faulkner,
- Steve Runyon, Steven Garrity, Stewart Brodie, Stuart Parmenter, Sunava
- Dutta, Tantek Çelik, Terrence Wood, Thomas Broyer, Thomas O'Connor,
- Tim Altman, Tyler Close, Vladimir Vukićević, Wakaba, Wayne
- Pollock, William Swanson, and Øistein E. Andersen, for their useful
- and substantial comments.
+ Stachowiak, Magnus Kristiansen<!--
+ Dashiva -->, Malcolm Rowe, Mark
+ Nottingham, Mark Rowe<!--bdash-->, Mark Schenk, Martijn Wargers, Martin
+ Atkins, Martin Dürst, Martin Honnen, Masataka Yakura, Mathieu Henri,
+ Matthew Mastracci, Matthew Raymond, Matthew Thomas, Mattias Waldau, Max
+ Romantschuk, Michael 'Ratt' Iannarelli, Michael A. Nachbaur, Michael A.
+ Puls II<!--Shadow2531-->, Michael Carter, Michael Gratton, Michael Powers,
+ Michael Smith, Michel Fortin, Michiel van der Blonk, Mihai
+ Şucan<!-- from ROBO Design -->, Mike Brown, Mike Dierken<!--
+ S. Mike Dierken -->,
+ Mike Dixon, Mike Schinkel, Mike Shaver, Mike Smith, Mikko Rantalainen,
+ Neil Deakin, Neil Soiffer, Olav Junker Kjær, Oliver Hunt, Peter
+ Kasting, Philip Taylor, Philip TAYLOR<!-- a different one -->, Rachid
+ Finge, Rajas Moonka, Ralf Stoltze, Ralph Giles, Raphael Champeimont, Rene
+ Saarsoo, Richard Ishida, Rimantas Liubertas, Robert O'Callahan, Robert
+ Sayre, Roman Ivanov, S. Mike Dierken, Sam Ruby, Sam Weinig, Scott Hess,
+ Sean Knapp, Shaun Inman, Silvia Pfeiffer, Simon Pieters, Stefan Haustein,
+ Stephen Ma, Steve Faulkner, Steve Runyon, Steven Garrity, Stewart Brodie,
+ Stuart Parmenter, Sunava Dutta, Tantek Çelik, Terrence Wood, Thomas
+ Broyer, Thomas O'Connor, Tim Altman, Tyler Close, Vladimir
+ Vukićević, Wakaba, Wayne Pollock, William Swanson, and
+ Øistein E. Andersen, for their useful and substantial comments.
<p>Thanks also to everyone who has ever posted about HTML5 to their blogs,
public mailing lists, or forums, including the <a
Modified: source
===================================================================
--- source 2008-04-30 21:59:01 UTC (rev 1518)
+++ source 2008-05-06 01:09:48 UTC (rev 1519)
@@ -654,7 +654,8 @@
property" for the purposes of determining the computed value of the
<code title="">currentColor</code> keyword is the computed value of
the 'color' property on the element in question. <a
- href="#refsCSS3COLOR">[CSS3COLOR]</a></p>
+ href="#refsCSS3COLOR">[CSS3COLOR]</a></p> <!-- XXX what if that
+ element has no computed value? e.g. if it is not in a document? -->
<p class="example">If a canvas gradient's <code
title="dom-canvasgradient-addColorStop">addColorStop()</code> method
@@ -5081,7 +5082,7 @@
<p>The processing of this attribute depends on the presentation
layer. For example, CSS 2.1 defines a mapping from this attribute to
the CSS 'direction' and 'unicode-bidi' properties, and defines
- rendering in terms of those properties.</p>
+ rendering in terms of those properties.</p><!-- XXXDIR -->
<p>The <dfn title="dom-dir"><code>dir</code></dfn> DOM attribute on
an element must <span>reflect</span> the <code
@@ -12817,7 +12818,7 @@
title="media element">media elements</span>. They are defined in
this section.</p>
- <!-- XXX v3 features:
+ <!-- XXXv3 features:
* frame forward / backwards / step(n) while paused
* hasAudio, hasVideo, hasCaptions, etc
* per-frame control: get current frame; set current frame
@@ -14982,7 +14983,7 @@
void <span title="dom-context-2d-transform">transform</span>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
void <span title="dom-context-2d-setTransform">setTransform</span>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
<!--
- // XXXv3 we've also received requests for:
+ // XXXv4 we've also received requests for:
void skew(...);
void reflect(...); // or mirror(...)
-->
@@ -15030,6 +15031,20 @@
void <span title="dom-context-2d-clip">clip</span>();
boolean <span title="dom-context-2d-isPointInPath">isPointInPath</span>(in float x, in float y);
+ // text
+ attribute DOMString <span title="dom-context-2d-font">font</span>; // (default 8px sans-serif)
+ attribute DOMString <span title="dom-context-2d-textAlign">textAlign</span>; // "start", "end", "left", "right", "center" (default: "start")
+ attribute DOMString <span title="dom-context-2d-textBaseline">textBaseline</span>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+ void <span title="dom-context-2d-fillText">fillText</span>(in DOMString text, in float x, in float y);
+ void <span title="dom-context-2d-fillText">fillText</span>(in DOMString text, in float x, in float y, in float maxWidth);
+ void <span title="dom-context-2d-strokeText">strokeText</span>(in DOMString text, in float x, in float y);
+ void <span title="dom-context-2d-strokeText">strokeText</span>(in DOMString text, in float x, in float y, in float maxWidth);<!-- XXXDVT
+ void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y);
+ void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y, in float maxHeight);
+ void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y);
+ void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, in float maxHeight); -->
+ <span>TextMetrics</span> <span title="dom-context-2d-measureText">measureText</span>(in DOMString text);
+
// drawing images
void <span title="dom-context-2d-drawImage">drawImage</span>(in <span>HTMLImageElement</span> image, in float dx, in float dy);
void <span title="dom-context-2d-drawImage">drawImage</span>(in <span>HTMLImageElement</span> image, in float dx, in float dy, in float dw, in float dh);
@@ -15043,11 +15058,6 @@
<span>ImageData</span> <span title="dom-context-2d-getImageData">getImageData</span>(in float sx, in float sy, in float sw, in float sh);
void <span title="dom-context-2d-putImageData">putImageData</span>(in <span>ImageData</span> imagedata, in float dx, in float dy);
void <span title="dom-context-2d-putImageData">putImageData</span>(in <span>ImageData</span> imagedata, in float dx, in float dy, in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
-
- // drawing text is not supported in this version of the API
- // (there is no way to predict what metrics the fonts will have,
- // which makes fonts very hard to use for painting)
-
};
interface <dfn>CanvasGradient</dfn> {
@@ -15059,6 +15069,10 @@
// opaque object
};
+interface <dfn>TextMetrics</dfn> {
+ readonly attribute float <span title="dom-textmetrics-width">width</span>;
+};
+
interface <dfn>ImageData</dfn> {
readonly attribute long int <span title="dom-imagedata-width">width</span>;
readonly attribute long int <span title="dom-imagedata-height">height</span>;
@@ -15109,7 +15123,10 @@
title="dom-context-2d-shadowOffsetY">shadowOffsetY</code>, <code
title="dom-context-2d-shadowBlur">shadowBlur</code>, <code
title="dom-context-2d-shadowColor">shadowColor</code>, <code
- title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>.</li>
+ title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>, <code
+ title="dom-context-2d-font">font</code>, <code
+ title="dom-context-2d-textAlign">textAlign</code>, <code
+ title="dom-context-2d-textBaseline">textBaseline</code>.</li>
</ul>
<p class="note">The current path and the current bitmap are not part
@@ -15129,7 +15146,7 @@
drawing state it describes. If there is no saved state, the method
must do nothing.</p>
- <!-- XXXv3
+ <!-- XXXv4
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
>
@@ -15655,7 +15672,7 @@
return null.</p>
<!--
- XXXv3 Requests for v3 features:
+ XXXv4 Requests for v4 features:
* apply transforms to patterns, so you don't have to create
transformed patterns manually by rendering them to an off-screen
canvas then using that canvas as the pattern.
@@ -15767,7 +15784,7 @@
anyone complains, we'll have to add it -->
<!--
-XXXv3 dashed lines have been requested. Philip Taylor provides these
+XXXv4 dashed lines have been requested. Philip Taylor provides these
notes on what would need to be defined for dashed lines:
> I don't think it's entirely trivial to add, to the detail that's
> necessary in a specification. The common graphics APIs (at least
@@ -16219,7 +16236,7 @@
to the rectangle with the top left corner at (0,0) and the width and
height of the coordinate space.</p>
- <!-- XXXv3
+ <!-- XXXv4
Jordan OSETE suggests:
* support ways of extending the clipping region (union instead of intersection)
- also "add", "substract", "replace", "intersect" and "xor"
@@ -16239,7 +16256,494 @@
must return false.</p>
+ <h6>Text</h6> <!-- a v3 feature -->
+ <p>The <dfn title="dom-context-2d-font"><code>font</code></dfn> DOM
+ attribute, on setting, must be parsed the same way as the 'font'
+ property of CSS (but without supporting property-global stylesheet
+ syntax like 'inherit'), and the resulting font must be assigned to
+ the context, with the 'line-height' component forced to 'normal'. <a
+ href="#refsCSS">[CSS]</a><!-- XXX generic version-independent
+ reference --></p>
+
+ <p>On getting, the <code title="dom-context-2d-font">font</code>
+ attribute must return the serialised form of the current font of the
+ context. <a href="#refsCSSOM">[CSSOM]</a><!-- XXX ensure that this
+ defines serialisation of 'font' --></p>
+
+ <p>When the context is created, the font of the context must be set
+ to 10px sans-serif. When the 'font-size' component is set to lengths
+ using percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
+ keywords, these must be interpreted relative to the computed value
+ of the 'font-size' property of the corresponding <code>canvas</code>
+ element. When the 'font-weight' component is set to the relative
+ values 'bolder' and 'lighter', these must be interpreted relative to
+ the computed value of the 'font-weight' property of the
+ corresponding <code>canvas</code> element.</p> <!-- XXX what if that
+ element has no computed value? e.g. if it is not in a document? -->
+
+ <p>The <dfn
+ title="dom-context-2d-textAlign"><code>textAlign</code></dfn> DOM
+ attribute, on getting, must return the current value. On setting, if
+ the value is one of <code title="">start</code>, <code
+ title="">end</code>, <code title="">left</code>, <code
+ title="">right</code>, or <code title="">center</code>, then the
+ value must be changed to the new value. Otherwise, the new value
+ must be ignored. When the context is created, the <code
+ title="dom-context-2d-textAlign">textAlign</code> attribute must
+ initially have the value <code title="">start</code>.</p>
+
+ <p>The <dfn
+ title="dom-context-2d-textBaseline"><code>textBaseline</code></dfn>
+ DOM attribute, on getting, must return the current value. On
+ setting, if the value is one of <code
+ title="dom-context-2d-textBaseline-top">top</code>, <code
+ title="dom-context-2d-textBaseline-hanging">hanging</code>, <code
+ title="dom-context-2d-textBaseline-middle">middle</code>, <code
+ title="dom-context-2d-textBaseline-alphabetic">alphabetic</code>,
+ <code
+ title="dom-context-2d-textBaseline-ideographic">ideographic</code>,
+ or <code title="dom-context-2d-textBaseline-bottom">bottom</code>,
+ then the value must be changed to the new value. Otherwise, the new
+ value must be ignored. When the context is created, the <code
+ title="dom-context-2d-textBaseline">textBaseline</code> attribute
+ must initially have the value <code title="">alphabetic</code>.</p>
+
+ <p>The <code title="dom-context-2d-textBaseline">textBaseline</code>
+ attribute's allowed keywords correspond to alignment points in the
+ font:</p>
+
+ <p><img src="images/baselines.png" 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 आ 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 Á, ÿ,
+ f, and Ω are anchored, the ideographic baseline is
+ where glyphs like 私 and 達 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>
+
+ <dl>
+
+ <dt><dfn title="dom-context-2d-textBaseline-top"><code>top</code></dfn>
+ <dd>The top of the em square</dd>
+
+ <dt><dfn title="dom-context-2d-textBaseline-hanging"><code>hanging</code></dfn>
+ <dd>The hanging baseline</dd>
+
+ <dt><dfn title="dom-context-2d-textBaseline-middle"><code>middle</code></dfn>
+ <dd>The middle of the em square</dd>
+
+ <dt><dfn title="dom-context-2d-textBaseline-alphabetic"><code>alphabetic</code></dfn>
+ <dd>The alphabetic baseline</dd>
+
+ <dt><dfn title="dom-context-2d-textBaseline-ideographic"><code>ideographic</code></dfn>
+ <dd>The ideographic baseline</dd>
+
+ <dt><dfn title="dom-context-2d-textBaseline-bottom"><code>bottom</code></dfn>
+ <dd>The bottom of the em square</dd>
+
+ </dl>
+
+ <p>The <dfn
+ title="dom-context-2d-fillText"><code>fillText()</code></dfn> and
+ <dfn
+ title="dom-context-2d-strokeText"><code>strokeText()</code></dfn>
+ methods take three or four arguments, <var title="">text</var>, <var
+ title="">x</var>, <var title="">y</var>, and optionally <var
+ title="">maxWidth</var>, and render the given <var
+ title="">text</var> at the given (<var title="">x</var>, <var
+ title="">y</var>) coordinates ensuring that the text isn't wider
+ than <var title="">maxWidth</var> if specified, using the current
+ <code title="dom-context-2d-font">font</code>, <code
+ title="dom-context-2d-textAlign">textAlign</code>, and <code
+ title="dom-context-2d-textBaseline">textBaseline</code>
+ values. Specifically, when the methods are called, the user agent
+ must run the following steps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">font</var> be the current font of the
+ browsing context, as given by the <code
+ title="dom-context-2d-font">font</code> attribute.</p></li>
+
+ <li><p>Replace all the <span title="space character">space
+ characters</span> in <var title="">text</var> with U+0020 SPACE
+ characters.</p></li>
+
+ <li><p>Form a hypothetical infinitely wide CSS line box containing
+ a single inline box containing the text <var title="">text</var>,
+ with all the properties at their initial values except the 'font'
+ property of the inline element set to <var title="">font</var> and
+ the 'direction' property of the inline element set to the
+ 'direction' property of the <code>canvas</code> element. <a
+ href="#refsCSS">[CSS]</a></p></li><!-- XXXDIR somehow mention
+ somewhere that if you don't support CSS, dir="" still maps to
+ 'direction' for the purposes of things like this. -->
+
+ <!-- if you insert a step here, make sure to adjust the next step's
+ final words -->
+
+ <li><p>If the <var title="">maxWidth</var> argument was specified
+ and the hypothetical width of the inline box in the hypothetical
+ line box is greater than <var title="">maxWidth</var> CSS pixels,
+ then change <var title="">font</var> to have a more condensed font
+ (if one is available or if a reasonably readable one can be
+ synthesised by applying a horizontal scale factor to the font) or a
+ smaller font, and return to the previous step.</p></li>
+
+ <li>
+
+ <p>Let the <var title="">anchor point</var> be a point on the
+ inline box, determined by the <code
+ title="dom-context-2d-textAlign">textAlign</code> and <code
+ title="dom-context-2d-textBaseline">textBaseline</code> values, as
+ follows:</p>
+
+ <p>Horizontal position:</p>
+
+ <dl>
+
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code></dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">start</code> and the 'direction'<!--XXXDIR--> property
+ on the <code>canvas</code> element has a computed value of
+ 'ltr'</dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">end</code> and the 'direction'<!--XXXDIR--> property
+ on the <code>canvas</code> element has a computed value of
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be the left edge of the inline box.</dd>
+
+
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code></dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">end</code> and the 'direction'<!--XXXDIR--> property
+ on the <code>canvas</code> element has a computed value of
+ 'ltr'</dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">start</code> and the 'direction'<!--XXXDIR--> property
+ on the <code>canvas</code> element has a computed value of
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be the right edge of the inline box.</dd>
+
+
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">center</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be half way between the left and right edges of the
+ inline box.</dd>
+
+ </dl>
+
+ <p>Vertical position:</p>
+
+ <dl>
+
+ <dt> If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-top">top</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the top of the em box of the first available font of the
+ inline box.</dd>
+
+
+ <dt> If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-hanging">hanging</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the hanging baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt> If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-middle">middle</code></dt>
+
+ <dd>Let the <var title="">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 inline box.</dd>
+
+
+ <dt> If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-alphabetic">alphabetic</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the alphabetic baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt> If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-ideographic">ideographic</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the ideographic baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt> If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-bottom">bottom</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the bottom of the em box of the first available font of the
+ inline box.</dd>
+
+ </dl>
+
+ </li>
+
+ <li>
+
+ <p>Paint the hypothetical inline box as the shape given by the
+ text's glyphs, as transformed by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span>, and anchored and sized so that before applying the
+ <span title="dom-context-2d-transformation">current transformation
+ matrix</span>, the <var title="">anchor point</var> is at (<var
+ title="">x</var>, <var title="">y</var>) and each CSS pixel is
+ mapped to one coordinate space unit.</p>
+
+ <p>For <code title="dom-context-2d-fillText">fillText()</code>
+ <code title="dom-context-2d-fillStyle">fillStyle</code> must be
+ applied and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ ignored. For <code
+ title="dom-context-2d-strokeText">strokeText()</code> the reverse
+ holds and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ applied and <code
+ title="dom-context-2d-fillStyle">fillStyle</code> must be
+ ignored.</p>
+
+ <p>Text is painted without affecting the current path, and is
+ subject to <span title="shadows">shadow effects</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, the <span
+ title="clipping region">clipping region</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>.</p>
+
+ </li>
+
+ </ol>
+
+<!--XXXDVT - this is commented out until CSS can get its act together
+enough to actual specify vertical text rendering (how long have we
+been waiting now?)
+
+ <p>The <dfn
+ title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
+ and <dfn
+ title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
+ methods take three or four arguments, <var title="">text</var>, <var
+ title="">x</var>, <var title="">y</var>, and optionally <var
+ title="">maxHeight</var>, and render the given <var
+ title="">text</var> as vertical text at the given (<var
+ title="">x</var>, <var title="">y</var>) coordinates ensuring that
+ the text isn't taller than <var title="">maxHeight</var> if
+ specified, using the current <code
+ title="dom-context-2d-font">font</code> and <code
+ title="dom-context-2d-textAlign">textAlign</code>
+ values. Specifically, when the methods are called, the user agent
+ must run the following steps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">font</var> be the current font of the
+ browsing context, as given by the <code
+ title="dom-context-2d-font">font</code> attribute.</p></li>
+
+ <li><p>Replace all the <span title="space character">space
+ characters</span> in <var title="">text</var> with U+0020 SPACE
+ characters.</p></li>
+
+ <li><p>Form a <em class="big-issue">whatever CSS ends up calling
+ vertical line boxes and inline boxes</em> containing the text <var
+ title="">text</var>, with all the properties at their initial
+ values except the 'font' property of the inline element set to <var
+ title="">font</var> and the 'direction' property of the inline
+ element set to the 'direction' property of the <code>canvas</code>
+ element.</p></li><!- - XXXDIR - ->
+
+ <!- - if you insert a step here, make sure to adjust the next step's
+ final words - ->
+
+ <li><p>If the <var title="">maxHeight</var> argument was specified
+ and the hypothetical height of the <em class="big-issue">box</em>
+ in the hypothetical line box is greater than <var
+ title="">maxHeight</var> CSS pixels, then change <var
+ title="">font</var> to have a more condensed font (if one is
+ available or if a reasonably readable one can be synthesised by
+ applying an appropriate scale factor to the font) or a smaller
+ font, and return to the previous step.</p></li>
+
+ <li>
+
+ <p>Let the <var title="">anchor point</var> be a point on the <em
+ class="big-issue">inline box</var>, determined by the <code
+ title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>
+
+ <p>Vertical position:</p>
+
+ <dl>
+
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">start</code></dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and the 'direction'<!- -XXXDIR- -> property
+ on the <code>canvas</code> element has a computed value of
+ 'ltr'</dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and the 'direction'<!- -XXXDIR- -> property
+ on the <code>canvas</code> element has a computed value of
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the top edge of the <em class="big-issue">inline
+ box</em>.</dd>
+
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">end</code></dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and the 'direction'<!- -XXXDIR- -> property
+ on the <code>canvas</code> element has a computed value of
+ 'ltr'</dt>
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and the 'direction'<!- -XXXDIR- -> property on
+ the <code>canvas</code> element has a computed value of
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the bottom edge of the <em class="big-issue">inline
+ box</em>.</dd>
+
+
+ <dt> If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">center</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be half way between the top and bottom edges of the <em
+ class="big-issue">inline box</em>.</dd>
+
+ </dl>
+
+ <p>Let the horizontal position be half way between the left and
+ right edges of the em box of the first available font of the <em
+ class="big-issue">inline box</em>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Paint the hypothetical inline box as the shape given by the
+ text's glyphs, as transformed by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span>, and anchored and sized so that before applying the
+ <span title="dom-context-2d-transformation">current transformation
+ matrix</span>, the <var title="">anchor point</var> is at (<var
+ title="">x</var>, <var title="">y</var>) and each CSS pixel is
+ mapped to one coordinate space unit.</p>
+
+ <p>For <code
+ title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
+ <code title="dom-context-2d-fillStyle">fillStyle</code> must be
+ applied and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ ignored. For <code
+ title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
+ the reverse holds and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ applied and <code
+ title="dom-context-2d-fillStyle">fillStyle</code> must be
+ ignored.</p>
+
+ <p>Text is painted without affecting the current path, and is
+ subject to <span title="shadows">shadow effects</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, the <span
+ title="clipping region">clipping region</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>.</p>
+
+ </li>
+
+ </ol>
+
+XXXDVT (also check for '- -' bits in the part above) -->
+
+ <p>The <dfn
+ title="dom-context-2d-measureText"><code>measureText()</code></dfn>
+ method takes one argument, <var title="">text</var>. When the method
+ is invoked, the user agent must replace all the <span title="space
+ character">space characters</span> in <var title="">text</var> with
+ U+0020 SPACE characters, and then must form a hypothetical
+ infinitely wide CSS line box containing a single inline box
+ containing the text <var title="">text</var>, with all the
+ properties at their initial values except the 'font' property of the
+ inline element set to the current font of the browsing context, as
+ given by the <code title="dom-context-2d-font">font</code>
+ attribute, and must then return 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. <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>
+
+ <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). If the text is to be rendered and removed, care needs to be
+ taken to replace the entire area of the canvas that the clipping
+ region covers, not just the box given by the em square height and
+ measured text width.</p>
+
+ <!-- XXXv4 Drawing text along a given path -->
+ <!-- XXXv4 Adding text to a path -->
+ <!-- see also: http://www.w3.org/TR/SVG11/text.html#TextpathLayoutRules -->
+ <!-- see also: http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas -->
+
+ <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
+ way of doing multiline layout.</p>
+
+
<h6>Images</h6>
<p>To draw images onto the canvas, the <dfn
@@ -24873,7 +25377,7 @@
support the given protocol, then return a new globally unique
identifier.</p></li>
- <li><p>If the scheme is "<code title="">file:</code>", then the
+ <li><p>If the scheme is "<code title="">file</code>", then the
user agent may return a UA-specific origin.</p></li>
<li><p>Let <var title="">host</var> be the
@@ -29854,7 +30358,7 @@
void <span title="dom-Storage-clear">clear</span>();
};</pre>
- <!-- XXX v2 ideas:
+ <!-- XXXv2 ideas:
a getInfo() method that returns an object that tells you:
- when the key was added
- when the key was last modified
@@ -44345,28 +44849,29 @@
Kristof Zelechovski, Lachlan Hunt, Larry Page, Lars Gunther, Laura
L. Carlson, Laura Wisewell, Laurens Holst, Leif Halvard Silli, Lenny
Domnitser, Léonard Bouchet, Leons Petrazickis, Logan<!-- on
- moz irc -->, Loune, Maciej Stachowiak, Malcolm Rowe, Mark
- Nottingham, Mark Rowe<!--bdash-->, Mark Schenk, Martijn Wargers,
- Martin Atkins, Martin Dürst, Martin Honnen, Mathieu Henri,
- Matthew Mastracci, Matthew Raymond, Matthew Thomas, Mattias Waldau,
- Max Romantschuk, Michael 'Ratt' Iannarelli, Michael A. Nachbaur,
- Michael A. Puls II<!--Shadow2531-->, Michael Carter, Michael
- Gratton, Michael Powers, Michael Smith, Michel Fortin, Michiel van
- der Blonk, Mihai Şucan<!-- from ROBO Design -->, Mike Brown,
- Mike Dierken<!-- S. Mike Dierken -->, Mike Dixon, Mike Schinkel,
- Mike Shaver, Mike Smith, Mikko Rantalainen, Neil Deakin, Neil
- Soiffer, Olav Junker Kjær, Oliver Hunt, Peter Kasting, Philip
- Taylor, Philip TAYLOR<!-- a different one -->, Rachid Finge, Rajas
- Moonka, Ralf Stoltze, Ralph Giles, Raphael Champeimont, Rene
- Saarsoo, Richard Ishida, Rimantas Liubertas, Robert O'Callahan,
- Robert Sayre, Roman Ivanov, S. Mike Dierken, Sam Ruby, Sam Weinig,
- Scott Hess, Sean Knapp, Shaun Inman, Silvia Pfeiffer, Simon Pieters,
- Stefan Haustein, Stephen Ma, Steve Faulkner, Steve Runyon, Steven
- Garrity, Stewart Brodie, Stuart Parmenter, Sunava Dutta, Tantek
- Çelik, Terrence Wood, Thomas Broyer, Thomas O'Connor, Tim
- Altman, Tyler Close, Vladimir Vukićević, Wakaba, Wayne
- Pollock, William Swanson, and Øistein E. Andersen, for their
- useful and substantial comments.</p>
+ moz irc -->, Loune, Maciej Stachowiak, Magnus Kristiansen<!--
+ Dashiva -->, Malcolm Rowe, Mark Nottingham, Mark Rowe<!--bdash-->,
+ Mark Schenk, Martijn Wargers, Martin Atkins, Martin Dürst,
+ Martin Honnen, Masataka Yakura, Mathieu Henri, Matthew Mastracci,
+ Matthew Raymond, Matthew Thomas, Mattias Waldau, Max Romantschuk,
+ Michael 'Ratt' Iannarelli, Michael A. Nachbaur, Michael A. Puls
+ II<!--Shadow2531-->, Michael Carter, Michael Gratton, Michael
+ Powers, Michael Smith, Michel Fortin, Michiel van der Blonk, Mihai
+ Şucan<!-- from ROBO Design -->, Mike Brown, Mike Dierken<!--
+ S. Mike Dierken -->, Mike Dixon, Mike Schinkel, Mike Shaver, Mike
+ Smith, Mikko Rantalainen, Neil Deakin, Neil Soiffer, Olav Junker
+ Kjær, Oliver Hunt, Peter Kasting, Philip Taylor, Philip
+ TAYLOR<!-- a different one -->, Rachid Finge, Rajas Moonka, Ralf
+ Stoltze, Ralph Giles, Raphael Champeimont, Rene Saarsoo, Richard
+ Ishida, Rimantas Liubertas, Robert O'Callahan, Robert Sayre, Roman
+ Ivanov, S. Mike Dierken, Sam Ruby, Sam Weinig, Scott Hess, Sean
+ Knapp, Shaun Inman, Silvia Pfeiffer, Simon Pieters, Stefan Haustein,
+ Stephen Ma, Steve Faulkner, Steve Runyon, Steven Garrity, Stewart
+ Brodie, Stuart Parmenter, Sunava Dutta, Tantek Çelik,
+ Terrence Wood, Thomas Broyer, Thomas O'Connor, Tim Altman, Tyler
+ Close, Vladimir Vukićević, Wakaba, Wayne Pollock,
+ William Swanson, and Øistein E. Andersen, for their useful
+ and substantial comments.</p>
<p>Thanks also to everyone who has ever posted about HTML5 to their
blogs, public mailing lists, or forums, including the <a
More information about the Commit-Watchers
mailing list