[html5] r1081 - /

[whatwg at whatwg.org]

Author: ianh
Date: 2007-10-19 13:06:43 -0700 (Fri, 19 Oct 2007)
New Revision: 1081

Modified:
   index
   source
Log:
[] (0) Add more examples for <meter>; Mention units.

Modified: index
===================================================================
--- index	2007-10-19 18:58:52 UTC (rev 1080)
+++ index	2007-10-19 20:06:43 UTC (rev 1081)
@@ -11094,8 +11094,40 @@
 <meter>max: 100; current: 75</meter>
 <meter><object data="graph75.png">0.75</object></meter>
 <meter min="0" max="100" value="75"></meter></pre>
+
+   <p>The following example is incorrect use of the element, because it
+    doesn't give a range (and since the default maximum is 1, both of the
+    gauges would end up looking maxed out):</p>
+
+   <pre><p>The grapefruit pie had a radius of <meter>12cm</meter>
+and a height of <meter>2cm</meter>.</p> <!-- <strong>BAD!</strong> --></pre>
+
+   <p>Instead, one would either not include the meter element, or use the
+    meter element with a defined range to give the dimensions in context
+    compared to other pies:</p>
+
+   <pre><p>The grapefruit pie had a radius of 12cm and a height of
+2cm.</p>
+<dl>
+ <dt>Radius: <dd> <meter max=20 min=0 value=12>12cm</meter>
+ <dt>Height: <dd> <meter max=10 min=0 value=2>2cm</meter>
+</dl></pre>
   </div>
 
+  <p>There is no explicit way to specify units in the <code><a
+   href="#meter">meter</a></code> element, but the units may be specified in
+   the <code title=attr-title><a href="#title">title</a></code> attribute in
+   freeform text.
+
+  <div class=example>
+   <p>The example above could be extended to mention the units:</p>
+
+   <pre><dl>
+ <dt>Radius: <dd> <meter max=20 min=0 title=centimeters value=12>12cm</meter>
+ <dt>Height: <dd> <meter max=10 min=0 title=centimeters value=2>2cm</meter>
+</dl></pre>
+  </div>
+
   <p><strong>User agent requirements</strong>: User agents must parse the
    <code title=attr-meter-min><a href="#min">min</a></code>, <code
    title=attr-meter-max><a href="#max1">max</a></code>, <code
@@ -11297,6 +11329,19 @@
     varying lengths." src="images/sample-meter.png"></p>
   </div>
 
+  <p>User agents may combine the value of the <code title=attr-title><a
+   href="#title">title</a></code> attribute and the other attributes to
+   provide context-sensitive help or inline text detailing the actual values.
+
+  <div class=example>
+   <p>For example, the following snippet:</p>
+
+   <pre><meter min=0 max=60 value=23.2 title=seconds></meter></pre>
+
+   <p>...might cause the user agent to display a gauge with a tooltip saying
+    "Value: 23.2 out of 60." on one line and "seconds" on a second line.</p>
+  </div>
+
   <p>The <dfn id=min0 title=dom-meter-min><code>min</code></dfn>, <dfn
    id=max2 title=dom-meter-max><code>max</code></dfn>, <dfn id=value4
    title=dom-meter-value><code>value</code></dfn>, <dfn id=low0

Modified: source
===================================================================
--- source	2007-10-19 18:58:52 UTC (rev 1080)
+++ source	2007-10-19 20:06:43 UTC (rev 1081)
@@ -9158,8 +9158,41 @@
 <meter><object data="graph75.png">0.75</object></meter>
 <meter min="0" max="100" value="75"></meter></pre>
 
+   <p>The following example is incorrect use of the element, because
+   it doesn't give a range (and since the default maximum is 1, both
+   of the gauges would end up looking maxed out):</p>
+
+   <pre><p>The grapefruit pie had a radius of <meter>12cm</meter>
+and a height of <meter>2cm</meter>.</p> <!-- <strong>BAD!</strong> --></pre>
+
+   <p>Instead, one would either not include the meter element, or use
+   the meter element with a defined range to give the dimensions in
+   context compared to other pies:</p>
+
+   <pre><p>The grapefruit pie had a radius of 12cm and a height of
+2cm.</p>
+<dl>
+ <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
+ <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
+</dl></pre>
+
   </div>
 
+  <p>There is no explicit way to specify units in the
+  <code>meter</code> element, but the units may be specified in the
+  <code title="attr-title">title</code> attribute in freeform text.</p>
+
+  <div class="example">
+
+   <p>The example above could be extended to mention the units:</p>
+
+   <pre><dl>
+ <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
+ <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
+</dl></pre>
+
+  </div>
+
   <p><strong>User agent requirements</strong>: User agents must parse
   the <code title="attr-meter-min">min</code>, <code
   title="attr-meter-max">max</code>, <code
@@ -9374,6 +9407,19 @@
    <p><img src="images/sample-meter.png" alt="With the <meter> elements rendered as inline green bars of varying lengths."></p>
   </div>
 
+  <p>User agents may combine the value of the <code
+  title="attr-title">title</code> attribute and the other attributes
+  to provide context-sensitive help or inline text detailing the
+  actual values.</p>
+
+  <div class="example">
+   <p>For example, the following snippet:</p>
+   <pre><meter min=0 max=60 value=23.2 title=seconds></meter></pre>
+   <p>...might cause the user agent to display a gauge with a tooltip
+   saying "Value: 23.2 out of 60." on one line and "seconds" on a
+   second line.</p>
+  </div>
+
   <p>The <dfn title="dom-meter-min"><code>min</code></dfn>, <dfn
   title="dom-meter-max"><code>max</code></dfn>, <dfn
   title="dom-meter-value"><code>value</code></dfn>, <dfn