Можно ли создать вертикальный метр с HTML5?

Question

Обычно, если я создаю:

<meter value="30" max="100">Low</meter>

Я получу горизонтальный метр / бар при просмотре в браузере, который поддерживает элемент метки html5.

Возможно ли этосоздать вертикальный измеритель с помощью html5?

Единственное решение, которое мне удалось найти, это использование CSS3 вращения (преобразования).

Answer 1

Да, преобразование - единственный способ сделать это ..

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Answer 2

Преобразование является ответом. Весь смысл метра в том, что это семантический, а не презентационный элемент, и вы должны иметь возможность стилизовать его так, как вы хотите с помощью CSS>

Answer 3

Использование трансформации на элементе-метре имеет существенный недостаток, который я пока не нашел, чтобы изящно обойти, он не меняет величину горизонтальной ширины, которая требуется элементу. например, для измерителя с шириной 180px и высотой 15px, преобразованного в 270deg, измеритель будет отображаться в виде вертикальной черты с высотой 180px и шириной 15px, но ограничивающий прямоугольник заканчивается как 180x180 с огромным пустым пространством с левой стороны. Затем потребуется еще один CSS, чтобы переместить элемент, чтобы скрытый пробел. Я наблюдал такое поведение на Chrome и Firefox.