How to write vertical text from bottom to top without using transform rotate?

Question

With writing-mode you can only get the text to be read from top to bottom. According to https://developer.mozilla.org/en/docs/Web/CSS/writing-mode

the only option I have is using sideways. But this attribute is experimental.

.verticalTxt_lr {   writing-mode: vertical-lr; } .verticalTxt_rl {   writing-mode: vertical-rl; } .rotate {   transform: rotateZ(270deg);  } 

https://jsfiddle.net/thadeuszlay/5ueopnqu/2/

I wanted to write the label on the bars to be vertical but it should start from the bottom.

http://jsfiddle.net/thadeuszlay/3HL4a/2402/

Trying with rotate gives me a weird behaviour when animating the bar chart therefore I'm looking for another method to create vertical texts that can be read with your head tilted to the left.

Answer 1

I combined writing-mode and rotation:

    .rotated {          writing-mode: tb-rl;          transform: rotate(-180deg);      }

<div class="rotated">Text from bottom with working width/height</div>

This works for me without bad width and height settings inside table cells.

---

important 2020 edit:

step 1) Look at https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode , ctrl/cmd-F for "Result". This table will reflect your browser (which may have improper implementation). Look at the table immediately below it. That table is what things should look like.

Solution:

To make sure your solution is future proof:

1. Look at the appropriate column, which will be "Horizontal Script" unless you're coding e.g. in an Asian language.
2. Find a row that suits your needs in terms of sizing the HTML element, AND is properly implemented (appears roughly the same) in the second table below it. For example writing-mode:vertical-rl; would currently work on Chrome until others are properly implemented in the Blink engine (but if you based your answer off of sideways-lr it would break once Blink properly implements this behavior, since the two rows are not the same.).
3. optional: set transform-origin to something, maybe use calc(...), based on percentages and/or something else
4. perform transform:rotate(180deg) or something. This should fix issues with layout that most people would have, causing them to look up this answer. If one has animation problems, that's a separate issue.

(also tb-rl is deprecated now)

Answer 2

.rotate {      transform: rotate(270deg); } 

This should be enough to rotate text vertically from bottom to top, apply it on div containing the text. If you are using writing-mode: vertical-rl/lr in conjunction to this, that may be switching it to other way around.