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

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)

.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.