Is it possible to create a vertical meter with HTML5?

Question

Usually if I create:

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

I end up getting a horizontal meter / bar if it is displayed in a browser that supports the html5 meter element.

Is it possible to create a vertical meter with html5?

The only solution I was able to get with is to use CSS3 rotation (transform).

Answer 1

Transformation is the answer. The whole point of the meter is that it is a semantic, not a presentation element, and you should be able to style it as you want with CSS>

Answer 2

Yes, this is the only way to do this.

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

Answer 3

Using conversion in a counter element has a big drawback that I have yet to find in an elegant way, it does not seem to change the horizontal width size required by the element. for example, for a meter with a width of 180 pixels and a height of 15px converted to 270 degrees, the meter will appear as a vertical bar with a height of 180 pixels and a width of 15 pixels, but the bounding box ends as 180x180 with a huge white space on the left side. Then you need extra CSS to move the element to hide the space. I have observed this behavior in both Chrome and Firefox.