[html5] r5456 - [e] (0) give images sizes
whatwg at whatwg.org
whatwg at whatwg.org
Thu Sep 9 16:05:50 PDT 2010
Author: ianh
Date: 2010-09-09 16:05:48 -0700 (Thu, 09 Sep 2010)
New Revision: 5456
Modified:
complete.html
index
source
Log:
[e] (0) give images sizes
Modified: complete.html
===================================================================
--- complete.html 2010-09-09 22:50:33 UTC (rev 5455)
+++ complete.html 2010-09-09 23:05:48 UTC (rev 5456)
@@ -240,7 +240,7 @@
relative to other specifications can be best summed up as
follows:</p>
- <p><img alt="It consists of everything else, above such core technologies as HTTP, URI/IRIs, DOM Core, XML, Unicode, and ECMAScript; below presentation-layer technologies like CSS, XBL, and the NPAPI; and to the side of technologies like Geolocation, SVG, MathML, and XHR." src=images/abstract.png></p>
+ <p><img alt="It consists of everything else, above such core technologies as HTTP, URI/IRIs, DOM Core, XML, Unicode, and ECMAScript; below presentation-layer technologies like CSS, XBL, and the NPAPI; and to the side of technologies like Geolocation, SVG, MathML, and XHR." height=359 src=images/abstract.png width=398></p>
<h2 class="no-num no-toc" id=status>Status of this document</h2>
@@ -19451,7 +19451,7 @@
<p>This might be rendered as:</p>
- <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." src=images/sample-ruby-ja.png></p>
+ <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." height=78 src=images/sample-ruby-ja.png width=171></p>
</div>
@@ -19470,7 +19470,7 @@
<p>This might be rendered as:</p>
- <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." src=images/sample-ruby-bopomofo.png></p>
+ <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." height=100 src=images/sample-ruby-bopomofo.png width=78></p>
</div>
@@ -19491,7 +19491,7 @@
<p>This might be rendered as:</p>
- <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." src=images/sample-ruby-pinyin.png></p>
+ <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." height=79 src=images/sample-ruby-pinyin.png width=173></p>
</div>
@@ -32196,16 +32196,7 @@
attribute's allowed keywords correspond to alignment points in the
font:</p>
- <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>
+ <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." height=300 src=images/baselines.png width=738></p>
<p>The keywords map to these alignment points as follows:</p>
@@ -32585,7 +32576,7 @@
<p>Draws the given image onto the canvas. The arguments are
interpreted as follows:</p>
- <p><img alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle." src=images/drawImage.png></p>
+ <p><img alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle." height=356 src=images/drawImage.png width=356></p>
<p>If the first argument isn't an <code><a href=#the-img-element>img</a></code>,
<code><a href=#the-canvas-element>canvas</a></code>, or <code><a href=#video>video</a></code> element, throws a
@@ -33574,7 +33565,7 @@
<p>Consider an image that looks as follows:</p>
- <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." src=images/sample-usemap.png></p>
+ <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." height=150 src=images/sample-usemap.png width=600></p>
<p>If we wanted just the colored areas to be clickable, we could
do it as follows:</p>
@@ -35237,7 +35228,7 @@
them.</p>
<!-- image source: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/151 -->
- <img alt="" src=images/table-scope-diagram.png><!-- (alt is empty because the diagram is completely described by the previous paragraphs) --></div>
+ <img alt="" height=256 src=images/table-scope-diagram.png width=459><!-- (alt is empty because the diagram is completely described by the previous paragraphs) --></div>
@@ -39347,7 +39338,7 @@
<code>http://www.w3.org/TR/XForms/</code> in the recent past, then
the rendering might look like this:</p>
- <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' src=images/sample-url.png></p>
+ <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' height=134 src=images/sample-url.png width=472></p>
<p>The first four URIs in this sample consist of the four URIs in
the author-specified list that match the text the user has entered,
@@ -40832,7 +40823,7 @@
<p>...might render as:</p>
- <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." src=images/sample-range.png><p>Note how the UA determined the orientation of the control from
+ <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75 src=images/sample-range.png width=49><p>Note how the UA determined the orientation of the control from
the ratio of the style-sheet-specified height and width properties.
The colors were similiarly derived from the style sheet. The tick
marks, however, were derived from the markup. In particular, the
@@ -40854,11 +40845,11 @@
<p>A user agent could display in a variety of ways, for instance:</p>
- <p><img alt="As a dial." src=images/sample-range-2a.png></p>
+ <p><img alt="As a dial." height=57 src=images/sample-range-2a.png width=231></p>
<p>Or, alternatively, for instance:</p>
- <p><img alt="As a long horizontal slider with tick marks." src=images/sample-range-2b.png></p>
+ <p><img alt="As a long horizontal slider with tick marks." height=56 src=images/sample-range-2b.png width=445></p>
<p>The user agent could pick which one to display based on the
dimensions given in the style sheet. This would allow it to
@@ -42243,7 +42234,7 @@
user agent might suggest these two e-mail addresses to the
user.</p>
- <p><img alt="" src=images/sample-email-1.png></p>
+ <p><img alt="" height=140 src=images/sample-email-1.png width=500></p>
<p>The page could also link in the user's contacts database from the site:</p>
@@ -42262,7 +42253,7 @@
earlier, as well as the "astrophy" and "astronomy" values given in
the <code><a href=#the-datalist-element>datalist</a></code> element.</p>
- <p><img alt="" src=images/sample-email-2.png></p>
+ <p><img alt="" height=171 src=images/sample-email-2.png width=500></p>
</div>
@@ -45153,7 +45144,7 @@
</li>
</ul></pre>
<p>Might be rendered as follows:</p>
- <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." src=images/sample-meter.png></p>
+ <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." height=178 src=images/sample-meter.png width=332></p>
</div>
<p>User agents <span class=impl>may</span> combine the value of
@@ -47067,7 +47058,7 @@
in a list to allow the user to collapse a set of fields down to a
small set of headings, with the ability to open each one.</p>
- <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></p>
+ <p class=details-example><img alt="" height=611 src=images/sample-details-1.png width=345><img alt="" height=666 src=images/sample-details-2.png width=345></p>
<p>In these examples, the summary really just summarises what the
controls can change, and not the actual values, which is less than
@@ -50022,7 +50013,7 @@
<p>In a supporting user agent, this might look like this:</p>
- <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." src=images/sample-toolbar-1.png></p>
+ <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height=101 src=images/sample-toolbar-1.png width=303></p>
<p>In a legacy user agent, the above would look like a bulleted list
with three items, the first of which has four buttons, the second of
@@ -66240,7 +66231,7 @@
<p>The <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code>
method could display a modal dialog box:</p>
- <p><img alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the "kittens.example.org" domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'." src=images/sample-content-handler-registration.png></p>
+ <p><img alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the "kittens.example.org" domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'." height=374 src=images/sample-content-handler-registration.png width=534></p>
<p>In this dialog box, "Kittens at work" is the title of the page
that invoked the method, "http://kittens.example.org/" is the URL of
@@ -66258,7 +66249,7 @@
"application/x-meowmeow" <a href=#mime-type>MIME type</a>, then it might
display a dialog as follows:</p>
- <p><img alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the "Kittens-at-work displayer" application at "kittens.example.org"', with a checkbox labeld 'Always do this for resources using the "application/x-meowmeow" type in future.', and with two buttons, 'Ok' and 'Cancel'." src=images/sample-content-handler.png></p>
+ <p><img alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the "Kittens-at-work displayer" application at "kittens.example.org"', with a checkbox labeld 'Always do this for resources using the "application/x-meowmeow" type in future.', and with two buttons, 'Ok' and 'Cancel'." height=428 src=images/sample-content-handler.png width=577></p>
<p>In this dialog, the third option is the one that was primed by
the site registering itself earlier.</p>
@@ -76063,7 +76054,7 @@
insertion">it can also come from script</a> running in the user
agent, e.g. using the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> API.</p>
- <p><img alt="" src=images/parsing-model-overview.png></p>
+ <p><img alt="" height=554 src=images/parsing-model-overview.png width=427></p>
<p id=nestedParsing>There is only one set of states for the
tokenizer stage and the tree construction stage, but the tree
Modified: index
===================================================================
--- index 2010-09-09 22:50:33 UTC (rev 5455)
+++ index 2010-09-09 23:05:48 UTC (rev 5456)
@@ -19428,7 +19428,7 @@
<p>This might be rendered as:</p>
- <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." src=images/sample-ruby-ja.png></p>
+ <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." height=78 src=images/sample-ruby-ja.png width=171></p>
</div>
@@ -19447,7 +19447,7 @@
<p>This might be rendered as:</p>
- <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." src=images/sample-ruby-bopomofo.png></p>
+ <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." height=100 src=images/sample-ruby-bopomofo.png width=78></p>
</div>
@@ -19468,7 +19468,7 @@
<p>This might be rendered as:</p>
- <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." src=images/sample-ruby-pinyin.png></p>
+ <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." height=79 src=images/sample-ruby-pinyin.png width=173></p>
</div>
@@ -32176,16 +32176,7 @@
attribute's allowed keywords correspond to alignment points in the
font:</p>
- <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>
+ <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." height=300 src=images/baselines.png width=738></p>
<p>The keywords map to these alignment points as follows:</p>
@@ -32565,7 +32556,7 @@
<p>Draws the given image onto the canvas. The arguments are
interpreted as follows:</p>
- <p><img alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle." src=images/drawImage.png></p>
+ <p><img alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle." height=356 src=images/drawImage.png width=356></p>
<p>If the first argument isn't an <code><a href=#the-img-element>img</a></code>,
<code><a href=#the-canvas-element>canvas</a></code>, or <code><a href=#video>video</a></code> element, throws a
@@ -33554,7 +33545,7 @@
<p>Consider an image that looks as follows:</p>
- <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." src=images/sample-usemap.png></p>
+ <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." height=150 src=images/sample-usemap.png width=600></p>
<p>If we wanted just the colored areas to be clickable, we could
do it as follows:</p>
@@ -35217,7 +35208,7 @@
them.</p>
<!-- image source: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/151 -->
- <img alt="" src=images/table-scope-diagram.png><!-- (alt is empty because the diagram is completely described by the previous paragraphs) --></div>
+ <img alt="" height=256 src=images/table-scope-diagram.png width=459><!-- (alt is empty because the diagram is completely described by the previous paragraphs) --></div>
@@ -39327,7 +39318,7 @@
<code>http://www.w3.org/TR/XForms/</code> in the recent past, then
the rendering might look like this:</p>
- <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' src=images/sample-url.png></p>
+ <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' height=134 src=images/sample-url.png width=472></p>
<p>The first four URIs in this sample consist of the four URIs in
the author-specified list that match the text the user has entered,
@@ -40812,7 +40803,7 @@
<p>...might render as:</p>
- <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." src=images/sample-range.png><p>Note how the UA determined the orientation of the control from
+ <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75 src=images/sample-range.png width=49><p>Note how the UA determined the orientation of the control from
the ratio of the style-sheet-specified height and width properties.
The colors were similiarly derived from the style sheet. The tick
marks, however, were derived from the markup. In particular, the
@@ -40834,11 +40825,11 @@
<p>A user agent could display in a variety of ways, for instance:</p>
- <p><img alt="As a dial." src=images/sample-range-2a.png></p>
+ <p><img alt="As a dial." height=57 src=images/sample-range-2a.png width=231></p>
<p>Or, alternatively, for instance:</p>
- <p><img alt="As a long horizontal slider with tick marks." src=images/sample-range-2b.png></p>
+ <p><img alt="As a long horizontal slider with tick marks." height=56 src=images/sample-range-2b.png width=445></p>
<p>The user agent could pick which one to display based on the
dimensions given in the style sheet. This would allow it to
@@ -42223,7 +42214,7 @@
user agent might suggest these two e-mail addresses to the
user.</p>
- <p><img alt="" src=images/sample-email-1.png></p>
+ <p><img alt="" height=140 src=images/sample-email-1.png width=500></p>
<p>The page could also link in the user's contacts database from the site:</p>
@@ -42242,7 +42233,7 @@
earlier, as well as the "astrophy" and "astronomy" values given in
the <code><a href=#the-datalist-element>datalist</a></code> element.</p>
- <p><img alt="" src=images/sample-email-2.png></p>
+ <p><img alt="" height=171 src=images/sample-email-2.png width=500></p>
</div>
@@ -45133,7 +45124,7 @@
</li>
</ul></pre>
<p>Might be rendered as follows:</p>
- <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." src=images/sample-meter.png></p>
+ <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." height=178 src=images/sample-meter.png width=332></p>
</div>
<p>User agents <span class=impl>may</span> combine the value of
@@ -47047,7 +47038,7 @@
in a list to allow the user to collapse a set of fields down to a
small set of headings, with the ability to open each one.</p>
- <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></p>
+ <p class=details-example><img alt="" height=611 src=images/sample-details-1.png width=345><img alt="" height=666 src=images/sample-details-2.png width=345></p>
<p>In these examples, the summary really just summarises what the
controls can change, and not the actual values, which is less than
@@ -50002,7 +49993,7 @@
<p>In a supporting user agent, this might look like this:</p>
- <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." src=images/sample-toolbar-1.png></p>
+ <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height=101 src=images/sample-toolbar-1.png width=303></p>
<p>In a legacy user agent, the above would look like a bulleted list
with three items, the first of which has four buttons, the second of
@@ -66240,7 +66231,7 @@
<p>The <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code>
method could display a modal dialog box:</p>
- <p><img alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the "kittens.example.org" domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'." src=images/sample-content-handler-registration.png></p>
+ <p><img alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the "kittens.example.org" domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'." height=374 src=images/sample-content-handler-registration.png width=534></p>
<p>In this dialog box, "Kittens at work" is the title of the page
that invoked the method, "http://kittens.example.org/" is the URL of
@@ -66258,7 +66249,7 @@
"application/x-meowmeow" <a href=#mime-type>MIME type</a>, then it might
display a dialog as follows:</p>
- <p><img alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the "Kittens-at-work displayer" application at "kittens.example.org"', with a checkbox labeld 'Always do this for resources using the "application/x-meowmeow" type in future.', and with two buttons, 'Ok' and 'Cancel'." src=images/sample-content-handler.png></p>
+ <p><img alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the "Kittens-at-work displayer" application at "kittens.example.org"', with a checkbox labeld 'Always do this for resources using the "application/x-meowmeow" type in future.', and with two buttons, 'Ok' and 'Cancel'." height=428 src=images/sample-content-handler.png width=577></p>
<p>In this dialog, the third option is the one that was primed by
the site registering itself earlier.</p>
@@ -71981,7 +71972,7 @@
insertion">it can also come from script</a> running in the user
agent, e.g. using the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> API.</p>
- <p><img alt="" src=images/parsing-model-overview.png></p>
+ <p><img alt="" height=554 src=images/parsing-model-overview.png width=427></p>
<p id=nestedParsing>There is only one set of states for the
tokenizer stage and the tree construction stage, but the tree
Modified: source
===================================================================
--- source 2010-09-09 22:50:33 UTC (rev 5455)
+++ source 2010-09-09 23:05:48 UTC (rev 5456)
@@ -20708,7 +20708,7 @@
<p>This might be rendered as:</p>
- <p><img src="images/sample-ruby-ja.png"
+ <p><img src="images/sample-ruby-ja.png" width="171" height="78"
alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it."></p>
</div>
@@ -20728,7 +20728,7 @@
<p>This might be rendered as:</p>
- <p><img src="images/sample-ruby-bopomofo.png"
+ <p><img src="images/sample-ruby-bopomofo.png" width="78" height="100"
alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it."></p>
</div>
@@ -20750,7 +20750,7 @@
<p>This might be rendered as:</p>
- <p><img src="images/sample-ruby-pinyin.png"
+ <p><img src="images/sample-ruby-pinyin.png" width="173" height="79"
alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it."></p>
</div>
@@ -35471,16 +35471,7 @@
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><img src="images/baselines.png" width="738" height="300" 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>
@@ -35940,7 +35931,7 @@
<p>Draws the given image onto the canvas. The arguments are
interpreted as follows:</p>
- <p><img src="images/drawImage.png" alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle."></p>
+ <p><img src="images/drawImage.png" width="356" height="356" alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle."></p>
<p>If the first argument isn't an <code>img</code>,
<code>canvas</code>, or <code>video</code> element, throws a
@@ -37136,7 +37127,7 @@
<p>Consider an image that looks as follows:</p>
- <p><img src="images/sample-usemap.png" alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."></p>
+ <p><img src="images/sample-usemap.png" width="600" height="150" alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."></p>
<p>If we wanted just the colored areas to be clickable, we could
do it as follows:</p>
@@ -39024,7 +39015,7 @@
them.</p>
<!-- image source: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/151 -->
- <img src="images/table-scope-diagram.png" alt=""><!-- (alt is empty because the diagram is completely described by the previous paragraphs) -->
+ <img src="images/table-scope-diagram.png" width="459" height="256" alt=""><!-- (alt is empty because the diagram is completely described by the previous paragraphs) -->
</div>
@@ -43851,7 +43842,7 @@
<code>http://www.w3.org/TR/XForms/</code> in the recent past, then
the rendering might look like this:</p>
- <p><img src="images/sample-url.png" alt="A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available."></p>
+ <p><img src="images/sample-url.png" width="472" height="134" alt="A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available."></p>
<p>The first four URIs in this sample consist of the four URIs in
the author-specified list that match the text the user has entered,
@@ -45517,7 +45508,7 @@
<p>...might render as:</p>
- <p><img src="images/sample-range.png" alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint.">
+ <p><img src="images/sample-range.png" width="49" height="75" alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint.">
<p>Note how the UA determined the orientation of the control from
the ratio of the style-sheet-specified height and width properties.
@@ -45541,11 +45532,11 @@
<p>A user agent could display in a variety of ways, for instance:</p>
- <p><img src="images/sample-range-2a.png" alt="As a dial."></p>
+ <p><img src="images/sample-range-2a.png" width="231" height="57" alt="As a dial."></p>
<p>Or, alternatively, for instance:</p>
- <p><img src="images/sample-range-2b.png" alt="As a long horizontal slider with tick marks."></p>
+ <p><img src="images/sample-range-2b.png" width="445" height="56" alt="As a long horizontal slider with tick marks."></p>
<p>The user agent could pick which one to display based on the
dimensions given in the style sheet. This would allow it to
@@ -47115,7 +47106,7 @@
user agent might suggest these two e-mail addresses to the
user.</p>
- <p><img src="images/sample-email-1.png" alt=""></p>
+ <p><img src="images/sample-email-1.png" width="500" height="140" alt=""></p>
<p>The page could also link in the user's contacts database from the site:</p>
@@ -47134,7 +47125,7 @@
earlier, as well as the "astrophy" and "astronomy" values given in
the <code>datalist</code> element.</p>
- <p><img src="images/sample-email-2.png" alt=""></p>
+ <p><img src="images/sample-email-2.png" width="500" height="171" alt=""></p>
</div>
@@ -50604,7 +50595,7 @@
</li>
</ul></pre>
<p>Might be rendered as follows:</p>
- <p><img src="images/sample-meter.png" alt="With the <meter> elements rendered as inline green bars of varying lengths."></p>
+ <p><img src="images/sample-meter.png" width="332" height="178" alt="With the <meter> elements rendered as inline green bars of varying lengths."></p>
</div>
<p>User agents <span class="impl">may</span> combine the value of
@@ -52917,7 +52908,7 @@
in a list to allow the user to collapse a set of fields down to a
small set of headings, with the ability to open each one.</p>
- <p class="details-example"><img src="images/sample-details-1.png" alt=""><img src="images/sample-details-2.png" alt=""></p>
+ <p class="details-example"><img src="images/sample-details-1.png" width="345" height="611" alt=""><img src="images/sample-details-2.png" width="345" height="666" alt=""></p>
<p>In these examples, the summary really just summarises what the
controls can change, and not the actual values, which is less than
@@ -55928,7 +55919,7 @@
<p>In a supporting user agent, this might look like this:</p>
- <p><img src="images/sample-toolbar-1.png" alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'."></p>
+ <p><img src="images/sample-toolbar-1.png" width="303" height="101" alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'."></p>
<p>In a legacy user agent, the above would look like a bulleted list
with three items, the first of which has four buttons, the second of
@@ -75059,7 +75050,7 @@
title="dom-navigator-registerContentHandler">registerContentHandler()</code>
method could display a modal dialog box:</p>
- <p><img src="images/sample-content-handler-registration.png" alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the "kittens.example.org" domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'."></p>
+ <p><img src="images/sample-content-handler-registration.png" width="534" height="374" alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the "kittens.example.org" domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'."></p>
<p>In this dialog box, "Kittens at work" is the title of the page
that invoked the method, "http://kittens.example.org/" is the URL of
@@ -75079,7 +75070,7 @@
"application/x-meowmeow" <span>MIME type</span>, then it might
display a dialog as follows:</p>
- <p><img src="images/sample-content-handler.png" alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the "Kittens-at-work displayer" application at "kittens.example.org"', with a checkbox labeld 'Always do this for resources using the "application/x-meowmeow" type in future.', and with two buttons, 'Ok' and 'Cancel'."></p>
+ <p><img src="images/sample-content-handler.png" width="577" height="428" alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the "Kittens-at-work displayer" application at "kittens.example.org"', with a checkbox labeld 'Always do this for resources using the "application/x-meowmeow" type in future.', and with two buttons, 'Ok' and 'Cancel'."></p>
<p>In this dialog, the third option is the one that was primed by
the site registering itself earlier.</p>
@@ -86824,7 +86815,7 @@
agent, e.g. using the <code
title="dom-document-write">document.write()</code> API.</p>
- <p><img src="images/parsing-model-overview.png" alt=""></p>
+ <p><img src="images/parsing-model-overview.png" width="427" height="554" alt=""></p>
<p id="nestedParsing">There is only one set of states for the
tokenizer stage and the tree construction stage, but the tree
More information about the Commit-Watchers
mailing list