Re: tweaking meter [was: Re: <meter> and <progress> (was RE: Implementor feedback on new elements in HTML5)]

On Wed, Sep 2, 2009 at 12:22 PM, Jim Jewett<jimjjewett@gmail.com> wrote:
> On Wed, Sep 2, 2009 at 11:19 AM, Tab Atkins Jr.<jackalmage@gmail.com> wrote:
>> On Wed, Sep 2, 2009 at 9:38 AM, Jim Jewett<jimjjewett@gmail.com> wrote:
>
>>> I think meter should be an appropriate element
>>> for things like "number of posts" or "member
>>> for X months". ... [but] there is no *hard* maximum
>
>> ...  It doesn't seem to make sense
>> to try and represent these as a meter - there's no
>> way to represent this visually. (Exception: you can
>> always define a mapping from [0,inf) to [0,100)
>
> Right -- my thought is that instead of the author supplying (and the
> UA trying to accomodate) a theoretical maximum, they should stop at
> the normal maximum.
>
> For example, any temperature more than 10 degrees outside of normal
> would be represented (for visual-at-a-glance viewing) as "overfull" or
> "underempty", with the percentage full ("-----           ")
> representations saved for distinguishing between different "normal"
> values.

I'm not sure what this means in terms of authoring.  Is the author
still giving a max/min, and the <meter> merely displaying differently
above/below those levels?

A potential solution: if max and min aren't supplied, but low and high
are, then the low/high regions extend to +-inf.  When the value is
within those regions the <meter> doesn't display as a deterministic
percentage, but as a special indicator of overflow/underflow.

>>> Should meter have the ability to define multiple
>>> category breaks, such as
>
>>>    val < 0.5 ==> star0
>>>    0.5 < val <1.5 ==> star1
>>>    ...
>>>   3.5 < val ==> star4
>
>>> and to style based on the category?
>
>> Use-case?
>
> This lets the designer put up the picture of 3 stars as the visual
> representation, while still using the <meter> or <measure> element.
>
> That strikes me as at least a slight improvement on the best current
> practice of
> <img src="/imgs/3star.jpg" alt="3 stars of of 5">
>
> Also note that the various min/low/normal/optimum/high/max attribute
> combinations already do this to some extent, but hardcode a few
> specific categories.

The way I expect normal <meter> styling to work is the author
providing two images/colors, one for the whole bar and one for just
the filled portion of the bar.  Then you simply overlay the two and
only show a fraction of the 'filled' image.

So you'd get something like this (CSS theoretical and probably not optimal);

<meter min=0 max=5 value=3.5 class=stars>3.5 stars</meter>
<style>
meter.stars::meter-bar {
  background: url(empty-stars.png);
}
meter.stars::meter-bar-fill {
  background: url(filled-stars.png);
}
</style>

Given the meter attributes, this would show 70% of the
filled-stars.png on top of the empty-stars.png, making an attractive
3.5 stars.

~TJ

Received on Wednesday, 2 September 2009 17:53:34 UTC