Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

d3.js

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.

like image 611
thadeuszlay Avatar asked Oct 23 '16 17:10

thadeuszlay


People also ask

How do you rotate text vertically in HTML?

If what you are looking for is a way to set type vertically, you're best bet is probably CSS writing-mode . The rotation property of Internet Explorer's BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

How do you text orientation?

CSS text-orientation property has five values: mixed, upside, sideways, sideways-right, use-glyph-orientation. mixed, upright, sideways, sideways-right, use-glyph-orientation. mixed, upright, sideways, sideways-left, use-glyph-orientation. Success!


2 Answers

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)

like image 55
Dave Avatar answered Sep 20 '22 12:09

Dave


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

like image 30
Yogesh Avatar answered Sep 22 '22 12:09

Yogesh