[html5] r1148 - /

[whatwg at whatwg.org]

Author: ianh
Date: 2007-12-12 00:09:16 -0800 (Wed, 12 Dec 2007)
New Revision: 1148

Modified:
   index
   source
Log:
[] (0) <pre> element: semantics and examples

Modified: index
===================================================================
--- index	2007-12-12 02:45:25 UTC (rev 1147)
+++ index	2007-12-12 08:09:16 UTC (rev 1148)
@@ -9470,21 +9470,64 @@
    <!-- XXX need a note about non-visual UAs -->
   </ul>
 
-  <p>If, ignoring <a href="#text-node" title="text node">text nodes</a>
-   consisting only of <a href="#inter-element" title="inter-element
-   whitespace">whitespace</a>, the only child of a <code><a
-   href="#pre">pre</a></code> is a <code><a href="#code">code</a></code>
-   element, then the <code><a href="#pre">pre</a></code> element represents a
-   block of computer code.
+  <p>To represent a block of computer code, the <code><a
+   href="#pre">pre</a></code> element can be used with a <code><a
+   href="#code">code</a></code> element; to represent a block of computer
+   output the <code><a href="#pre">pre</a></code> element can be used with a
+   <code><a href="#samp">samp</a></code> element. Similarly, the <code><a
+   href="#kbd">kbd</a></code> element can be used within a <code><a
+   href="#pre">pre</a></code> element to indicate text that the user is to
+   enter.
 
-  <p>If, ignoring <a href="#text-node" title="text node">text nodes</a>
-   consisting only of <a href="#inter-element" title="inter-element
-   whitespace">whitespace</a>, the only child of a <code><a
-   href="#pre">pre</a></code> is a <code><a href="#samp">samp</a></code>
-   element, then the <code><a href="#pre">pre</a></code> element represents a
-   block of computer output.</p>
-  <!-- XXX examples -->
+  <div class=example>
+   <p>In the following snippet, a sample of computer code is presented.</p>
 
+   <pre><p>This is the <code>Panel</code> constructor:</p>
+<pre><code>function Panel(element, canClose, closeHandler) {
+  this.element = element;
+  this.canClose = canClose;
+  this.closeHandler = function () { if (closeHandler) closeHandler() };
+}</code></pre></pre>
+  </div>
+
+  <div class=example>
+   <p>In the following snippet, <code><a href="#samp">samp</a></code> and
+    <code><a href="#kbd">kbd</a></code> elements are mixed in the contents of
+    a <code><a href="#pre">pre</a></code> element to show a session of Zork
+    I.</p>
+
+   <pre><pre><samp>You are in an open field west of a big white house with a boarded
+front door.
+There is a small mailbox here.
+
+</samp> <kbd>open mailbox</kbd>
+
+<samp>Opening the mailbox reveals:
+A leaflet.
+
+</samp>&lt/pre></pre>
+  </div>
+
+  <div class=example>
+   <p>The following shows a contemporary poem that uses the <code><a
+    href="#pre">pre</a></code> element to preserve its unusual formatting,
+    which forms an intrinsic part of the poem itself.</p>
+
+   <pre><pre>                maxling
+
+it is with a     heart
+            heavy
+
+that i admit loss of a feline
+        so           loved
+
+a friend lost to the
+        unknown
+                                (night)
+
+~cdr 11dec07&lt/pre></pre>
+  </div>
+
   <h3 id=lists0><span class=secno>3.11. </span>Lists</h3>
 
   <h4 id=the-ol><span class=secno>3.11.1. </span>The <dfn

Modified: source
===================================================================
--- source	2007-12-12 02:45:25 UTC (rev 1147)
+++ source	2007-12-12 08:09:16 UTC (rev 1148)
@@ -7718,21 +7718,69 @@
 
   </ul>
 
-  <p>If, ignoring <span title="text node">text nodes</span> consisting
-  only of <span title="inter-element whitespace">whitespace</span>,
-  the only child of a <code>pre</code> is a <code>code</code> element,
-  then the <code>pre</code> element represents a block of computer
-  code.</p>
+  <p>To represent a block of computer code, the <code>pre</code>
+  element can be used with a <code>code</code> element; to represent a
+  block of computer output the <code>pre</code> element can be used
+  with a <code>samp</code> element. Similarly, the <code>kbd</code>
+  element can be used within a <code>pre</code> element to indicate
+  text that the user is to enter.</p>
 
-  <p>If, ignoring <span title="text node">text nodes</span> consisting
-  only of <span title="inter-element whitespace">whitespace</span>,
-  the only child of a <code>pre</code> is a <code>samp</code> element,
-  then the <code>pre</code> element represents a block of computer
-  output.</p>
+  <div class="example">
 
-  <!-- XXX examples -->
+   <p>In the following snippet, a sample of computer code is
+   presented.</p>
 
+   <pre><p>This is the <code>Panel</code> constructor:</p>
+<pre><code>function Panel(element, canClose, closeHandler) {
+  this.element = element;
+  this.canClose = canClose;
+  this.closeHandler = function () { if (closeHandler) closeHandler() };
+}</code></pre></pre>
 
+  </div>
+
+  <div class="example">
+
+   <p>In the following snippet, <code>samp</code> and <code>kbd</code>
+   elements are mixed in the contents of a <code>pre</code> element to
+   show a session of Zork I.</p>
+
+   <pre><pre><samp>You are in an open field west of a big white house with a boarded
+front door.
+There is a small mailbox here.
+
+></samp> <kbd>open mailbox</kbd>
+
+<samp>Opening the mailbox reveals:
+A leaflet.
+
+></samp>&lt/pre></pre>
+
+  </div>
+
+  <div class="example">
+
+   <p>The following shows a contemporary poem that uses the
+   <code>pre</code> element to preserve its unusual formatting, which
+   forms an intrinsic part of the poem itself.</p>
+
+   <pre><pre>                maxling
+
+it is with a     heart
+            heavy
+
+that i admit loss of a feline
+        so           loved
+
+a friend lost to the
+        unknown
+                                (night)
+
+~cdr 11dec07&lt/pre></pre>
+
+  </div>
+
+
   <h3>Lists</h3>
 
   <h4>The <dfn><code>ol</code></dfn> element</h4>