[html5] r1240 - /
whatwg at whatwg.org
whatwg at whatwg.org
Mon Feb 25 14:42:05 PST 2008
Author: ianh
Date: 2008-02-25 14:42:02 -0800 (Mon, 25 Feb 2008)
New Revision: 1240
Modified:
index
source
Log:
[avgiow] (2) make <figure>'s caption optional; define <figure> better; add examples
Modified: index
===================================================================
--- index 2008-02-22 21:24:32 UTC (rev 1239)
+++ index 2008-02-25 22:42:02 UTC (rev 1240)
@@ -24,7 +24,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=working>Working Draft — 22 February
+ <h2 class="no-num no-toc" id=working>Working Draft — 25 February
2008</h2>
<p>You can take part in this work. <a
@@ -12385,12 +12385,14 @@
<dt>Content model:
- <dd>Either one <code><a href="#legend">legend</a></code> element followed
+ <dd>Either: one <code><a href="#legend">legend</a></code> element followed
by <a href="#prose1">prose content</a>.
<dd>Or: <a href="#prose1">Prose content</a> followed by one <code><a
href="#legend">legend</a></code> element.
+ <dd>Or: <a href="#prose1">Prose content</a>.
+
<dt>Element-specific attributes:
<dd>None.
@@ -12402,17 +12404,112 @@
</dl>
<p>The <code><a href="#figure">figure</a></code> element represents some <a
- href="#prose1">prose content</a> with a caption.
+ href="#prose1">prose content</a>, optionally with a caption, which can be
+ moved away from the main flow of the document without affecting the
+ document's meaning.
+ <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>The first <code><a href="#legend">legend</a></code> element child of the
element, if any, represents the caption of the <code><a
href="#figure">figure</a></code> element's contents. If there is no child
<code><a href="#legend">legend</a></code> element, then there is no
caption.
- <p>The remainder of the element's contents, if any, represents the
- captioned content.
+ <p>The remainder of the element's contents, if any, represents the content.
+ <div class=example>
+ <p>This example shows the <code><a href="#figure">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">
+ <legend>Listing 4. The primary core interface API declaration.</legend>
+ <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="#figure">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.">
+ <legend>Bubbles at work</legend>
+</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:</p>
+
+<img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+
+<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
+pre-emptive strike using snowballs. A complete copy of the trailer is
+included with Exhibit B.</p>
+
+<figure>
+ <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ <legend>Exhibit A. The alleged <cite>rough copy</cite> comic.</legend>
+</figure>
+
+<figure>
+ <video src="ex-b.mov"></video>
+ <legend>Exhibit A. The alleged <cite>rough copy</cite> comic.</legend>
+</figure>
+
+<p>The case was resolved out of court.</p></pre>
+ </div>
+
+ <div class=example>
+ <p>Here, a part of a poem is marked up using <code><a
+ href="#figure">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>
+ <legend>Jabberwocky (first verse). Lewis Carroll, 1832-98</legend>
+</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.">
+ <legend>The castle through the ages: 1423, 1858, and 1999 respectively.</legend>
+</figure></pre>
+ </div>
+
<h4 id=the-img><span class=secno>3.14.2 </span>The <dfn
id=img><code>img</code></dfn> element</h4>
Modified: source
===================================================================
--- source 2008-02-22 21:24:32 UTC (rev 1239)
+++ source 2008-02-25 22:42:02 UTC (rev 1240)
@@ -10290,8 +10290,9 @@
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>prose content</span> is expected.</dd>
<dt>Content model:</dt>
- <dd>Either one <code>legend</code> element followed by <span>prose content</span>.</dd>
+ <dd>Either: one <code>legend</code> element followed by <span>prose content</span>.</dd>
<dd>Or: <span>Prose content</span> followed by one <code>legend</code> element.</dd>
+ <dd>Or: <span>Prose content</span>.</dd>
<dt>Element-specific attributes:</dt>
<dd>None.</dd>
<dt>DOM interface:</dt>
@@ -10299,17 +10300,123 @@
</dl>
<p>The <code>figure</code> element represents some <span>prose
- content</span> with a caption.</p>
+ content</span>, optionally with a caption, which can be moved away
+ from the main flow of the document without affecting the document's
+ meaning.</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 first <code>legend</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>legend</code> element, then
there is no caption.</p>
<p>The remainder of the element's contents, if any, represents the
- captioned content.</p>
+ content.</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">
+ <legend>Listing 4. The primary core interface API declaration.</legend>
+ <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.">
+ <legend>Bubbles at work</legend>
+</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:</p>
+
+<img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+
+<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
+pre-emptive strike using snowballs. A complete copy of the trailer is
+included with Exhibit B.</p>
+
+<figure>
+ <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ <legend>Exhibit A. The alleged <cite>rough copy</cite> comic.</legend>
+</figure>
+
+<figure>
+ <video src="ex-b.mov"></video>
+ <legend>Exhibit A. The alleged <cite>rough copy</cite> comic.</legend>
+</figure>
+
+<p>The case was resolved out of court.</p></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>
+ <legend>Jabberwocky (first verse). Lewis Carroll, 1832-98</legend>
+</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.">
+ <legend>The castle through the ages: 1423, 1858, and 1999 respectively.</legend>
+</figure></pre>
+
+ </div>
+
+
<h4>The <dfn><code>img</code></dfn> element</h4>
<dl class="element">
More information about the Commit-Watchers
mailing list