Skip to content

Commit

Permalink
[e] (0) give images sizes
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@5456 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Sep 9, 2010
1 parent bc69304 commit e6897f2
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 85 deletions.
49 changes: 20 additions & 29 deletions complete.html
View file
Expand Up @@ -240,7 +240,7 @@ <h2 class="no-num no-toc">Draft Standard &mdash; 9 September 2010</h2>
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>
Expand Down Expand Up @@ -19451,7 +19451,7 @@ <h4 id=the-ruby-element><span class=secno>4.6.18 </span>The <dfn><code>ruby</cod

<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>

Expand All @@ -19470,7 +19470,7 @@ <h4 id=the-ruby-element><span class=secno>4.6.18 </span>The <dfn><code>ruby</cod

<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>

Expand All @@ -19491,7 +19491,7 @@ <h4 id=the-ruby-element><span class=secno>4.6.18 </span>The <dfn><code>ruby</cod

<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>

Expand Down Expand Up @@ -32196,16 +32196,7 @@ <h6 id=text-0><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -
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 &#2310; 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 &Aacute;, &yuml;,
f, and &Omega; are anchored, the ideographic baseline is
where glyphs like &#31169; and &#36948; 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 &#2310; 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 &Aacute;, &yuml;, f, and &Omega; are anchored, the ideographic baseline is where glyphs like &#31169; and &#36948; 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>

Expand Down Expand Up @@ -32585,7 +32576,7 @@ <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>
<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
Expand Down Expand Up @@ -33574,7 +33565,7 @@ <h5 id=authoring><span class=secno>4.8.14.1 </span>Authoring</h5>

<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>
Expand Down Expand Up @@ -35237,7 +35228,7 @@ <h4 id=the-th-element><span class=secno>4.9.10 </span>The <dfn><code>th</code></
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>



Expand Down Expand Up @@ -39347,7 +39338,7 @@ <h6 id=url-state><span class=secno>4.10.7.1.4 </span><dfn title=attr-input-type-
<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,
Expand Down Expand Up @@ -40832,7 +40823,7 @@ <h6 id=range-state><span class=secno>4.10.7.1.14 </span><dfn title=attr-input-ty

<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
Expand All @@ -40854,11 +40845,11 @@ <h6 id=range-state><span class=secno>4.10.7.1.14 </span><dfn title=attr-input-ty

<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
Expand Down Expand Up @@ -42243,7 +42234,7 @@ <h6 id=the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code titl
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>

Expand All @@ -42262,7 +42253,7 @@ <h6 id=the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code titl
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>

Expand Down Expand Up @@ -45153,7 +45144,7 @@ <h4 id=the-meter-element><span class=secno>4.10.17 </span>The <dfn><code>meter</
&lt;/li&gt;
&lt;/ul&gt;</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
Expand Down Expand Up @@ -47067,7 +47058,7 @@ <h4 id=the-details-element><span class=secno>4.11.1 </span>The <dfn><code>detail
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
Expand Down Expand Up @@ -50022,7 +50013,7 @@ <h5 id=menus-intro><span class=secno>4.11.4.1 </span>Introduction</h5>

<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
Expand Down Expand Up @@ -66240,7 +66231,7 @@ <h5 id=sample-handler-impl><span class=secno>7.4.2.2 </span>Sample user interfac
<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 &quot;kittens.example.org&quot; 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 &quot;kittens.example.org&quot; 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
Expand All @@ -66258,7 +66249,7 @@ <h5 id=sample-handler-impl><span class=secno>7.4.2.2 </span>Sample user interfac
"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 &quot;Kittens-at-work displayer&quot; application at &quot;kittens.example.org&quot;', with a checkbox labeld 'Always do this for resources using the &quot;application/x-meowmeow&quot; 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 &quot;Kittens-at-work displayer&quot; application at &quot;kittens.example.org&quot;', with a checkbox labeld 'Always do this for resources using the &quot;application/x-meowmeow&quot; 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>
Expand Down Expand Up @@ -76063,7 +76054,7 @@ <h4 id=overview-of-the-parsing-model><span class=secno>12.2.1 </span>Overview of
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
Expand Down

0 comments on commit e6897f2

Please sign in to comment.