7

There is a new tag called <meter> in HTML5 specification. It has three attributes which are so clear to understand, but their functionality and visual effects are not so clear. They are high, low and optimum.

I saw some meter elements in red or yellow color, and I guess these colors are related to those attributes. But I don't know how.

Can anyone describe it for me?

Smi
  • 13,850
  • 9
  • 56
  • 64
Ahmad
  • 5,551
  • 8
  • 41
  • 57
  • http://www.w3.org/TR/html5/forms.html#the-meter-element and http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element – j08691 Jul 17 '13 at 18:35
  • As I told the specifications are understandable, but their functionality is not. – Ahmad Jul 17 '13 at 18:41

2 Answers2

10

The spec doesn't really specify the colors. For the default styles, in Firefox 22 and Safari 6,

  • If low < optimum < high:

    • If the value is < low or > high, it is displayed as yellow,
    • Otherwise green (optimum has not effect).

  • If low < high < optimum:

    • If the value is < low, it is displayed as red.
    • If the value is < high, it is displayed as yellow.
    • Otherwise green.

  • If optimum < low < high:

    • If the value is > high, it is displayed as red.
    • If the value is > low, it is displayed as yellow.
    • Otherwise green.

This is actually what the spec said:

UA requirements for regions of the gauge: If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region from the low boundary up to the high boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region. Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region from the high boundary down to the low boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.

We use green for the optimum region, yellow for the suboptimal region and red for even less good region.

BTW you could style the <meter> element (see How to style HTML5 <meter> tag).

Community
  • 1
  • 1
kennytm
  • 510,854
  • 105
  • 1,084
  • 1,005
  • Thanks for the `optimum` comparison; I was pulling my hair out when I had some meters where low=0.2 high=0.4 value=0.5, and no optimum, and the colors were basically backwards! – Mark Stewart Dec 09 '15 at 21:11
1

understanding the functionality and the visual effect of those 3 segments (low, optimum, high) depends on the attributes specified on meter element and their values; the same value can be displayed in different colors (green/yellow/red) depending on the type of its segment

for a clear understanding of meter colors, values, segments watch this video

Daniel
  • 379
  • 2
  • 6
  • 2
    Note that [link-only answers are discouraged](http://meta.stackoverflow.com/tags/link-only-answers/info), SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Jan 30 '14 at 10:38