Skip to content

Commit

Permalink
[avgiow] (2) make <figure>'s caption optional; define <figure> better…
Browse files Browse the repository at this point in the history 
…; add examples

git-svn-id: http://svn.whatwg.org/webapps@1240 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Feb 25, 2008
1 parent 7fb8318 commit b656573
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 8 deletions.
107 changes: 102 additions & 5 deletions index
View file
Expand Up @@ -24,7 +24,7 @@

<h1 id=html-5>HTML 5</h1>

<h2 class="no-num no-toc" id=working>Working Draft &mdash; 22 February
<h2 class="no-num no-toc" id=working>Working Draft &mdash; 25 February
2008</h2>

<p>You can take part in this work. <a
Expand Down Expand Up @@ -12385,12 +12385,14 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>

<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.
Expand All @@ -12402,16 +12404,111 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
</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>&lt;p>In &lt;a href="#l4">listing 4&lt;/a> we see the primary core interface
API declaration.&lt;/p>
&lt;figure id="l4">
&lt;legend>Listing 4. The primary core interface API declaration.&lt;/legend>
&lt;pre>&lt;code>
interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence&amp;lt;byte> data);
void initSelfDestruct();
}
&lt;/code>&lt;/pre>
&lt;/figure>
&lt;p>The API is designed to use UTF-8.&lt;/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>&lt;figure>
&lt;img src="bubbles-work.jpeg"
alt="Bubbles, sitting in his office chair, works on his
latest project intently.">
&lt;legend>Bubbles at work&lt;/legend>
&lt;/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>&lt;h2>Malinko's comics&lt;/h2>

&lt;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:&lt;/p>

&lt;img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">

&lt;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.&lt;/p>

&lt;figure>
&lt;img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
&lt;legend>Exhibit A. The alleged &lt;cite>rough copy&lt;/cite> comic.&lt;/legend>
&lt;/figure>

&lt;figure>
&lt;video src="ex-b.mov">&lt;/video>
&lt;legend>Exhibit A. The alleged &lt;cite>rough copy&lt;/cite> comic.&lt;/legend>
&lt;/figure>

&lt;p>The case was resolved out of court.&lt;/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>&lt;figure>
&lt;p>'Twas brillig, and the slithy toves&lt;br>
Did gyre and gimble in the wabe;&lt;br>
All mimsy were the borogoves,&lt;br>
And the mome raths outgrabe.&lt;/p>
&lt;legend>Jabberwocky (first verse). Lewis Carroll, 1832-98&lt;/legend>
&lt;/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>&lt;figure>
&lt;img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
alt="The castle has one tower, and a tall wall around it.">
&lt;img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">
&lt;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.">
&lt;legend>The castle through the ages: 1423, 1858, and 1999 respectively.&lt;/legend>
&lt;/figure></pre>
</div>

<h4 id=the-img><span class=secno>3.14.2 </span>The <dfn
id=img><code>img</code></dfn> element</h4>
Expand Down
113 changes: 110 additions & 3 deletions source
View file
Expand Up @@ -10290,24 +10290,131 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
<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>
<dd>No difference from <code>HTMLElement</code>.</dd>
</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>&lt;p>In &lt;a href="#l4">listing 4&lt;/a> we see the primary core interface
API declaration.&lt;/p>
&lt;figure id="l4">
&lt;legend>Listing 4. The primary core interface API declaration.&lt;/legend>
&lt;pre>&lt;code>
interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence&amp;lt;byte> data);
void initSelfDestruct();
}
&lt;/code>&lt;/pre>
&lt;/figure>
&lt;p>The API is designed to use UTF-8.&lt;/p></pre>

</div>

<div class="example">

<p>Here we see a <code>figure</code> element to mark up a
photo.</p>

<pre>&lt;figure>
&lt;img src="bubbles-work.jpeg"
alt="Bubbles, sitting in his office chair, works on his
latest project intently.">
&lt;legend>Bubbles at work&lt;/legend>
&lt;/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>&lt;h2>Malinko's comics&lt;/h2>

&lt;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:&lt;/p>

&lt;img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">

&lt;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.&lt;/p>

&lt;figure>
&lt;img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
&lt;legend>Exhibit A. The alleged &lt;cite>rough copy&lt;/cite> comic.&lt;/legend>
&lt;/figure>

&lt;figure>
&lt;video src="ex-b.mov">&lt;/video>
&lt;legend>Exhibit A. The alleged &lt;cite>rough copy&lt;/cite> comic.&lt;/legend>
&lt;/figure>

&lt;p>The case was resolved out of court.&lt;/p></pre>

</div>

<div class="example">

<p>Here, a part of a poem is marked up using
<code>figure</code>.</p>

<pre>&lt;figure>
&lt;p>'Twas brillig, and the slithy toves&lt;br>
Did gyre and gimble in the wabe;&lt;br>
All mimsy were the borogoves,&lt;br>
And the mome raths outgrabe.&lt;/p>
&lt;legend>Jabberwocky (first verse). Lewis Carroll, 1832-98&lt;/legend>
&lt;/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>&lt;figure>
&lt;img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
alt="The castle has one tower, and a tall wall around it.">
&lt;img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">
&lt;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.">
&lt;legend>The castle through the ages: 1423, 1858, and 1999 respectively.&lt;/legend>
&lt;/figure></pre>

</div>


<h4>The <dfn><code>img</code></dfn> element</h4>
Expand Down

0 comments on commit b656573

Please sign in to comment.