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.

Occam's razor says: do you really really need to animate the bar chart? — Mr Lister
– Mr Lister, Commented Nov 1, 2016 at 16:39
to answer your question: Occam's razor: ask yourself if it's neccesary to have?/if it's adding something valueable to the user's experience, if yes, go for it. if no, you're wasting your time, as well as the user's time — Grey
– Grey, Commented Dec 1, 2016 at 13:02

ninjagecko · Accepted Answer · 2020-01-17 04:38:59Z

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 of sideways-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 use calc(...), 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)

In short: writing-mode: vertical-rl; transform: rotate(-180deg); gives intended result in 2020!
The question explicitly asks for an answer without transform: rotate.

mplungjan · Accepted Answer · 2022-01-28 06:55:04Z

10

.rotated {
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
}

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

edited Jan 28, 2022 at 6:55

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Nov 16, 2021 at 10:39

Maksym Maslakov

1171 silver badge3 bronze badges

2 Comments

tdy Over a year ago

Welcome to Stack Overflow. Please consider adding a brief explanation of how and why this solves the problem. This will help readers to better understand your solution.

Impworks Over a year ago

Unfortunately this reverses the order of lines in multiline text

Yogesh · Accepted Answer · 2018-06-29 11:56:22Z

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.

answered Jun 29, 2018 at 11:56

Yogesh

1,3553 gold badges13 silver badges18 bronze badges

Comments

Bishal Pahari · Accepted Answer · 2024-04-24 10:50:04Z

1

this will do:

.verticalTxt_lr {
 writing-mode: vertical-rl;
 transform: rotate(-180deg);
}

answered Apr 24, 2024 at 10:50

Bishal Pahari

364 bronze badges

Comments

mikewasmike · Accepted Answer · 2025-05-01 10:27:49Z

1

Currently this is all you need, (according to MDN Only Samsung Internet browser does not support this):

.vertical-text {
    writing-mode: sideways-lr;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#:~:text=10.3-,sideways%2Dlr,-132

Works nicely even when wraping vertical text.

answered May 1 at 10:27

mikewasmike

3983 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Linked

Related