[html5] r4682 - [e] (0) Move <figure> to the grouping section. Fixing http://www.w3.org/Bugs/Pub [...]
whatwg at whatwg.org
whatwg at whatwg.org
Sat Feb 6 02:50:46 PST 2010
Author: ianh
Date: 2010-02-06 02:50:44 -0800 (Sat, 06 Feb 2010)
New Revision: 4682
Modified:
complete.html
index
source
Log:
[e] (0) Move <figure> to the grouping section.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8726
Modified: complete.html
===================================================================
--- complete.html 2010-02-06 10:38:43 UTC (rev 4681)
+++ complete.html 2010-02-06 10:50:44 UTC (rev 4682)
@@ -367,7 +367,9 @@
<li><a href=#the-dl-element><span class=secno>4.5.9 </span>The <code>dl</code> element</a></li>
<li><a href=#the-dt-element><span class=secno>4.5.10 </span>The <code>dt</code> element</a></li>
<li><a href=#the-dd-element><span class=secno>4.5.11 </span>The <code>dd</code> element</a></li>
- <li><a href=#the-div-element><span class=secno>4.5.12 </span>The <code>div</code> element</a></ol></li>
+ <li><a href=#the-figure-element><span class=secno>4.5.12 </span>The <code>figure</code> element</a></li>
+ <li><a href=#the-figcaption-element><span class=secno>4.5.13 </span>The <code>figcaption</code> element</a></li>
+ <li><a href=#the-div-element><span class=secno>4.5.14 </span>The <code>div</code> element</a></ol></li>
<li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
<ol>
<li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
@@ -402,77 +404,75 @@
<li><a href=#edits-and-lists><span class=secno>4.7.5 </span>Edits and lists</a></ol></li>
<li><a href=#embedded-content-1><span class=secno>4.8 </span>Embedded content</a>
<ol>
- <li><a href=#the-figure-element><span class=secno>4.8.1 </span>The <code>figure</code> element</a></li>
- <li><a href=#the-figcaption-element><span class=secno>4.8.2 </span>The <code>figcaption</code> element</a></li>
- <li><a href=#the-img-element><span class=secno>4.8.3 </span>The <code>img</code> element</a>
+ <li><a href=#the-img-element><span class=secno>4.8.1 </span>The <code>img</code> element</a>
<ol>
- <li><a href=#alt><span class=secno>4.8.3.1 </span>Requirements for providing text to act as an alternative for images</a>
+ <li><a href=#alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</a>
<ol>
- <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.3.1.1 </span>A link or button containing nothing but the image</a></li>
- <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.3.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
- <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.3.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
- <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.3.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
- <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.3.1.5 </span>A graphical representation of some of the surrounding text</a></li>
- <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.3.1.6 </span>A purely decorative image that doesn't add any information</a></li>
- <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.3.1.7 </span>A group of images that form a single larger picture with no links</a></li>
- <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.3.1.8 </span>A group of images that form a single larger picture with links</a></li>
- <li><a href=#a-key-part-of-the-content><span class=secno>4.8.3.1.9 </span>A key part of the content</a></li>
- <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.3.1.10 </span>An image not intended for the user</a></li>
- <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.3.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
- <li><a href=#general-guidelines><span class=secno>4.8.3.1.12 </span>General guidelines</a></li>
- <li><a href=#guidance-for-markup-generators><span class=secno>4.8.3.1.13 </span>Guidance for markup generators</a></li>
- <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.3.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
- <li><a href=#the-iframe-element><span class=secno>4.8.4 </span>The <code>iframe</code> element</a></li>
- <li><a href=#the-embed-element><span class=secno>4.8.5 </span>The <code>embed</code> element</a></li>
- <li><a href=#the-object-element><span class=secno>4.8.6 </span>The <code>object</code> element</a></li>
- <li><a href=#the-param-element><span class=secno>4.8.7 </span>The <code>param</code> element</a></li>
- <li><a href=#video><span class=secno>4.8.8 </span>The <code>video</code> element</a></li>
- <li><a href=#audio><span class=secno>4.8.9 </span>The <code>audio</code> element</a></li>
- <li><a href=#the-source-element><span class=secno>4.8.10 </span>The <code>source</code> element</a></li>
- <li><a href=#media-elements><span class=secno>4.8.11 </span>Media elements</a>
+ <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</a></li>
+ <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
+ <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
+ <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
+ <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</a></li>
+ <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</a></li>
+ <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</a></li>
+ <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</a></li>
+ <li><a href=#a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</a></li>
+ <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</a></li>
+ <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
+ <li><a href=#general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</a></li>
+ <li><a href=#guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</a></li>
+ <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
+ <li><a href=#the-iframe-element><span class=secno>4.8.2 </span>The <code>iframe</code> element</a></li>
+ <li><a href=#the-embed-element><span class=secno>4.8.3 </span>The <code>embed</code> element</a></li>
+ <li><a href=#the-object-element><span class=secno>4.8.4 </span>The <code>object</code> element</a></li>
+ <li><a href=#the-param-element><span class=secno>4.8.5 </span>The <code>param</code> element</a></li>
+ <li><a href=#video><span class=secno>4.8.6 </span>The <code>video</code> element</a></li>
+ <li><a href=#audio><span class=secno>4.8.7 </span>The <code>audio</code> element</a></li>
+ <li><a href=#the-source-element><span class=secno>4.8.8 </span>The <code>source</code> element</a></li>
+ <li><a href=#media-elements><span class=secno>4.8.9 </span>Media elements</a>
<ol>
- <li><a href=#error-codes><span class=secno>4.8.11.1 </span>Error codes</a></li>
- <li><a href=#location-of-the-media-resource><span class=secno>4.8.11.2 </span>Location of the media resource</a></li>
- <li><a href=#mime-types><span class=secno>4.8.11.3 </span>MIME types</a></li>
- <li><a href=#network-states><span class=secno>4.8.11.4 </span>Network states</a></li>
- <li><a href=#loading-the-media-resource><span class=secno>4.8.11.5 </span>Loading the media resource</a></li>
- <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.11.6 </span>Offsets into the media resource</a></li>
- <li><a href=#the-ready-states><span class=secno>4.8.11.7 </span>The ready states</a></li>
- <li><a href=#playing-the-media-resource><span class=secno>4.8.11.8 </span>Playing the media resource</a></li>
- <li><a href=#seeking><span class=secno>4.8.11.9 </span>Seeking</a></li>
- <li><a href=#user-interface><span class=secno>4.8.11.10 </span>User interface</a></li>
- <li><a href=#time-ranges><span class=secno>4.8.11.11 </span>Time ranges</a></li>
- <li><a href=#mediaevents><span class=secno>4.8.11.12 </span>Event summary</a></li>
- <li><a href=#security-and-privacy-considerations><span class=secno>4.8.11.13 </span>Security and privacy considerations</a></ol></li>
- <li><a href=#the-canvas-element><span class=secno>4.8.12 </span>The <code>canvas</code> element</a>
+ <li><a href=#error-codes><span class=secno>4.8.9.1 </span>Error codes</a></li>
+ <li><a href=#location-of-the-media-resource><span class=secno>4.8.9.2 </span>Location of the media resource</a></li>
+ <li><a href=#mime-types><span class=secno>4.8.9.3 </span>MIME types</a></li>
+ <li><a href=#network-states><span class=secno>4.8.9.4 </span>Network states</a></li>
+ <li><a href=#loading-the-media-resource><span class=secno>4.8.9.5 </span>Loading the media resource</a></li>
+ <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.9.6 </span>Offsets into the media resource</a></li>
+ <li><a href=#the-ready-states><span class=secno>4.8.9.7 </span>The ready states</a></li>
+ <li><a href=#playing-the-media-resource><span class=secno>4.8.9.8 </span>Playing the media resource</a></li>
+ <li><a href=#seeking><span class=secno>4.8.9.9 </span>Seeking</a></li>
+ <li><a href=#user-interface><span class=secno>4.8.9.10 </span>User interface</a></li>
+ <li><a href=#time-ranges><span class=secno>4.8.9.11 </span>Time ranges</a></li>
+ <li><a href=#mediaevents><span class=secno>4.8.9.12 </span>Event summary</a></li>
+ <li><a href=#security-and-privacy-considerations><span class=secno>4.8.9.13 </span>Security and privacy considerations</a></ol></li>
+ <li><a href=#the-canvas-element><span class=secno>4.8.10 </span>The <code>canvas</code> element</a>
<ol>
- <li><a href=#2dcontext><span class=secno>4.8.12.1 </span>The 2D context</a>
+ <li><a href=#2dcontext><span class=secno>4.8.10.1 </span>The 2D context</a>
<ol>
- <li><a href=#the-canvas-state><span class=secno>4.8.12.1.1 </span>The canvas state</a></li>
- <li><a href=#transformations><span class=secno>4.8.12.1.2 </span>Transformations</a></li>
- <li><a href=#compositing><span class=secno>4.8.12.1.3 </span>Compositing</a></li>
- <li><a href=#colors-and-styles><span class=secno>4.8.12.1.4 </span>Colors and styles</a></li>
- <li><a href=#line-styles><span class=secno>4.8.12.1.5 </span>Line styles</a></li>
- <li><a href=#shadows><span class=secno>4.8.12.1.6 </span>Shadows</a></li>
- <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.12.1.7 </span>Simple shapes (rectangles)</a></li>
- <li><a href=#complex-shapes-(paths)><span class=secno>4.8.12.1.8 </span>Complex shapes (paths)</a></li>
- <li><a href=#focus-management-0><span class=secno>4.8.12.1.9 </span>Focus management</a></li>
- <li><a href=#text><span class=secno>4.8.12.1.10 </span>Text</a></li>
- <li><a href=#images><span class=secno>4.8.12.1.11 </span>Images</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.12.1.12 </span>Pixel manipulation</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.12.1.13 </span>Drawing model</a></li>
- <li><a href=#examples><span class=secno>4.8.12.1.14 </span>Examples</a></ol></li>
- <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.12.2 </span>Color spaces and color correction</a></li>
- <li><a href=#security-with-canvas-elements><span class=secno>4.8.12.3 </span>Security with <code>canvas</code> elements</a></ol></li>
- <li><a href=#the-map-element><span class=secno>4.8.13 </span>The <code>map</code> element</a></li>
- <li><a href=#the-area-element><span class=secno>4.8.14 </span>The <code>area</code> element</a></li>
- <li><a href=#image-maps><span class=secno>4.8.15 </span>Image maps</a>
+ <li><a href=#the-canvas-state><span class=secno>4.8.10.1.1 </span>The canvas state</a></li>
+ <li><a href=#transformations><span class=secno>4.8.10.1.2 </span>Transformations</a></li>
+ <li><a href=#compositing><span class=secno>4.8.10.1.3 </span>Compositing</a></li>
+ <li><a href=#colors-and-styles><span class=secno>4.8.10.1.4 </span>Colors and styles</a></li>
+ <li><a href=#line-styles><span class=secno>4.8.10.1.5 </span>Line styles</a></li>
+ <li><a href=#shadows><span class=secno>4.8.10.1.6 </span>Shadows</a></li>
+ <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.10.1.7 </span>Simple shapes (rectangles)</a></li>
+ <li><a href=#complex-shapes-(paths)><span class=secno>4.8.10.1.8 </span>Complex shapes (paths)</a></li>
+ <li><a href=#focus-management-0><span class=secno>4.8.10.1.9 </span>Focus management</a></li>
+ <li><a href=#text><span class=secno>4.8.10.1.10 </span>Text</a></li>
+ <li><a href=#images><span class=secno>4.8.10.1.11 </span>Images</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.10.1.12 </span>Pixel manipulation</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.10.1.13 </span>Drawing model</a></li>
+ <li><a href=#examples><span class=secno>4.8.10.1.14 </span>Examples</a></ol></li>
+ <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.10.2 </span>Color spaces and color correction</a></li>
+ <li><a href=#security-with-canvas-elements><span class=secno>4.8.10.3 </span>Security with <code>canvas</code> elements</a></ol></li>
+ <li><a href=#the-map-element><span class=secno>4.8.11 </span>The <code>map</code> element</a></li>
+ <li><a href=#the-area-element><span class=secno>4.8.12 </span>The <code>area</code> element</a></li>
+ <li><a href=#image-maps><span class=secno>4.8.13 </span>Image maps</a>
<ol>
- <li><a href=#authoring><span class=secno>4.8.15.1 </span>Authoring</a></li>
- <li><a href=#processing-model><span class=secno>4.8.15.2 </span>Processing model</a></ol></li>
- <li><a href=#mathml><span class=secno>4.8.16 </span>MathML</a></li>
- <li><a href=#svg-0><span class=secno>4.8.17 </span>SVG</a></li>
- <li><a href=#dimension-attributes><span class=secno>4.8.18 </span>Dimension attributes</a></ol></li>
+ <li><a href=#authoring><span class=secno>4.8.13.1 </span>Authoring</a></li>
+ <li><a href=#processing-model><span class=secno>4.8.13.2 </span>Processing model</a></ol></li>
+ <li><a href=#mathml><span class=secno>4.8.14 </span>MathML</a></li>
+ <li><a href=#svg-0><span class=secno>4.8.15 </span>SVG</a></li>
+ <li><a href=#dimension-attributes><span class=secno>4.8.16 </span>Dimension attributes</a></ol></li>
<li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
<ol>
<li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
@@ -15688,11 +15688,158 @@
</div>
+ <h4 id=the-figure-element><span class=secno>4.5.12 </span>The <dfn><code>figure</code></dfn> element</h4>
+ <dl class=element><dt>Categories</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd>Either: One <code><a href=#the-figcaption-element>figcaption</a></code> element followed by <a href=#phrasing-content>phrasing content</a>.</dd>
+ <dd>Or: <a href=#phrasing-content>Phrasing content</a> followed by one <code><a href=#the-figcaption-element>figcaption</a></code> element.</dd>
+ <dd>Or: <a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><!-- v2: Add a <credit> element for photo credits --><p>The <code><a href=#the-figure-element>figure</a></code> element <a href=#represents>represents</a> some
+ <a href=#flow-content>flow content</a>, optionally with a caption, that is
+ self-contained and is typically referenced as a single unit from the
+ main flow of the document.</p>
- <h4 id=the-div-element><span class=secno>4.5.12 </span>The <dfn><code>div</code></dfn> element</h4>
+ <p>The element can thus be used to annotate illustrations, diagrams,
+ photos, code listings, etc, that are referred to from the main
+ content of the document, but that could, without affecting the flow
+ of the document, be moved away from that primary content, e.g. to
+ the side of the page, to dedicated pages, or to an appendix.</p>
+ <p>The <span class=impl>first</span> <code><a href=#the-figcaption-element>figcaption</a></code>
+ element child of the element, if any, represents the caption of the
+ <code><a href=#the-figure-element>figure</a></code> element's contents. If there is no child
+ <code><a href=#the-figcaption-element>figcaption</a></code> element, then there is no caption.</p>
+
+ <div class=example>
+
+ <p>This example shows the <code><a href=#the-figure-element>figure</a></code> element to mark up a
+ code listing.</p>
+
+ <pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
+API declaration.</p>
+<figure id="l4">
+ <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
+ <pre><code>interface PrimaryCore {
+ boolean verifyDataLine();
+ void sendData(in sequence<byte> data);
+ void initSelfDestruct();
+}</code></pre>
+</figure>
+<p>The API is designed to use UTF-8.</p></pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>Here we see a <code><a href=#the-figure-element>figure</a></code> element to mark up a
+ photo.</p>
+
+ <pre><figure>
+ <img src="bubbles-work.jpeg"
+ alt="Bubbles, sitting in his office chair, works on his
+ latest project intently.">
+ <figcaption>Bubbles at work</figcaption>
+</figure></pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>In this example, we see an image that is <em>not</em>
+ a figure, as well as an image and a video that are.</p>
+
+ <pre><h2>Malinko's comics</h2>
+
+<p>This case centered on some sort of "intellectual property"
+infringement related to a comic (see Exhibit A). The suit started
+after a trailer ending with these words:
+
+<blockquote>
+ <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+</blockquote>
+
+<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
+preemptive strike using snowballs. A complete copy of the trailer is
+included with Exhibit B.
+
+<figure>
+ <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
+</figure>
+
+<figure>
+ <video src="ex-b.mov"></video>
+ <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
+</figure>
+
+<p>The case was resolved out of court.</pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>Here, a part of a poem is marked up using
+ <code><a href=#the-figure-element>figure</a></code>.</p>
+
+ <pre><figure>
+ <p>'Twas brillig, and the slithy toves<br>
+ Did gyre and gimble in the wabe;<br>
+ All mimsy were the borogoves,<br>
+ And the mome raths outgrabe.</p>
+ <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
+</figure></pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>In this example, which could be part of a much larger work
+ discussing a castle, the figure has three images in it.</p>
+
+ <pre><figure>
+ <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
+ alt="The castle has one tower, and a tall wall around it.">
+ <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
+ alt="The castle now has two towers and two walls.">
+ <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
+ alt="The castle lies in ruins, the original tower all that remains in one piece.">
+ <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
+</figure></pre>
+
+ </div>
+
+
+ <h4 id=the-figcaption-element><span class=secno>4.5.13 </span>The <dfn><code>figcaption</code></dfn> element</h4>
+
<dl class=element><dt>Categories</dt>
+ <dd>None.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>As the first or last child of a <code><a href=#the-figure-element>figure</a></code> element.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-figcaption-element>figcaption</a></code> element <a href=#represents>represents</a> a
+ caption or legend for the rest of the contents of the
+ <code><a href=#the-figcaption-element>figcaption</a></code> element's parent <code><a href=#the-figure-element>figure</a></code>
+ element<span class=impl>, if any</span>.</p>
+
+
+
+ <h4 id=the-div-element><span class=secno>4.5.14 </span>The <dfn><code>div</code></dfn> element</h4>
+
+ <dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
@@ -18026,157 +18173,10 @@
<h3 id=embedded-content-1><span class=secno>4.8 </span>Embedded content</h3>
- <h4 id=the-figure-element><span class=secno>4.8.1 </span>The <dfn><code>figure</code></dfn> element</h4>
- <dl class=element><dt>Categories</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd>Either: One <code><a href=#the-figcaption-element>figcaption</a></code> element followed by <a href=#phrasing-content>phrasing content</a>.</dd>
- <dd>Or: <a href=#phrasing-content>Phrasing content</a> followed by one <code><a href=#the-figcaption-element>figcaption</a></code> element.</dd>
- <dd>Or: <a href=#phrasing-content>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><!-- v2: Add a <credit> element for photo credits --><p>The <code><a href=#the-figure-element>figure</a></code> element <a href=#represents>represents</a> some
- <a href=#flow-content>flow content</a>, optionally with a caption, that is
- self-contained and is typically referenced as a single unit from the
- main flow of the document.</p>
+ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code></dfn> element</h4>
- <p>The element can thus be used to annotate illustrations, diagrams,
- photos, code listings, etc, that are referred to from the main
- content of the document, but that could, without affecting the flow
- of the document, be moved away from that primary content, e.g. to
- the side of the page, to dedicated pages, or to an appendix.</p>
-
- <p>The <span class=impl>first</span> <code><a href=#the-figcaption-element>figcaption</a></code>
- element child of the element, if any, represents the caption of the
- <code><a href=#the-figure-element>figure</a></code> element's contents. If there is no child
- <code><a href=#the-figcaption-element>figcaption</a></code> element, then there is no caption.</p>
-
- <div class=example>
-
- <p>This example shows the <code><a href=#the-figure-element>figure</a></code> element to mark up a
- code listing.</p>
-
- <pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
-API declaration.</p>
-<figure id="l4">
- <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
- <pre><code>interface PrimaryCore {
- boolean verifyDataLine();
- void sendData(in sequence<byte> data);
- void initSelfDestruct();
-}</code></pre>
-</figure>
-<p>The API is designed to use UTF-8.</p></pre>
-
- </div>
-
- <div class=example>
-
- <p>Here we see a <code><a href=#the-figure-element>figure</a></code> element to mark up a
- photo.</p>
-
- <pre><figure>
- <img src="bubbles-work.jpeg"
- alt="Bubbles, sitting in his office chair, works on his
- latest project intently.">
- <figcaption>Bubbles at work</figcaption>
-</figure></pre>
-
- </div>
-
- <div class=example>
-
- <p>In this example, we see an image that is <em>not</em>
- a figure, as well as an image and a video that are.</p>
-
- <pre><h2>Malinko's comics</h2>
-
-<p>This case centered on some sort of "intellectual property"
-infringement related to a comic (see Exhibit A). The suit started
-after a trailer ending with these words:
-
-<blockquote>
- <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
-</blockquote>
-
-<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
-preemptive strike using snowballs. A complete copy of the trailer is
-included with Exhibit B.
-
-<figure>
- <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
- <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
-</figure>
-
-<figure>
- <video src="ex-b.mov"></video>
- <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
-</figure>
-
-<p>The case was resolved out of court.</pre>
-
- </div>
-
- <div class=example>
-
- <p>Here, a part of a poem is marked up using
- <code><a href=#the-figure-element>figure</a></code>.</p>
-
- <pre><figure>
- <p>'Twas brillig, and the slithy toves<br>
- Did gyre and gimble in the wabe;<br>
- All mimsy were the borogoves,<br>
- And the mome raths outgrabe.</p>
- <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
-</figure></pre>
-
- </div>
-
- <div class=example>
-
- <p>In this example, which could be part of a much larger work
- discussing a castle, the figure has three images in it.</p>
-
- <pre><figure>
- <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
- alt="The castle has one tower, and a tall wall around it.">
- <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
- alt="The castle now has two towers and two walls.">
- <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
- alt="The castle lies in ruins, the original tower all that remains in one piece.">
- <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
-</figure></pre>
-
- </div>
-
-
- <h4 id=the-figcaption-element><span class=secno>4.8.2 </span>The <dfn><code>figcaption</code></dfn> element</h4>
-
<dl class=element><dt>Categories</dt>
- <dd>None.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>As the first or last child of a <code><a href=#the-figure-element>figure</a></code> element.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-figcaption-element>figcaption</a></code> element <a href=#represents>represents</a> a
- caption or legend for the rest of the contents of the
- <code><a href=#the-figcaption-element>figcaption</a></code> element's parent <code><a href=#the-figure-element>figure</a></code>
- element<span class=impl>, if any</span>.</p>
-
-
- <h4 id=the-img-element><span class=secno>4.8.3 </span>The <dfn><code>img</code></dfn> element</h4>
-
- <dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dd><a href=#embedded-content>Embedded content</a>.</dd>
@@ -18717,14 +18717,14 @@
- <h5 id=alt><span class=secno>4.8.3.1 </span>Requirements for providing text to act as an alternative for images</h5>
+ <h5 id=alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</h5>
<p>The requirements for the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
attribute depend on what the image is intended to represent, as
described in the following sections.</p>
- <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.3.1.1 </span>A link or button containing nothing but the image</h6>
+ <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</h6>
<p>When an <a href=#the-a-element>a</a> element that is a <a href=#hyperlink>hyperlink</a>,
or a <code><a href=#the-button-element>button</a></code> element, has no textual content but
@@ -18773,7 +18773,7 @@
- <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.3.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
+ <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
<p>Sometimes something can be more clearly stated in graphical
form, for example as a flowchart, a diagram, a graph, or a simple
@@ -18848,7 +18848,7 @@
</div>
- <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.3.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
+ <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
<p>A document can contain information in iconic form. The icon is
intended to help users of visual browsers to recognize features at
@@ -18977,7 +18977,7 @@
</div>
- <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.3.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
+ <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
<p>Sometimes, an image just consists of text, and the purpose of the
image is not to highlight the actual typographic effects used to
@@ -19001,7 +19001,7 @@
- <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.3.1.5 </span>A graphical representation of some of the surrounding text</h6>
+ <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</h6>
<p>In many cases, the image is actually just supplementary, and
its presence merely reinforces the surrounding text. In these
@@ -19083,7 +19083,7 @@
- <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.3.1.6 </span>A purely decorative image that doesn't add any information</h6>
+ <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</h6>
<p>In general, if an image is decorative but isn't especially
page-specific, for example an image that forms part of a site-wide
@@ -19121,7 +19121,7 @@
- <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.3.1.7 </span>A group of images that form a single larger picture with no links</h6>
+ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</h6>
<p>When a picture has been sliced into smaller image files that are
then displayed together to form the complete picture again, one of
@@ -19160,7 +19160,7 @@
- <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.3.1.8 </span>A group of images that form a single larger picture with links</h6>
+ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</h6>
<p>Generally, <a href=#image-map title="image map">image maps</a> should be
used instead of slicing an image for links.</p>
@@ -19188,7 +19188,7 @@
- <h6 id=a-key-part-of-the-content><span class=secno>4.8.3.1.9 </span>A key part of the content</h6>
+ <h6 id=a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</h6>
<p>In some cases, the image is a critical part of the
content. This could be the case, for instance, on a page that is
@@ -19461,7 +19461,7 @@
</dd>
- </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.3.1.10 </span>An image not intended for the user</h6>
+ </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</h6>
<p>Generally authors should avoid using <code><a href=#the-img-element>img</a></code> elements
for purposes other than showing images.</p>
@@ -19477,7 +19477,7 @@
- <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.3.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
+ <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
<p><i>This section does not apply to documents that are publicly
accessible, or whose target audience is not necessarily personally
@@ -19497,7 +19497,7 @@
- <h6 id=general-guidelines><span class=secno>4.8.3.1.12 </span>General guidelines</h6>
+ <h6 id=general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</h6>
<p>The most general rule to consider when writing alternative text
is the following: <strong>the intent is that replacing every image
@@ -19524,7 +19524,7 @@
<div class=impl>
- <h6 id=guidance-for-markup-generators><span class=secno>4.8.3.1.13 </span>Guidance for markup generators</h6>
+ <h6 id=guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</h6>
<p>Markup generators (such as WYSIWYG authoring tools) should,
wherever possible, obtain alternative text from their
@@ -19559,7 +19559,7 @@
<div class=impl>
- <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.3.1.14 </span>Guidance for conformance checkers</h6>
+ <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</h6>
<p>A conformance checker must report the lack of an <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute as an error unless either
the conditions listed above for <a href=#unknown-images>images
@@ -19574,7 +19574,7 @@
- <h4 id=the-iframe-element><span class=secno>4.8.4 </span>The <dfn><code>iframe</code></dfn> element</h4>
+ <h4 id=the-iframe-element><span class=secno>4.8.2 </span>The <dfn><code>iframe</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20279,7 +20279,7 @@
- <h4 id=the-embed-element><span class=secno>4.8.5 </span>The <dfn><code>embed</code></dfn> element</h4>
+ <h4 id=the-embed-element><span class=secno>4.8.3 </span>The <dfn><code>embed</code></dfn> element</h4>
<!-- (v2?)
we have all kinds of quirks we should define if they come up during
@@ -20566,7 +20566,7 @@
- <h4 id=the-object-element><span class=secno>4.8.6 </span>The <dfn><code>object</code></dfn> element</h4>
+ <h4 id=the-object-element><span class=secno>4.8.4 </span>The <dfn><code>object</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21137,7 +21137,7 @@
- <h4 id=the-param-element><span class=secno>4.8.7 </span>The <dfn><code>param</code></dfn> element</h4>
+ <h4 id=the-param-element><span class=secno>4.8.5 </span>The <dfn><code>param</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -21207,7 +21207,7 @@
</div>
- <h4 id=video><span class=secno>4.8.8 </span>The <dfn><code>video</code></dfn> element</h4>
+ <h4 id=video><span class=secno>4.8.6 </span>The <dfn><code>video</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21464,7 +21464,7 @@
- <h4 id=audio><span class=secno>4.8.9 </span>The <dfn><code>audio</code></dfn> element</h4>
+ <h4 id=audio><span class=secno>4.8.7 </span>The <dfn><code>audio</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21600,7 +21600,7 @@
- <h4 id=the-source-element><span class=secno>4.8.10 </span>The <dfn><code>source</code></dfn> element</h4>
+ <h4 id=the-source-element><span class=secno>4.8.8 </span>The <dfn><code>source</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -21751,7 +21751,7 @@
- <h4 id=media-elements><span class=secno>4.8.11 </span>Media elements</h4>
+ <h4 id=media-elements><span class=secno>4.8.9 </span>Media elements</h4>
<p><dfn id=media-element title="media element">Media elements</dfn> implement the
following interface:</p>
@@ -21883,7 +21883,7 @@
- <h5 id=error-codes><span class=secno>4.8.11.1 </span>Error codes</h5>
+ <h5 id=error-codes><span class=secno>4.8.9.1 </span>Error codes</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>
@@ -21952,7 +21952,7 @@
<dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was not suitable.</dd>
- </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.11.2 </span>Location of the media resource</h5>
+ </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.9.2 </span>Location of the media resource</h5>
<p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content
attribute on <a href=#media-element title="media element">media elements</a> gives
@@ -21999,7 +21999,7 @@
- <h5 id=mime-types><span class=secno>4.8.11.3 </span>MIME types</h5>
+ <h5 id=mime-types><span class=secno>4.8.9.3 </span>MIME types</h5>
<p>A <a href=#media-resource>media resource</a> can be described in terms of its
<em>type</em>, specifically a <a href=#mime-type>MIME type</a>, optionally
@@ -22095,7 +22095,7 @@
render.</p>
- <h5 id=network-states><span class=secno>4.8.11.4 </span>Network states</h5>
+ <h5 id=network-states><span class=secno>4.8.9.4 </span>Network states</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>
@@ -22148,7 +22148,7 @@
- <h5 id=loading-the-media-resource><span class=secno>4.8.11.5 </span>Loading the media resource</h5>
+ <h5 id=loading-the-media-resource><span class=secno>4.8.9.5 </span>Loading the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>
@@ -22916,7 +22916,7 @@
- <h5 id=offsets-into-the-media-resource><span class=secno>4.8.11.6 </span>Offsets into the media resource</h5>
+ <h5 id=offsets-into-the-media-resource><span class=secno>4.8.9.6 </span>Offsets into the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>
@@ -23053,7 +23053,7 @@
- <h5 id=the-ready-states><span class=secno>4.8.11.7 </span>The ready states</h5>
+ <h5 id=the-ready-states><span class=secno>4.8.9.7 </span>The ready states</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>
@@ -23361,7 +23361,7 @@
-->
- <h5 id=playing-the-media-resource><span class=secno>4.8.11.8 </span>Playing the media resource</h5>
+ <h5 id=playing-the-media-resource><span class=secno>4.8.9.8 </span>Playing the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>
@@ -23796,7 +23796,7 @@
- <h5 id=seeking><span class=secno>4.8.11.9 </span>Seeking</h5>
+ <h5 id=seeking><span class=secno>4.8.9.9 </span>Seeking</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>
@@ -23912,7 +23912,7 @@
</div>
- <h5 id=user-interface><span class=secno>4.8.11.10 </span>User interface</h5>
+ <h5 id=user-interface><span class=secno>4.8.9.10 </span>User interface</h5>
<p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
@@ -24017,7 +24017,7 @@
- <h5 id=time-ranges><span class=secno>4.8.11.11 </span>Time ranges</h5>
+ <h5 id=time-ranges><span class=secno>4.8.9.11 </span>Time ranges</h5>
<p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
represent a list of ranges (periods) of time.</p>
@@ -24095,7 +24095,7 @@
</div>
- <h5 id=mediaevents><span class=secno>4.8.11.12 </span>Event summary</h5>
+ <h5 id=mediaevents><span class=secno>4.8.9.12 </span>Event summary</h5>
<p><i>This section is non-normative.</i></p>
@@ -24203,7 +24203,7 @@
<td>
</table><div class=impl>
- <h5 id=security-and-privacy-considerations><span class=secno>4.8.11.13 </span>Security and privacy considerations</h5>
+ <h5 id=security-and-privacy-considerations><span class=secno>4.8.9.13 </span>Security and privacy considerations</h5>
<p>The main security and privacy implications of the
<code><a href=#video>video</a></code> and <code><a href=#audio>audio</a></code> elements come from the
@@ -24251,7 +24251,7 @@
</div>
- <h4 id=the-canvas-element><span class=secno>4.8.12 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
+ <h4 id=the-canvas-element><span class=secno>4.8.10 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -24500,7 +24500,7 @@
- <h5 id=2dcontext><span class=secno>4.8.12.1 </span>The 2D context</h5>
+ <h5 id=2dcontext><span class=secno>4.8.10.1 </span>The 2D context</h5>
<!-- v2: we're on v4. suggestions for next version are marked v5. -->
@@ -24702,7 +24702,7 @@
- <h6 id=the-canvas-state><span class=secno>4.8.12.1.1 </span>The canvas state</h6>
+ <h6 id=the-canvas-state><span class=secno>4.8.10.1.1 </span>The canvas state</h6>
<p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
@@ -24762,7 +24762,7 @@
</div>
- <h6 id=transformations><span class=secno>4.8.12.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+ <h6 id=transformations><span class=secno>4.8.10.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
<p>The transformation matrix is applied to coordinates when creating
shapes and paths.</p> <!-- conformance criteria for actual drawing
@@ -24867,7 +24867,7 @@
</div>
- <h6 id=compositing><span class=secno>4.8.12.1.3 </span>Compositing</h6>
+ <h6 id=compositing><span class=secno>4.8.10.1.3 </span>Compositing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
@@ -25023,7 +25023,7 @@
</div>
- <h6 id=colors-and-styles><span class=secno>4.8.12.1.4 </span>Colors and styles</h6>
+ <h6 id=colors-and-styles><span class=secno>4.8.10.1.4 </span>Colors and styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
@@ -25387,7 +25387,7 @@
- <h6 id=line-styles><span class=secno>4.8.12.1.5 </span>Line styles</h6>
+ <h6 id=line-styles><span class=secno>4.8.10.1.5 </span>Line styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
@@ -25559,7 +25559,7 @@
</div>
- <h6 id=shadows><span class=secno>4.8.12.1.6 </span><dfn>Shadows</dfn></h6>
+ <h6 id=shadows><span class=secno>4.8.10.1.6 </span><dfn>Shadows</dfn></h6>
<p>All drawing operations are affected by the four global shadow
attributes.</p>
@@ -25694,7 +25694,7 @@
(since the shape will overwrite the shadow).</p>
- <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.12.1.7 </span>Simple shapes (rectangles)</h6>
+ <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.10.1.7 </span>Simple shapes (rectangles)</h6>
<p>There are three methods that immediately draw rectangles to the
bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -25764,7 +25764,7 @@
</div>
- <h6 id=complex-shapes-(paths)><span class=secno>4.8.12.1.8 </span>Complex shapes (paths)</h6>
+ <h6 id=complex-shapes-(paths)><span class=secno>4.8.10.1.8 </span>Complex shapes (paths)</h6>
<p>The context always has a current path. There is only one current
path, it is not part of the <a href=#drawing-state>drawing state</a>.</p>
@@ -26121,7 +26121,7 @@
</div>
- <h6 id=focus-management-0><span class=secno>4.8.12.1.9 </span>Focus management</h6> <!-- a v4 feature -->
+ <h6 id=focus-management-0><span class=secno>4.8.10.1.9 </span>Focus management</h6> <!-- a v4 feature -->
<p>When a canvas is interactive, authors should include focusable
elements in the element's fallback content corresponding to each
@@ -26265,7 +26265,7 @@
</div>
- <h6 id=text><span class=secno>4.8.12.1.10 </span>Text</h6> <!-- a v3 feature -->
+ <h6 id=text><span class=secno>4.8.10.1.10 </span>Text</h6> <!-- a v3 feature -->
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
@@ -26774,7 +26774,7 @@
- <h6 id=images><span class=secno>4.8.12.1.11 </span>Images</h6>
+ <h6 id=images><span class=secno>4.8.10.1.11 </span>Images</h6>
<p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
@@ -26898,7 +26898,7 @@
- <h6 id=pixel-manipulation><span class=secno>4.8.12.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.10.1.12 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -27258,7 +27258,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.12.1.13 </span>Drawing model</h6>
+ <h6 id=drawing-model><span class=secno>4.8.10.1.13 </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):</p>
@@ -27288,7 +27288,7 @@
</ol></div>
- <h6 id=examples><span class=secno>4.8.12.1.14 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.10.1.14 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
@@ -27341,7 +27341,7 @@
<div class=impl>
- <h5 id=color-spaces-and-color-correction><span class=secno>4.8.12.2 </span>Color spaces and color correction</h5>
+ <h5 id=color-spaces-and-color-correction><span class=secno>4.8.10.2 </span>Color spaces and color correction</h5>
<p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at
only two points: when rendering images with their own gamma
@@ -27383,7 +27383,7 @@
<div class=impl>
- <h5 id=security-with-canvas-elements><span class=secno>4.8.12.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+ <h5 id=security-with-canvas-elements><span class=secno>4.8.10.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
<p><strong>Information leakage</strong> can occur if scripts from
one <a href=#origin>origin</a> can access information (e.g. read pixels)
@@ -27451,7 +27451,7 @@
- <h4 id=the-map-element><span class=secno>4.8.13 </span>The <dfn><code>map</code></dfn> element</h4>
+ <h4 id=the-map-element><span class=secno>4.8.11 </span>The <dfn><code>map</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -27522,7 +27522,7 @@
- <h4 id=the-area-element><span class=secno>4.8.14 </span>The <dfn><code>area</code></dfn> element</h4>
+ <h4 id=the-area-element><span class=secno>4.8.12 </span>The <dfn><code>area</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -27727,7 +27727,7 @@
</div>
- <h4 id=image-maps><span class=secno>4.8.15 </span>Image maps</h4>
+ <h4 id=image-maps><span class=secno>4.8.13 </span>Image maps</h4>
<!-- TESTS
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
@@ -27738,7 +27738,7 @@
<div class=impl>
- <h5 id=authoring><span class=secno>4.8.15.1 </span>Authoring</h5>
+ <h5 id=authoring><span class=secno>4.8.13.1 </span>Authoring</h5>
</div>
@@ -27780,7 +27780,7 @@
<div class=impl>
- <h5 id=processing-model><span class=secno>4.8.15.2 </span>Processing model</h5>
+ <h5 id=processing-model><span class=secno>4.8.13.2 </span>Processing model</h5>
<p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element
representing an image has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified,
@@ -27980,7 +27980,7 @@
- <h4 id=mathml><span class=secno>4.8.16 </span>MathML</h4>
+ <h4 id=mathml><span class=secno>4.8.14 </span>MathML</h4>
<p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML
namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -28054,7 +28054,7 @@
- <h4 id=svg-0><span class=secno>4.8.17 </span>SVG</h4>
+ <h4 id=svg-0><span class=secno>4.8.15 </span>SVG</h4>
<p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG
namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -28094,7 +28094,7 @@
- <h4 id=dimension-attributes><span class=secno>4.8.18 </span><dfn>Dimension attributes</dfn></h4>
+ <h4 id=dimension-attributes><span class=secno>4.8.16 </span><dfn>Dimension attributes</dfn></h4>
<p><span class=impl><strong>Author requirements</strong>:</span>
The <dfn id=attr-dim-width title=attr-dim-width><code>width</code></dfn> and <dfn id=attr-dim-height title=attr-dim-height><code>height</code></dfn> attributes on
Modified: index
===================================================================
--- index 2010-02-06 10:38:43 UTC (rev 4681)
+++ index 2010-02-06 10:50:44 UTC (rev 4682)
@@ -374,7 +374,9 @@
<li><a href=#the-dl-element><span class=secno>4.5.9 </span>The <code>dl</code> element</a></li>
<li><a href=#the-dt-element><span class=secno>4.5.10 </span>The <code>dt</code> element</a></li>
<li><a href=#the-dd-element><span class=secno>4.5.11 </span>The <code>dd</code> element</a></li>
- <li><a href=#the-div-element><span class=secno>4.5.12 </span>The <code>div</code> element</a></ol></li>
+ <li><a href=#the-figure-element><span class=secno>4.5.12 </span>The <code>figure</code> element</a></li>
+ <li><a href=#the-figcaption-element><span class=secno>4.5.13 </span>The <code>figcaption</code> element</a></li>
+ <li><a href=#the-div-element><span class=secno>4.5.14 </span>The <code>div</code> element</a></ol></li>
<li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
<ol>
<li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
@@ -409,77 +411,75 @@
<li><a href=#edits-and-lists><span class=secno>4.7.5 </span>Edits and lists</a></ol></li>
<li><a href=#embedded-content-1><span class=secno>4.8 </span>Embedded content</a>
<ol>
- <li><a href=#the-figure-element><span class=secno>4.8.1 </span>The <code>figure</code> element</a></li>
- <li><a href=#the-figcaption-element><span class=secno>4.8.2 </span>The <code>figcaption</code> element</a></li>
- <li><a href=#the-img-element><span class=secno>4.8.3 </span>The <code>img</code> element</a>
+ <li><a href=#the-img-element><span class=secno>4.8.1 </span>The <code>img</code> element</a>
<ol>
- <li><a href=#alt><span class=secno>4.8.3.1 </span>Requirements for providing text to act as an alternative for images</a>
+ <li><a href=#alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</a>
<ol>
- <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.3.1.1 </span>A link or button containing nothing but the image</a></li>
- <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.3.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
- <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.3.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
- <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.3.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
- <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.3.1.5 </span>A graphical representation of some of the surrounding text</a></li>
- <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.3.1.6 </span>A purely decorative image that doesn't add any information</a></li>
- <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.3.1.7 </span>A group of images that form a single larger picture with no links</a></li>
- <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.3.1.8 </span>A group of images that form a single larger picture with links</a></li>
- <li><a href=#a-key-part-of-the-content><span class=secno>4.8.3.1.9 </span>A key part of the content</a></li>
- <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.3.1.10 </span>An image not intended for the user</a></li>
- <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.3.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
- <li><a href=#general-guidelines><span class=secno>4.8.3.1.12 </span>General guidelines</a></li>
- <li><a href=#guidance-for-markup-generators><span class=secno>4.8.3.1.13 </span>Guidance for markup generators</a></li>
- <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.3.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
- <li><a href=#the-iframe-element><span class=secno>4.8.4 </span>The <code>iframe</code> element</a></li>
- <li><a href=#the-embed-element><span class=secno>4.8.5 </span>The <code>embed</code> element</a></li>
- <li><a href=#the-object-element><span class=secno>4.8.6 </span>The <code>object</code> element</a></li>
- <li><a href=#the-param-element><span class=secno>4.8.7 </span>The <code>param</code> element</a></li>
- <li><a href=#video><span class=secno>4.8.8 </span>The <code>video</code> element</a></li>
- <li><a href=#audio><span class=secno>4.8.9 </span>The <code>audio</code> element</a></li>
- <li><a href=#the-source-element><span class=secno>4.8.10 </span>The <code>source</code> element</a></li>
- <li><a href=#media-elements><span class=secno>4.8.11 </span>Media elements</a>
+ <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</a></li>
+ <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
+ <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
+ <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
+ <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</a></li>
+ <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</a></li>
+ <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</a></li>
+ <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</a></li>
+ <li><a href=#a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</a></li>
+ <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</a></li>
+ <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
+ <li><a href=#general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</a></li>
+ <li><a href=#guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</a></li>
+ <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
+ <li><a href=#the-iframe-element><span class=secno>4.8.2 </span>The <code>iframe</code> element</a></li>
+ <li><a href=#the-embed-element><span class=secno>4.8.3 </span>The <code>embed</code> element</a></li>
+ <li><a href=#the-object-element><span class=secno>4.8.4 </span>The <code>object</code> element</a></li>
+ <li><a href=#the-param-element><span class=secno>4.8.5 </span>The <code>param</code> element</a></li>
+ <li><a href=#video><span class=secno>4.8.6 </span>The <code>video</code> element</a></li>
+ <li><a href=#audio><span class=secno>4.8.7 </span>The <code>audio</code> element</a></li>
+ <li><a href=#the-source-element><span class=secno>4.8.8 </span>The <code>source</code> element</a></li>
+ <li><a href=#media-elements><span class=secno>4.8.9 </span>Media elements</a>
<ol>
- <li><a href=#error-codes><span class=secno>4.8.11.1 </span>Error codes</a></li>
- <li><a href=#location-of-the-media-resource><span class=secno>4.8.11.2 </span>Location of the media resource</a></li>
- <li><a href=#mime-types><span class=secno>4.8.11.3 </span>MIME types</a></li>
- <li><a href=#network-states><span class=secno>4.8.11.4 </span>Network states</a></li>
- <li><a href=#loading-the-media-resource><span class=secno>4.8.11.5 </span>Loading the media resource</a></li>
- <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.11.6 </span>Offsets into the media resource</a></li>
- <li><a href=#the-ready-states><span class=secno>4.8.11.7 </span>The ready states</a></li>
- <li><a href=#playing-the-media-resource><span class=secno>4.8.11.8 </span>Playing the media resource</a></li>
- <li><a href=#seeking><span class=secno>4.8.11.9 </span>Seeking</a></li>
- <li><a href=#user-interface><span class=secno>4.8.11.10 </span>User interface</a></li>
- <li><a href=#time-ranges><span class=secno>4.8.11.11 </span>Time ranges</a></li>
- <li><a href=#mediaevents><span class=secno>4.8.11.12 </span>Event summary</a></li>
- <li><a href=#security-and-privacy-considerations><span class=secno>4.8.11.13 </span>Security and privacy considerations</a></ol></li>
- <li><a href=#the-canvas-element><span class=secno>4.8.12 </span>The <code>canvas</code> element</a>
+ <li><a href=#error-codes><span class=secno>4.8.9.1 </span>Error codes</a></li>
+ <li><a href=#location-of-the-media-resource><span class=secno>4.8.9.2 </span>Location of the media resource</a></li>
+ <li><a href=#mime-types><span class=secno>4.8.9.3 </span>MIME types</a></li>
+ <li><a href=#network-states><span class=secno>4.8.9.4 </span>Network states</a></li>
+ <li><a href=#loading-the-media-resource><span class=secno>4.8.9.5 </span>Loading the media resource</a></li>
+ <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.9.6 </span>Offsets into the media resource</a></li>
+ <li><a href=#the-ready-states><span class=secno>4.8.9.7 </span>The ready states</a></li>
+ <li><a href=#playing-the-media-resource><span class=secno>4.8.9.8 </span>Playing the media resource</a></li>
+ <li><a href=#seeking><span class=secno>4.8.9.9 </span>Seeking</a></li>
+ <li><a href=#user-interface><span class=secno>4.8.9.10 </span>User interface</a></li>
+ <li><a href=#time-ranges><span class=secno>4.8.9.11 </span>Time ranges</a></li>
+ <li><a href=#mediaevents><span class=secno>4.8.9.12 </span>Event summary</a></li>
+ <li><a href=#security-and-privacy-considerations><span class=secno>4.8.9.13 </span>Security and privacy considerations</a></ol></li>
+ <li><a href=#the-canvas-element><span class=secno>4.8.10 </span>The <code>canvas</code> element</a>
<ol>
- <li><a href=#2dcontext><span class=secno>4.8.12.1 </span>The 2D context</a>
+ <li><a href=#2dcontext><span class=secno>4.8.10.1 </span>The 2D context</a>
<ol>
- <li><a href=#the-canvas-state><span class=secno>4.8.12.1.1 </span>The canvas state</a></li>
- <li><a href=#transformations><span class=secno>4.8.12.1.2 </span>Transformations</a></li>
- <li><a href=#compositing><span class=secno>4.8.12.1.3 </span>Compositing</a></li>
- <li><a href=#colors-and-styles><span class=secno>4.8.12.1.4 </span>Colors and styles</a></li>
- <li><a href=#line-styles><span class=secno>4.8.12.1.5 </span>Line styles</a></li>
- <li><a href=#shadows><span class=secno>4.8.12.1.6 </span>Shadows</a></li>
- <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.12.1.7 </span>Simple shapes (rectangles)</a></li>
- <li><a href=#complex-shapes-(paths)><span class=secno>4.8.12.1.8 </span>Complex shapes (paths)</a></li>
- <li><a href=#focus-management-0><span class=secno>4.8.12.1.9 </span>Focus management</a></li>
- <li><a href=#text><span class=secno>4.8.12.1.10 </span>Text</a></li>
- <li><a href=#images><span class=secno>4.8.12.1.11 </span>Images</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.12.1.12 </span>Pixel manipulation</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.12.1.13 </span>Drawing model</a></li>
- <li><a href=#examples><span class=secno>4.8.12.1.14 </span>Examples</a></ol></li>
- <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.12.2 </span>Color spaces and color correction</a></li>
- <li><a href=#security-with-canvas-elements><span class=secno>4.8.12.3 </span>Security with <code>canvas</code> elements</a></ol></li>
- <li><a href=#the-map-element><span class=secno>4.8.13 </span>The <code>map</code> element</a></li>
- <li><a href=#the-area-element><span class=secno>4.8.14 </span>The <code>area</code> element</a></li>
- <li><a href=#image-maps><span class=secno>4.8.15 </span>Image maps</a>
+ <li><a href=#the-canvas-state><span class=secno>4.8.10.1.1 </span>The canvas state</a></li>
+ <li><a href=#transformations><span class=secno>4.8.10.1.2 </span>Transformations</a></li>
+ <li><a href=#compositing><span class=secno>4.8.10.1.3 </span>Compositing</a></li>
+ <li><a href=#colors-and-styles><span class=secno>4.8.10.1.4 </span>Colors and styles</a></li>
+ <li><a href=#line-styles><span class=secno>4.8.10.1.5 </span>Line styles</a></li>
+ <li><a href=#shadows><span class=secno>4.8.10.1.6 </span>Shadows</a></li>
+ <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.10.1.7 </span>Simple shapes (rectangles)</a></li>
+ <li><a href=#complex-shapes-(paths)><span class=secno>4.8.10.1.8 </span>Complex shapes (paths)</a></li>
+ <li><a href=#focus-management-0><span class=secno>4.8.10.1.9 </span>Focus management</a></li>
+ <li><a href=#text><span class=secno>4.8.10.1.10 </span>Text</a></li>
+ <li><a href=#images><span class=secno>4.8.10.1.11 </span>Images</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.10.1.12 </span>Pixel manipulation</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.10.1.13 </span>Drawing model</a></li>
+ <li><a href=#examples><span class=secno>4.8.10.1.14 </span>Examples</a></ol></li>
+ <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.10.2 </span>Color spaces and color correction</a></li>
+ <li><a href=#security-with-canvas-elements><span class=secno>4.8.10.3 </span>Security with <code>canvas</code> elements</a></ol></li>
+ <li><a href=#the-map-element><span class=secno>4.8.11 </span>The <code>map</code> element</a></li>
+ <li><a href=#the-area-element><span class=secno>4.8.12 </span>The <code>area</code> element</a></li>
+ <li><a href=#image-maps><span class=secno>4.8.13 </span>Image maps</a>
<ol>
- <li><a href=#authoring><span class=secno>4.8.15.1 </span>Authoring</a></li>
- <li><a href=#processing-model><span class=secno>4.8.15.2 </span>Processing model</a></ol></li>
- <li><a href=#mathml><span class=secno>4.8.16 </span>MathML</a></li>
- <li><a href=#svg-0><span class=secno>4.8.17 </span>SVG</a></li>
- <li><a href=#dimension-attributes><span class=secno>4.8.18 </span>Dimension attributes</a></ol></li>
+ <li><a href=#authoring><span class=secno>4.8.13.1 </span>Authoring</a></li>
+ <li><a href=#processing-model><span class=secno>4.8.13.2 </span>Processing model</a></ol></li>
+ <li><a href=#mathml><span class=secno>4.8.14 </span>MathML</a></li>
+ <li><a href=#svg-0><span class=secno>4.8.15 </span>SVG</a></li>
+ <li><a href=#dimension-attributes><span class=secno>4.8.16 </span>Dimension attributes</a></ol></li>
<li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
<ol>
<li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
@@ -15587,11 +15587,158 @@
</div>
+ <h4 id=the-figure-element><span class=secno>4.5.12 </span>The <dfn><code>figure</code></dfn> element</h4>
+ <dl class=element><dt>Categories</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd>Either: One <code><a href=#the-figcaption-element>figcaption</a></code> element followed by <a href=#phrasing-content>phrasing content</a>.</dd>
+ <dd>Or: <a href=#phrasing-content>Phrasing content</a> followed by one <code><a href=#the-figcaption-element>figcaption</a></code> element.</dd>
+ <dd>Or: <a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><!-- v2: Add a <credit> element for photo credits --><p>The <code><a href=#the-figure-element>figure</a></code> element <a href=#represents>represents</a> some
+ <a href=#flow-content>flow content</a>, optionally with a caption, that is
+ self-contained and is typically referenced as a single unit from the
+ main flow of the document.</p>
- <h4 id=the-div-element><span class=secno>4.5.12 </span>The <dfn><code>div</code></dfn> element</h4>
+ <p>The element can thus be used to annotate illustrations, diagrams,
+ photos, code listings, etc, that are referred to from the main
+ content of the document, but that could, without affecting the flow
+ of the document, be moved away from that primary content, e.g. to
+ the side of the page, to dedicated pages, or to an appendix.</p>
+ <p>The <span class=impl>first</span> <code><a href=#the-figcaption-element>figcaption</a></code>
+ element child of the element, if any, represents the caption of the
+ <code><a href=#the-figure-element>figure</a></code> element's contents. If there is no child
+ <code><a href=#the-figcaption-element>figcaption</a></code> element, then there is no caption.</p>
+
+ <div class=example>
+
+ <p>This example shows the <code><a href=#the-figure-element>figure</a></code> element to mark up a
+ code listing.</p>
+
+ <pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
+API declaration.</p>
+<figure id="l4">
+ <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
+ <pre><code>interface PrimaryCore {
+ boolean verifyDataLine();
+ void sendData(in sequence<byte> data);
+ void initSelfDestruct();
+}</code></pre>
+</figure>
+<p>The API is designed to use UTF-8.</p></pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>Here we see a <code><a href=#the-figure-element>figure</a></code> element to mark up a
+ photo.</p>
+
+ <pre><figure>
+ <img src="bubbles-work.jpeg"
+ alt="Bubbles, sitting in his office chair, works on his
+ latest project intently.">
+ <figcaption>Bubbles at work</figcaption>
+</figure></pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>In this example, we see an image that is <em>not</em>
+ a figure, as well as an image and a video that are.</p>
+
+ <pre><h2>Malinko's comics</h2>
+
+<p>This case centered on some sort of "intellectual property"
+infringement related to a comic (see Exhibit A). The suit started
+after a trailer ending with these words:
+
+<blockquote>
+ <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+</blockquote>
+
+<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
+preemptive strike using snowballs. A complete copy of the trailer is
+included with Exhibit B.
+
+<figure>
+ <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
+</figure>
+
+<figure>
+ <video src="ex-b.mov"></video>
+ <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
+</figure>
+
+<p>The case was resolved out of court.</pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>Here, a part of a poem is marked up using
+ <code><a href=#the-figure-element>figure</a></code>.</p>
+
+ <pre><figure>
+ <p>'Twas brillig, and the slithy toves<br>
+ Did gyre and gimble in the wabe;<br>
+ All mimsy were the borogoves,<br>
+ And the mome raths outgrabe.</p>
+ <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
+</figure></pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>In this example, which could be part of a much larger work
+ discussing a castle, the figure has three images in it.</p>
+
+ <pre><figure>
+ <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
+ alt="The castle has one tower, and a tall wall around it.">
+ <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
+ alt="The castle now has two towers and two walls.">
+ <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
+ alt="The castle lies in ruins, the original tower all that remains in one piece.">
+ <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
+</figure></pre>
+
+ </div>
+
+
+ <h4 id=the-figcaption-element><span class=secno>4.5.13 </span>The <dfn><code>figcaption</code></dfn> element</h4>
+
<dl class=element><dt>Categories</dt>
+ <dd>None.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>As the first or last child of a <code><a href=#the-figure-element>figure</a></code> element.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-figcaption-element>figcaption</a></code> element <a href=#represents>represents</a> a
+ caption or legend for the rest of the contents of the
+ <code><a href=#the-figcaption-element>figcaption</a></code> element's parent <code><a href=#the-figure-element>figure</a></code>
+ element<span class=impl>, if any</span>.</p>
+
+
+
+ <h4 id=the-div-element><span class=secno>4.5.14 </span>The <dfn><code>div</code></dfn> element</h4>
+
+ <dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
@@ -17925,157 +18072,10 @@
<h3 id=embedded-content-1><span class=secno>4.8 </span>Embedded content</h3>
- <h4 id=the-figure-element><span class=secno>4.8.1 </span>The <dfn><code>figure</code></dfn> element</h4>
- <dl class=element><dt>Categories</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd>Either: One <code><a href=#the-figcaption-element>figcaption</a></code> element followed by <a href=#phrasing-content>phrasing content</a>.</dd>
- <dd>Or: <a href=#phrasing-content>Phrasing content</a> followed by one <code><a href=#the-figcaption-element>figcaption</a></code> element.</dd>
- <dd>Or: <a href=#phrasing-content>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><!-- v2: Add a <credit> element for photo credits --><p>The <code><a href=#the-figure-element>figure</a></code> element <a href=#represents>represents</a> some
- <a href=#flow-content>flow content</a>, optionally with a caption, that is
- self-contained and is typically referenced as a single unit from the
- main flow of the document.</p>
+ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code></dfn> element</h4>
- <p>The element can thus be used to annotate illustrations, diagrams,
- photos, code listings, etc, that are referred to from the main
- content of the document, but that could, without affecting the flow
- of the document, be moved away from that primary content, e.g. to
- the side of the page, to dedicated pages, or to an appendix.</p>
-
- <p>The <span class=impl>first</span> <code><a href=#the-figcaption-element>figcaption</a></code>
- element child of the element, if any, represents the caption of the
- <code><a href=#the-figure-element>figure</a></code> element's contents. If there is no child
- <code><a href=#the-figcaption-element>figcaption</a></code> element, then there is no caption.</p>
-
- <div class=example>
-
- <p>This example shows the <code><a href=#the-figure-element>figure</a></code> element to mark up a
- code listing.</p>
-
- <pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
-API declaration.</p>
-<figure id="l4">
- <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
- <pre><code>interface PrimaryCore {
- boolean verifyDataLine();
- void sendData(in sequence<byte> data);
- void initSelfDestruct();
-}</code></pre>
-</figure>
-<p>The API is designed to use UTF-8.</p></pre>
-
- </div>
-
- <div class=example>
-
- <p>Here we see a <code><a href=#the-figure-element>figure</a></code> element to mark up a
- photo.</p>
-
- <pre><figure>
- <img src="bubbles-work.jpeg"
- alt="Bubbles, sitting in his office chair, works on his
- latest project intently.">
- <figcaption>Bubbles at work</figcaption>
-</figure></pre>
-
- </div>
-
- <div class=example>
-
- <p>In this example, we see an image that is <em>not</em>
- a figure, as well as an image and a video that are.</p>
-
- <pre><h2>Malinko's comics</h2>
-
-<p>This case centered on some sort of "intellectual property"
-infringement related to a comic (see Exhibit A). The suit started
-after a trailer ending with these words:
-
-<blockquote>
- <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
-</blockquote>
-
-<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
-preemptive strike using snowballs. A complete copy of the trailer is
-included with Exhibit B.
-
-<figure>
- <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
- <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
-</figure>
-
-<figure>
- <video src="ex-b.mov"></video>
- <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
-</figure>
-
-<p>The case was resolved out of court.</pre>
-
- </div>
-
- <div class=example>
-
- <p>Here, a part of a poem is marked up using
- <code><a href=#the-figure-element>figure</a></code>.</p>
-
- <pre><figure>
- <p>'Twas brillig, and the slithy toves<br>
- Did gyre and gimble in the wabe;<br>
- All mimsy were the borogoves,<br>
- And the mome raths outgrabe.</p>
- <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
-</figure></pre>
-
- </div>
-
- <div class=example>
-
- <p>In this example, which could be part of a much larger work
- discussing a castle, the figure has three images in it.</p>
-
- <pre><figure>
- <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
- alt="The castle has one tower, and a tall wall around it.">
- <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
- alt="The castle now has two towers and two walls.">
- <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
- alt="The castle lies in ruins, the original tower all that remains in one piece.">
- <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
-</figure></pre>
-
- </div>
-
-
- <h4 id=the-figcaption-element><span class=secno>4.8.2 </span>The <dfn><code>figcaption</code></dfn> element</h4>
-
<dl class=element><dt>Categories</dt>
- <dd>None.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>As the first or last child of a <code><a href=#the-figure-element>figure</a></code> element.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-figcaption-element>figcaption</a></code> element <a href=#represents>represents</a> a
- caption or legend for the rest of the contents of the
- <code><a href=#the-figcaption-element>figcaption</a></code> element's parent <code><a href=#the-figure-element>figure</a></code>
- element<span class=impl>, if any</span>.</p>
-
-
- <h4 id=the-img-element><span class=secno>4.8.3 </span>The <dfn><code>img</code></dfn> element</h4>
-
- <dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dd><a href=#embedded-content>Embedded content</a>.</dd>
@@ -18616,14 +18616,14 @@
- <h5 id=alt><span class=secno>4.8.3.1 </span>Requirements for providing text to act as an alternative for images</h5>
+ <h5 id=alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</h5>
<p>The requirements for the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
attribute depend on what the image is intended to represent, as
described in the following sections.</p>
- <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.3.1.1 </span>A link or button containing nothing but the image</h6>
+ <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</h6>
<p>When an <a href=#the-a-element>a</a> element that is a <a href=#hyperlink>hyperlink</a>,
or a <code><a href=#the-button-element>button</a></code> element, has no textual content but
@@ -18672,7 +18672,7 @@
- <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.3.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
+ <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
<p>Sometimes something can be more clearly stated in graphical
form, for example as a flowchart, a diagram, a graph, or a simple
@@ -18747,7 +18747,7 @@
</div>
- <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.3.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
+ <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
<p>A document can contain information in iconic form. The icon is
intended to help users of visual browsers to recognize features at
@@ -18876,7 +18876,7 @@
</div>
- <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.3.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
+ <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
<p>Sometimes, an image just consists of text, and the purpose of the
image is not to highlight the actual typographic effects used to
@@ -18900,7 +18900,7 @@
- <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.3.1.5 </span>A graphical representation of some of the surrounding text</h6>
+ <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</h6>
<p>In many cases, the image is actually just supplementary, and
its presence merely reinforces the surrounding text. In these
@@ -18982,7 +18982,7 @@
- <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.3.1.6 </span>A purely decorative image that doesn't add any information</h6>
+ <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</h6>
<p>In general, if an image is decorative but isn't especially
page-specific, for example an image that forms part of a site-wide
@@ -19020,7 +19020,7 @@
- <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.3.1.7 </span>A group of images that form a single larger picture with no links</h6>
+ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</h6>
<p>When a picture has been sliced into smaller image files that are
then displayed together to form the complete picture again, one of
@@ -19059,7 +19059,7 @@
- <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.3.1.8 </span>A group of images that form a single larger picture with links</h6>
+ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</h6>
<p>Generally, <a href=#image-map title="image map">image maps</a> should be
used instead of slicing an image for links.</p>
@@ -19087,7 +19087,7 @@
- <h6 id=a-key-part-of-the-content><span class=secno>4.8.3.1.9 </span>A key part of the content</h6>
+ <h6 id=a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</h6>
<p>In some cases, the image is a critical part of the
content. This could be the case, for instance, on a page that is
@@ -19360,7 +19360,7 @@
</dd>
- </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.3.1.10 </span>An image not intended for the user</h6>
+ </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</h6>
<p>Generally authors should avoid using <code><a href=#the-img-element>img</a></code> elements
for purposes other than showing images.</p>
@@ -19376,7 +19376,7 @@
- <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.3.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
+ <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
<p><i>This section does not apply to documents that are publicly
accessible, or whose target audience is not necessarily personally
@@ -19396,7 +19396,7 @@
- <h6 id=general-guidelines><span class=secno>4.8.3.1.12 </span>General guidelines</h6>
+ <h6 id=general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</h6>
<p>The most general rule to consider when writing alternative text
is the following: <strong>the intent is that replacing every image
@@ -19423,7 +19423,7 @@
<div class=impl>
- <h6 id=guidance-for-markup-generators><span class=secno>4.8.3.1.13 </span>Guidance for markup generators</h6>
+ <h6 id=guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</h6>
<p>Markup generators (such as WYSIWYG authoring tools) should,
wherever possible, obtain alternative text from their
@@ -19458,7 +19458,7 @@
<div class=impl>
- <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.3.1.14 </span>Guidance for conformance checkers</h6>
+ <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</h6>
<p>A conformance checker must report the lack of an <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute as an error unless either
the conditions listed above for <a href=#unknown-images>images
@@ -19473,7 +19473,7 @@
- <h4 id=the-iframe-element><span class=secno>4.8.4 </span>The <dfn><code>iframe</code></dfn> element</h4>
+ <h4 id=the-iframe-element><span class=secno>4.8.2 </span>The <dfn><code>iframe</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20178,7 +20178,7 @@
- <h4 id=the-embed-element><span class=secno>4.8.5 </span>The <dfn><code>embed</code></dfn> element</h4>
+ <h4 id=the-embed-element><span class=secno>4.8.3 </span>The <dfn><code>embed</code></dfn> element</h4>
<!-- (v2?)
we have all kinds of quirks we should define if they come up during
@@ -20465,7 +20465,7 @@
- <h4 id=the-object-element><span class=secno>4.8.6 </span>The <dfn><code>object</code></dfn> element</h4>
+ <h4 id=the-object-element><span class=secno>4.8.4 </span>The <dfn><code>object</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21036,7 +21036,7 @@
- <h4 id=the-param-element><span class=secno>4.8.7 </span>The <dfn><code>param</code></dfn> element</h4>
+ <h4 id=the-param-element><span class=secno>4.8.5 </span>The <dfn><code>param</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -21106,7 +21106,7 @@
</div>
- <h4 id=video><span class=secno>4.8.8 </span>The <dfn><code>video</code></dfn> element</h4>
+ <h4 id=video><span class=secno>4.8.6 </span>The <dfn><code>video</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21363,7 +21363,7 @@
- <h4 id=audio><span class=secno>4.8.9 </span>The <dfn><code>audio</code></dfn> element</h4>
+ <h4 id=audio><span class=secno>4.8.7 </span>The <dfn><code>audio</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21499,7 +21499,7 @@
- <h4 id=the-source-element><span class=secno>4.8.10 </span>The <dfn><code>source</code></dfn> element</h4>
+ <h4 id=the-source-element><span class=secno>4.8.8 </span>The <dfn><code>source</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -21650,7 +21650,7 @@
- <h4 id=media-elements><span class=secno>4.8.11 </span>Media elements</h4>
+ <h4 id=media-elements><span class=secno>4.8.9 </span>Media elements</h4>
<p><dfn id=media-element title="media element">Media elements</dfn> implement the
following interface:</p>
@@ -21782,7 +21782,7 @@
- <h5 id=error-codes><span class=secno>4.8.11.1 </span>Error codes</h5>
+ <h5 id=error-codes><span class=secno>4.8.9.1 </span>Error codes</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>
@@ -21851,7 +21851,7 @@
<dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was not suitable.</dd>
- </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.11.2 </span>Location of the media resource</h5>
+ </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.9.2 </span>Location of the media resource</h5>
<p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content
attribute on <a href=#media-element title="media element">media elements</a> gives
@@ -21898,7 +21898,7 @@
- <h5 id=mime-types><span class=secno>4.8.11.3 </span>MIME types</h5>
+ <h5 id=mime-types><span class=secno>4.8.9.3 </span>MIME types</h5>
<p>A <a href=#media-resource>media resource</a> can be described in terms of its
<em>type</em>, specifically a <a href=#mime-type>MIME type</a>, optionally
@@ -21994,7 +21994,7 @@
render.</p>
- <h5 id=network-states><span class=secno>4.8.11.4 </span>Network states</h5>
+ <h5 id=network-states><span class=secno>4.8.9.4 </span>Network states</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>
@@ -22047,7 +22047,7 @@
- <h5 id=loading-the-media-resource><span class=secno>4.8.11.5 </span>Loading the media resource</h5>
+ <h5 id=loading-the-media-resource><span class=secno>4.8.9.5 </span>Loading the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>
@@ -22815,7 +22815,7 @@
- <h5 id=offsets-into-the-media-resource><span class=secno>4.8.11.6 </span>Offsets into the media resource</h5>
+ <h5 id=offsets-into-the-media-resource><span class=secno>4.8.9.6 </span>Offsets into the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>
@@ -22952,7 +22952,7 @@
- <h5 id=the-ready-states><span class=secno>4.8.11.7 </span>The ready states</h5>
+ <h5 id=the-ready-states><span class=secno>4.8.9.7 </span>The ready states</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>
@@ -23260,7 +23260,7 @@
-->
- <h5 id=playing-the-media-resource><span class=secno>4.8.11.8 </span>Playing the media resource</h5>
+ <h5 id=playing-the-media-resource><span class=secno>4.8.9.8 </span>Playing the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>
@@ -23695,7 +23695,7 @@
- <h5 id=seeking><span class=secno>4.8.11.9 </span>Seeking</h5>
+ <h5 id=seeking><span class=secno>4.8.9.9 </span>Seeking</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>
@@ -23811,7 +23811,7 @@
</div>
- <h5 id=user-interface><span class=secno>4.8.11.10 </span>User interface</h5>
+ <h5 id=user-interface><span class=secno>4.8.9.10 </span>User interface</h5>
<p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
@@ -23916,7 +23916,7 @@
- <h5 id=time-ranges><span class=secno>4.8.11.11 </span>Time ranges</h5>
+ <h5 id=time-ranges><span class=secno>4.8.9.11 </span>Time ranges</h5>
<p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
represent a list of ranges (periods) of time.</p>
@@ -23994,7 +23994,7 @@
</div>
- <h5 id=mediaevents><span class=secno>4.8.11.12 </span>Event summary</h5>
+ <h5 id=mediaevents><span class=secno>4.8.9.12 </span>Event summary</h5>
<p><i>This section is non-normative.</i></p>
@@ -24102,7 +24102,7 @@
<td>
</table><div class=impl>
- <h5 id=security-and-privacy-considerations><span class=secno>4.8.11.13 </span>Security and privacy considerations</h5>
+ <h5 id=security-and-privacy-considerations><span class=secno>4.8.9.13 </span>Security and privacy considerations</h5>
<p>The main security and privacy implications of the
<code><a href=#video>video</a></code> and <code><a href=#audio>audio</a></code> elements come from the
@@ -24150,7 +24150,7 @@
</div>
- <h4 id=the-canvas-element><span class=secno>4.8.12 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
+ <h4 id=the-canvas-element><span class=secno>4.8.10 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -24399,7 +24399,7 @@
- <h5 id=2dcontext><span class=secno>4.8.12.1 </span>The 2D context</h5>
+ <h5 id=2dcontext><span class=secno>4.8.10.1 </span>The 2D context</h5>
<!-- v2: we're on v4. suggestions for next version are marked v5. -->
@@ -24601,7 +24601,7 @@
- <h6 id=the-canvas-state><span class=secno>4.8.12.1.1 </span>The canvas state</h6>
+ <h6 id=the-canvas-state><span class=secno>4.8.10.1.1 </span>The canvas state</h6>
<p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
@@ -24661,7 +24661,7 @@
</div>
- <h6 id=transformations><span class=secno>4.8.12.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+ <h6 id=transformations><span class=secno>4.8.10.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
<p>The transformation matrix is applied to coordinates when creating
shapes and paths.</p> <!-- conformance criteria for actual drawing
@@ -24766,7 +24766,7 @@
</div>
- <h6 id=compositing><span class=secno>4.8.12.1.3 </span>Compositing</h6>
+ <h6 id=compositing><span class=secno>4.8.10.1.3 </span>Compositing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
@@ -24922,7 +24922,7 @@
</div>
- <h6 id=colors-and-styles><span class=secno>4.8.12.1.4 </span>Colors and styles</h6>
+ <h6 id=colors-and-styles><span class=secno>4.8.10.1.4 </span>Colors and styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
@@ -25286,7 +25286,7 @@
- <h6 id=line-styles><span class=secno>4.8.12.1.5 </span>Line styles</h6>
+ <h6 id=line-styles><span class=secno>4.8.10.1.5 </span>Line styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
@@ -25458,7 +25458,7 @@
</div>
- <h6 id=shadows><span class=secno>4.8.12.1.6 </span><dfn>Shadows</dfn></h6>
+ <h6 id=shadows><span class=secno>4.8.10.1.6 </span><dfn>Shadows</dfn></h6>
<p>All drawing operations are affected by the four global shadow
attributes.</p>
@@ -25593,7 +25593,7 @@
(since the shape will overwrite the shadow).</p>
- <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.12.1.7 </span>Simple shapes (rectangles)</h6>
+ <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.10.1.7 </span>Simple shapes (rectangles)</h6>
<p>There are three methods that immediately draw rectangles to the
bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -25663,7 +25663,7 @@
</div>
- <h6 id=complex-shapes-(paths)><span class=secno>4.8.12.1.8 </span>Complex shapes (paths)</h6>
+ <h6 id=complex-shapes-(paths)><span class=secno>4.8.10.1.8 </span>Complex shapes (paths)</h6>
<p>The context always has a current path. There is only one current
path, it is not part of the <a href=#drawing-state>drawing state</a>.</p>
@@ -26020,7 +26020,7 @@
</div>
- <h6 id=focus-management-0><span class=secno>4.8.12.1.9 </span>Focus management</h6> <!-- a v4 feature -->
+ <h6 id=focus-management-0><span class=secno>4.8.10.1.9 </span>Focus management</h6> <!-- a v4 feature -->
<p>When a canvas is interactive, authors should include focusable
elements in the element's fallback content corresponding to each
@@ -26164,7 +26164,7 @@
</div>
- <h6 id=text><span class=secno>4.8.12.1.10 </span>Text</h6> <!-- a v3 feature -->
+ <h6 id=text><span class=secno>4.8.10.1.10 </span>Text</h6> <!-- a v3 feature -->
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
@@ -26673,7 +26673,7 @@
- <h6 id=images><span class=secno>4.8.12.1.11 </span>Images</h6>
+ <h6 id=images><span class=secno>4.8.10.1.11 </span>Images</h6>
<p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
@@ -26797,7 +26797,7 @@
- <h6 id=pixel-manipulation><span class=secno>4.8.12.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.10.1.12 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -27157,7 +27157,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.12.1.13 </span>Drawing model</h6>
+ <h6 id=drawing-model><span class=secno>4.8.10.1.13 </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):</p>
@@ -27187,7 +27187,7 @@
</ol></div>
- <h6 id=examples><span class=secno>4.8.12.1.14 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.10.1.14 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
@@ -27240,7 +27240,7 @@
<div class=impl>
- <h5 id=color-spaces-and-color-correction><span class=secno>4.8.12.2 </span>Color spaces and color correction</h5>
+ <h5 id=color-spaces-and-color-correction><span class=secno>4.8.10.2 </span>Color spaces and color correction</h5>
<p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at
only two points: when rendering images with their own gamma
@@ -27282,7 +27282,7 @@
<div class=impl>
- <h5 id=security-with-canvas-elements><span class=secno>4.8.12.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+ <h5 id=security-with-canvas-elements><span class=secno>4.8.10.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
<p><strong>Information leakage</strong> can occur if scripts from
one <a href=#origin>origin</a> can access information (e.g. read pixels)
@@ -27350,7 +27350,7 @@
- <h4 id=the-map-element><span class=secno>4.8.13 </span>The <dfn><code>map</code></dfn> element</h4>
+ <h4 id=the-map-element><span class=secno>4.8.11 </span>The <dfn><code>map</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -27421,7 +27421,7 @@
- <h4 id=the-area-element><span class=secno>4.8.14 </span>The <dfn><code>area</code></dfn> element</h4>
+ <h4 id=the-area-element><span class=secno>4.8.12 </span>The <dfn><code>area</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -27626,7 +27626,7 @@
</div>
- <h4 id=image-maps><span class=secno>4.8.15 </span>Image maps</h4>
+ <h4 id=image-maps><span class=secno>4.8.13 </span>Image maps</h4>
<!-- TESTS
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
@@ -27637,7 +27637,7 @@
<div class=impl>
- <h5 id=authoring><span class=secno>4.8.15.1 </span>Authoring</h5>
+ <h5 id=authoring><span class=secno>4.8.13.1 </span>Authoring</h5>
</div>
@@ -27679,7 +27679,7 @@
<div class=impl>
- <h5 id=processing-model><span class=secno>4.8.15.2 </span>Processing model</h5>
+ <h5 id=processing-model><span class=secno>4.8.13.2 </span>Processing model</h5>
<p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element
representing an image has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified,
@@ -27879,7 +27879,7 @@
- <h4 id=mathml><span class=secno>4.8.16 </span>MathML</h4>
+ <h4 id=mathml><span class=secno>4.8.14 </span>MathML</h4>
<p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML
namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -27953,7 +27953,7 @@
- <h4 id=svg-0><span class=secno>4.8.17 </span>SVG</h4>
+ <h4 id=svg-0><span class=secno>4.8.15 </span>SVG</h4>
<p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG
namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -27993,7 +27993,7 @@
- <h4 id=dimension-attributes><span class=secno>4.8.18 </span><dfn>Dimension attributes</dfn></h4>
+ <h4 id=dimension-attributes><span class=secno>4.8.16 </span><dfn>Dimension attributes</dfn></h4>
<p><span class=impl><strong>Author requirements</strong>:</span>
The <dfn id=attr-dim-width title=attr-dim-width><code>width</code></dfn> and <dfn id=attr-dim-height title=attr-dim-height><code>height</code></dfn> attributes on
Modified: source
===================================================================
--- source 2010-02-06 10:38:43 UTC (rev 4681)
+++ source 2010-02-06 10:50:44 UTC (rev 4682)
@@ -16596,8 +16596,163 @@
</div>
+ <h4>The <dfn><code>figure</code></dfn> element</h4>
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Sectioning root</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>flow content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd>Either: One <code>figcaption</code> element followed by <span>phrasing content</span>.</dd>
+ <dd>Or: <span>Phrasing content</span> followed by one <code>figcaption</code> element.</dd>
+ <dd>Or: <span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+ <!-- v2: Add a <credit> element for photo credits -->
+
+ <p>The <code>figure</code> element <span>represents</span> some
+ <span>flow content</span>, optionally with a caption, that is
+ self-contained and is typically referenced as a single unit from the
+ main flow of the document.</p>
+
+ <p>The element can thus be used to annotate illustrations, diagrams,
+ photos, code listings, etc, that are referred to from the main
+ content of the document, but that could, without affecting the flow
+ of the document, be moved away from that primary content, e.g. to
+ the side of the page, to dedicated pages, or to an appendix.</p>
+
+ <p>The <span class="impl">first</span> <code>figcaption</code>
+ element child of the element, if any, represents the caption of the
+ <code>figure</code> element's contents. If there is no child
+ <code>figcaption</code> element, then there is no caption.</p>
+
+ <div class="example">
+
+ <p>This example shows the <code>figure</code> element to mark up a
+ code listing.</p>
+
+ <pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
+API declaration.</p>
+<figure id="l4">
+ <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
+ <pre><code>interface PrimaryCore {
+ boolean verifyDataLine();
+ void sendData(in sequence<byte> data);
+ void initSelfDestruct();
+}</code></pre>
+</figure>
+<p>The API is designed to use UTF-8.</p></pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>Here we see a <code>figure</code> element to mark up a
+ photo.</p>
+
+ <pre><figure>
+ <img src="bubbles-work.jpeg"
+ alt="Bubbles, sitting in his office chair, works on his
+ latest project intently.">
+ <figcaption>Bubbles at work</figcaption>
+</figure></pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>In this example, we see an image that is <em>not</em>
+ a figure, as well as an image and a video that are.</p>
+
+ <pre><h2>Malinko's comics</h2>
+
+<p>This case centered on some sort of "intellectual property"
+infringement related to a comic (see Exhibit A). The suit started
+after a trailer ending with these words:
+
+<blockquote>
+ <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+</blockquote>
+
+<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
+preemptive strike using snowballs. A complete copy of the trailer is
+included with Exhibit B.
+
+<figure>
+ <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
+</figure>
+
+<figure>
+ <video src="ex-b.mov"></video>
+ <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
+</figure>
+
+<p>The case was resolved out of court.</pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>Here, a part of a poem is marked up using
+ <code>figure</code>.</p>
+
+ <pre><figure>
+ <p>'Twas brillig, and the slithy toves<br>
+ Did gyre and gimble in the wabe;<br>
+ All mimsy were the borogoves,<br>
+ And the mome raths outgrabe.</p>
+ <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
+</figure></pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>In this example, which could be part of a much larger work
+ discussing a castle, the figure has three images in it.</p>
+
+ <pre><figure>
+ <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
+ alt="The castle has one tower, and a tall wall around it.">
+ <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
+ alt="The castle now has two towers and two walls.">
+ <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
+ alt="The castle lies in ruins, the original tower all that remains in one piece.">
+ <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
+</figure></pre>
+
+ </div>
+
+
+ <h4>The <dfn><code>figcaption</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd>None.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>As the first or last child of a <code>figure</code> element.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>figcaption</code> element <span>represents</span> a
+ caption or legend for the rest of the contents of the
+ <code>figcaption</code> element's parent <code>figure</code>
+ element<span class="impl">, if any</span>.</p>
+
+
+
<h4>The <dfn><code>div</code></dfn> element</h4>
<dl class="element">
@@ -19165,162 +19320,7 @@
<h3>Embedded content</h3>
- <h4>The <dfn><code>figure</code></dfn> element</h4>
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Sectioning root</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>flow content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd>Either: One <code>figcaption</code> element followed by <span>phrasing content</span>.</dd>
- <dd>Or: <span>Phrasing content</span> followed by one <code>figcaption</code> element.</dd>
- <dd>Or: <span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl>
-
- <!-- v2: Add a <credit> element for photo credits -->
-
- <p>The <code>figure</code> element <span>represents</span> some
- <span>flow content</span>, optionally with a caption, that is
- self-contained and is typically referenced as a single unit from the
- main flow of the document.</p>
-
- <p>The element can thus be used to annotate illustrations, diagrams,
- photos, code listings, etc, that are referred to from the main
- content of the document, but that could, without affecting the flow
- of the document, be moved away from that primary content, e.g. to
- the side of the page, to dedicated pages, or to an appendix.</p>
-
- <p>The <span class="impl">first</span> <code>figcaption</code>
- element child of the element, if any, represents the caption of the
- <code>figure</code> element's contents. If there is no child
- <code>figcaption</code> element, then there is no caption.</p>
-
- <div class="example">
-
- <p>This example shows the <code>figure</code> element to mark up a
- code listing.</p>
-
- <pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
-API declaration.</p>
-<figure id="l4">
- <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
- <pre><code>interface PrimaryCore {
- boolean verifyDataLine();
- void sendData(in sequence<byte> data);
- void initSelfDestruct();
-}</code></pre>
-</figure>
-<p>The API is designed to use UTF-8.</p></pre>
-
- </div>
-
- <div class="example">
-
- <p>Here we see a <code>figure</code> element to mark up a
- photo.</p>
-
- <pre><figure>
- <img src="bubbles-work.jpeg"
- alt="Bubbles, sitting in his office chair, works on his
- latest project intently.">
- <figcaption>Bubbles at work</figcaption>
-</figure></pre>
-
- </div>
-
- <div class="example">
-
- <p>In this example, we see an image that is <em>not</em>
- a figure, as well as an image and a video that are.</p>
-
- <pre><h2>Malinko's comics</h2>
-
-<p>This case centered on some sort of "intellectual property"
-infringement related to a comic (see Exhibit A). The suit started
-after a trailer ending with these words:
-
-<blockquote>
- <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
-</blockquote>
-
-<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
-preemptive strike using snowballs. A complete copy of the trailer is
-included with Exhibit B.
-
-<figure>
- <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
- <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
-</figure>
-
-<figure>
- <video src="ex-b.mov"></video>
- <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
-</figure>
-
-<p>The case was resolved out of court.</pre>
-
- </div>
-
- <div class="example">
-
- <p>Here, a part of a poem is marked up using
- <code>figure</code>.</p>
-
- <pre><figure>
- <p>'Twas brillig, and the slithy toves<br>
- Did gyre and gimble in the wabe;<br>
- All mimsy were the borogoves,<br>
- And the mome raths outgrabe.</p>
- <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
-</figure></pre>
-
- </div>
-
- <div class="example">
-
- <p>In this example, which could be part of a much larger work
- discussing a castle, the figure has three images in it.</p>
-
- <pre><figure>
- <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
- alt="The castle has one tower, and a tall wall around it.">
- <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
- alt="The castle now has two towers and two walls.">
- <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
- alt="The castle lies in ruins, the original tower all that remains in one piece.">
- <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
-</figure></pre>
-
- </div>
-
-
- <h4>The <dfn><code>figcaption</code></dfn> element</h4>
-
- <dl class="element">
- <dt>Categories</dt>
- <dd>None.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>As the first or last child of a <code>figure</code> element.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl>
-
- <p>The <code>figcaption</code> element <span>represents</span> a
- caption or legend for the rest of the contents of the
- <code>figcaption</code> element's parent <code>figure</code>
- element<span class="impl">, if any</span>.</p>
-
-
<h4>The <dfn><code>img</code></dfn> element</h4>
<dl class="element">
More information about the Commit-Watchers
mailing list