отображение дополнительной информации в элементе html5 meter;вложенные элементы в метре?

Question

Я использую элемент meter, чтобы показать счет между 1 и 10, и в новейших браузерах webkit это выглядит фантастически.

Я бы тоже хотел показать средний балл. Хотя полезно знать, что мое представление получило 6 из 10, было бы еще более полезно знать, что среднее значение для этого журнала до сих пор составляет 5.

К сожалению, список доступных атрибутов для тега метра не включает в себя «среднее».

Я хочу показать простую вертикальную линию на среднем значении. Я подумал, что, возможно, я мог бы поместить интервал или деление в счетчик, сделать так, чтобы он отображал: блок, и придал ему 100% высоты, 50% ширины и границы вправо. К сожалению, Chrome 11 даже не позволяет мне вкладывать элементы блока в счетчик, как показывают мои предварительные исследования.

Я был бы готов использовать JS для отображения вертикальной линии, если бы мне пришлось (когда я изначально предполагал эту функцию, я думал, что буду использовать полностью JS), но тег метра настолько восхитителен, что я отказываюсь не используйте его сейчас.

Answer 1

Трюк может заключаться в размещении диапазона после метки счетчика, смещении его влево с использованием некоторой арифметики.

<meter id="m" value="2" min="0" max="10">somevalue</meter>
<span id="average" 
      style="border-left:1px solid black;width:1px;margin-left:-50px">
</span>

Арифметика может выглядеть примерно так:

var average = [somevalue, say 0.45];
document.getElementById('average').style['margin-left'] = 
 (Math.floor((average-1)*document.getElementById('m').offsetWidth))+'px'