How to write vertical text from bottom to top without using transform rotate?
HtmlCssd3.jsHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
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:
- Look at the appropriate column, which will be "Horizontal Script" unless you're coding e.g. in an Asian language.
- 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 ofsideways-lr
it would break once Blink properly implements this behavior, since the two rows are not the same.). - optional: set
transform-origin
to something, maybe usecalc(...)
, based on percentages and/or something else - 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)
Solution 2 - Html
.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.
Solution 3 - Html
.rotated {
writing-mode: vertical-lr;
transform: scale(-1, -1);
}
<div class="rotated">Text from bottom with working width/height</div>