Skip to content

Commit

Permalink
[e] (0) <hr> and <span> examples.
Browse files Browse the repository at this point in the history
git-svn-id: http://svn.whatwg.org/webapps@3804 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Sep 11, 2009
1 parent 7f6c49e commit ae6dd3b
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 6 deletions.
57 changes: 54 additions & 3 deletions index
Expand Up @@ -14042,6 +14042,39 @@ To move the error from the markup to the rhyming.&lt;/p&gt;</pre>
a story, or a transition to another topic within a section of a
reference book.</p>

<div class=example>

<p>The following extract from <cite>Pandora's Star</cite> by Peter
F. Hamilton shows two paragraphs that precede a scene change and
the paragraph that follows it. The scene change, represented in the
printed book by a gap containing a solitary centered star between
the second and third paragraphs, is here represented using the
<code><a href=#the-hr-element>hr</a></code> element.</p>

<!-- ISBN 1-4050-0020-1; bottom of page 14 -->

<pre lang=en-GB>&lt;p&gt;Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwearth could be
appallingly backward at times, not to mention cruel.&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Maybe it won't be that bad&lt;/i&gt;, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.&lt;/p&gt;
<strong>&lt;hr&gt;</strong>
&lt;p&gt;The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.&lt;/p&gt;</pre>

</div>



<h4 id=the-br-element><span class=secno>4.5.3 </span>The <dfn><code>br</code></dfn> element</h4>

Expand Down Expand Up @@ -16070,7 +16103,6 @@ flavors of ice cream to be available for purchase!&lt;/p&gt;</pre>
&lt;/legend&gt;
&lt;/figure&gt;</pre>


</div>


Expand Down Expand Up @@ -16225,8 +16257,6 @@ For example, the 10th point has coordinate





<h4 id=the-i-element><span class=secno>4.6.15 </span>The <dfn><code>i</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
Expand Down Expand Up @@ -16672,6 +16702,7 @@ wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
</div>



<h4 id=the-meter-element><span class=secno>4.6.19 </span>The <dfn><code>meter</code></dfn> element</h4>
<!-- Keep this after <progress> and NOT close to <time> -->

Expand Down Expand Up @@ -17343,6 +17374,9 @@ and a height of &lt;meter&gt;2cm&lt;/meter&gt;.&lt;/p&gt; &lt;!-- <strong>BAD!</

</div>




<h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
Expand All @@ -17363,6 +17397,23 @@ and a height of &lt;meter&gt;2cm&lt;/meter&gt;.&lt;/p&gt; &lt;!-- <strong>BAD!</
e.g. <code title=attr-class><a href=#classes>class</a></code>, <code title=attr-lang><a href=#attr-lang>lang</a></code>, or <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>. It <a href=#represents>represents</a> its
children.</p>

<div class=example>

<p>In this example, a code fragment is marked up using
<code><a href=#the-span-element>span</a></code> elements and <code title=attr-class><a href=#classes>class</a></code> attributes so that its keywords and
identifiers can be color-coded from CSS:</p>

<!-- extract from http://www.cs.cmu.edu/~dst/DeCSS/Gallery/vlc-dvd_css-c.txt -->

<pre>&lt;pre&gt;&lt;code class="lang-c"&gt;&lt;span class="keyword"&gt;for&lt;/span&gt; (&lt;span class="ident"&gt;j&lt;/span&gt; = 0; &lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt; 256; &lt;span class="ident"&gt;j&lt;/span&gt;++) {
&lt;span class="ident"&gt;i_t3&lt;/span&gt; = (&lt;span class="ident"&gt;i_t3&lt;/span&gt; &amp; 0x1ffff) | (&lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt;&amp;lt; 17);
&lt;span class="ident"&gt;i_t6&lt;/span&gt; = (((((((&lt;span class="ident"&gt;i_t3&lt;/span&gt; &gt;&gt; 3) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 1) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 8) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 5) &amp; 0xff;
&lt;span class="keyword"&gt;if&lt;/span&gt; (&lt;span class="ident"&gt;i_t6&lt;/span&gt; == &lt;span class="ident"&gt;i_t1&lt;/span&gt;)
&lt;span class="keyword"&gt;break&lt;/span&gt;;
}&lt;/code&gt;&lt;/pre&gt;</pre>

</div>



<h4 id=usage-summary><span class=secno>4.6.25 </span>Usage summary</h4>
Expand Down
58 changes: 55 additions & 3 deletions source
Expand Up @@ -14987,6 +14987,39 @@ To move the error from the markup to the rhyming.&lt;/p&gt;</pre>
a story, or a transition to another topic within a section of a
reference book.</p>

<div class="example">

<p>The following extract from <cite>Pandora's Star</cite> by Peter
F. Hamilton shows two paragraphs that precede a scene change and
the paragraph that follows it. The scene change, represented in the
printed book by a gap containing a solitary centered star between
the second and third paragraphs, is here represented using the
<code>hr</code> element.</p>

<!-- ISBN 1-4050-0020-1; bottom of page 14 -->

<pre lang="en-GB">&lt;p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwearth could be
appallingly backward at times, not to mention cruel.&lt;/p>
&lt;p>&lt;i>Maybe it won't be that bad&lt;/i>, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.&lt;/p>
<strong>&lt;hr></strong>
&lt;p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.&lt;/p></pre>

</div>



<h4>The <dfn><code>br</code></dfn> element</h4>

Expand Down Expand Up @@ -17191,7 +17224,6 @@ flavors of ice cream to be available for purchase!&lt;/p></pre>
&lt;/legend>
&lt;/figure></pre>


</div>


Expand Down Expand Up @@ -17356,8 +17388,6 @@ For example, the 10th point has coordinate





<h4>The <dfn><code>i</code></dfn> element</h4>

<dl class="element">
Expand Down Expand Up @@ -17834,6 +17864,7 @@ wormhole connection.&lt;/mark>&lt;/p></pre>
</div>



<h4>The <dfn><code>meter</code></dfn> element</h4>
<!-- Keep this after <progress> and NOT close to <time> -->

Expand Down Expand Up @@ -18581,6 +18612,9 @@ and a height of &lt;meter>2cm&lt;/meter>.&lt;/p> &lt;!-- <strong>BAD!</strong> -

</div>




<h4>The <dfn><code>span</code></dfn> element</h4>

<dl class="element">
Expand All @@ -18606,6 +18640,24 @@ and a height of &lt;meter>2cm&lt;/meter>.&lt;/p> &lt;!-- <strong>BAD!</strong> -
title="attr-dir">dir</code>. It <span>represents</span> its
children.</p>

<div class="example">

<p>In this example, a code fragment is marked up using
<code>span</code> elements and <code
title="attr-class">class</code> attributes so that its keywords and
identifiers can be color-coded from CSS:</p>

<!-- extract from http://www.cs.cmu.edu/~dst/DeCSS/Gallery/vlc-dvd_css-c.txt -->

<pre>&lt;pre>&lt;code class="lang-c">&lt;span class="keyword">for&lt;/span> (&lt;span class="ident">j&lt;/span> = 0; &lt;span class="ident">j&lt;/span> &amp;lt; 256; &lt;span class="ident">j&lt;/span>++) {
&lt;span class="ident">i_t3&lt;/span> = (&lt;span class="ident">i_t3&lt;/span> & 0x1ffff) | (&lt;span class="ident">j&lt;/span> &amp;lt;&amp;lt; 17);
&lt;span class="ident">i_t6&lt;/span> = (((((((&lt;span class="ident">i_t3&lt;/span> >> 3) ^ &lt;span class="ident">i_t3&lt;/span>) >> 1) ^ &lt;span class="ident">i_t3&lt;/span>) >> 8) ^ &lt;span class="ident">i_t3&lt;/span>) >> 5) & 0xff;
&lt;span class="keyword">if&lt;/span> (&lt;span class="ident">i_t6&lt;/span> == &lt;span class="ident">i_t1&lt;/span>)
&lt;span class="keyword">break&lt;/span>;
}&lt;/code>&lt;/pre></pre>

</div>



<h4>Usage summary</h4>
Expand Down

0 comments on commit ae6dd3b

Please sign in to comment.