[] (0) Add more examples for <meter>; Mention units.

git-svn-id: http://svn.whatwg.org/webapps@1081 340c8d12-0b0e-0410-8428-c7bf67bfef74

index

@@ -11094,6 +11094,38 @@ Applications over the World Wide Web.&lt;/p></pre>
 &lt;meter>max: 100; current: 75&lt;/meter>
 &lt;meter>&lt;object data="graph75.png">0.75&lt;/object>&lt;/meter>
 &lt;meter min="0" max="100" value="75">&lt;/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>&lt;p>The grapefruit pie had a radius of <meter>12cm</meter>
+and a height of <meter>2cm</meter>.&lt;/p> &lt;!-- <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>&lt;p>The grapefruit pie had a radius of 12cm and a height of
+2cm.&lt;/p>
+&lt;dl>
+ &lt;dt>Radius: &lt;dd> <meter max=20 min=0 value=12>12cm</meter>
+ &lt;dt>Height: &lt;dd> <meter max=10 min=0 value=2>2cm</meter>
+&lt;/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>&lt;dl>
+ &lt;dt>Radius: &lt;dd> <meter max=20 min=0 title=centimeters value=12>12cm</meter>
+ &lt;dt>Height: &lt;dd> <meter max=10 min=0 title=centimeters value=2>2cm</meter>
+&lt;/dl></pre>
   </div>
 
   <p><strong>User agent requirements</strong>: User agents must parse the
@@ -11297,6 +11329,19 @@ Applications over the World Wide Web.&lt;/p></pre>
     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>&lt;meter min=0 max=60 value=23.2 title=seconds>&lt;/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

source

@@ -9158,6 +9158,39 @@ Applications over the World Wide Web.&lt;/p></pre>
 &lt;meter>&lt;object data="graph75.png">0.75&lt;/object>&lt;/meter>
 &lt;meter min="0" max="100" value="75">&lt;/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>&lt;p>The grapefruit pie had a radius of <meter>12cm</meter>
+and a height of <meter>2cm</meter>.&lt;/p> &lt;!-- <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>&lt;p>The grapefruit pie had a radius of 12cm and a height of
+2cm.&lt;/p>
+&lt;dl>
+ &lt;dt>Radius: &lt;dd> <meter min=0 max=20 value=12>12cm</meter>
+ &lt;dt>Height: &lt;dd> <meter min=0 max=10 value=2>2cm</meter>
+&lt;/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>&lt;dl>
+ &lt;dt>Radius: &lt;dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
+ &lt;dt>Height: &lt;dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
+&lt;/dl></pre>
+
   </div>
 
   <p><strong>User agent requirements</strong>: User agents must parse
@@ -9374,6 +9407,19 @@ Applications over the World Wide Web.&lt;/p></pre>
    <p><img src="images/sample-meter.png" alt="With the &lt;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>&lt;meter min=0 max=60 value=23.2 title=seconds>&lt;/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