Vertical Text Direction

Question

I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... Isn't there a way to have actual vertical direction text?

I only set the rotation to 305 degrees in the demo which doesn't make the text vertical. 270deg will but I only made the demo to show rotation.

Hello, could you review your accepted answer to fit with a non obsolete syntax to improve quality. Your question is seen as a duplicate, — G-Cyrillus, Nov 28 '19 at 12:59

score 120 · Accepted Answer · edited Aug 29 '13 at 14:18

120

Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

edited Aug 29 '13 at 14:18

answered Apr 15 '12 at 12:01

swan

2,339
3
22
39

2

I was able to find this: http://generatedcontent.org/post/45384206019/writing-modes. Though it feels so hacky. – Crystal Miller Jul 29 '14 at 19:49
8

@CrystalMiller and BTW, w3schools can be a good helper, but it is not the source/original documentation (so it can miss some things), the "official" is w3.org, or the closest, more human-readable, to it is mozilla's developer network - "MDN" - https://developer.mozilla.org/ – jave.web Sep 01 '16 at 21:36
It works in chrome, mozilla and IE edge but not safari for windows. – HalfWebDev Sep 21 '16 at 10:48
12

`tb-rl` is deprecated, please use `vertical-rl` instead. – Jared Chu Jul 11 '18 at 09:15
4

sadly, if the vertical text is on the left side of the screen, most roman texts are read bottom-to-top. And then top-to-bottom if the text is on the right side of the screen. Having some values deprecated, we end up with the sole vertical-rl that is top to bottom for the right side of the screen. For the left side, we have to add a transform: rotate(180deg); – Kir Kanos Jul 11 '18 at 13:55
I am using writing-mode:vertical-lr; but in FF it still works wierd, can see example here: https://www.efsdk.com/help/exm/tab.htm – Xerix Feb 22 '21 at 01:41

score 84 · Answer 2 · edited Jul 13 '18 at 06:47

84

-webkit-transform: rotate(90deg);

The other answers are correct but they led to some alignment problems. On trying out different things this CSS piece code worked perfectly for me.

.vertical{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
}

edited Jul 13 '18 at 06:47

halfer

18,701
13
79
158

answered Sep 07 '13 at 10:13

Amit

2,305
11
21

9

The property 'bottom' has no value without a property of 'position'. – Crystal Miller Jul 29 '14 at 19:17
2

I needed to add -ms-transform:rotate(90deg); to get this working in IE11 – patrickbadley Nov 05 '14 at 19:48
1

according to https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode, `writing-mode:tb-rl;` is deprecated. Use `writing-mode:vertical-rl` instead! – steffen Apr 13 '17 at 21:52

Mohd Abdul Mujib · Answer 3 · 2020-07-03T19:20:49.093

72

I was searching for an actual vertical text and not the rotated text in HTML as shown below. So I could achieve it by using the following method.

enter image description here HTML:-

<p class="vericaltext">
Hi This is Vertical Text!
</p>

CSS:-

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}

JSFiddle! Demo.

Update:- If you need the whitespaces to be displayed, then add the following property to your css.

white-space: pre;

So, the css class shall be

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

JSFiddle! Demo With Whitespace

Update 2 (28-JUN-2015)

Since white-space: pre; doesnt seem to work (for this specific use) on Firefox(as of now), just change that line to

white-space: pre-wrap;

So, the css class shall be

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}

JsFiddle Demo FF Compatible.

edited Jul 03 '20 at 19:20

answered Jan 24 '15 at 00:04

Mohd Abdul Mujib

10,585
8
50
78

Can I make the text align vertically centre? – Mohammad Saifullah Aug 16 '16 at 15:36
I didn't quite get what you mean by aligning center, but maybe you can just align the container element `.vericaltext` to the center? – Mohd Abdul Mujib Aug 17 '16 at 08:34
1

Incredible. This should be ticked green instead. Hopefully OP will mark it as he is still active on SO. – Rahul Sep 05 '17 at 09:32
:D Old cold answer – Kapil Yadav Jul 17 '18 at 11:06
I have some hot 'n fresh ones too :p – Mohd Abdul Mujib Jul 17 '18 at 14:51
Another possible solution to the same result: https://stackoverflow.com/a/60136214/3934058 Thanks for the tip with space ;) – Beda Schmid Feb 11 '20 at 09:36
I've rolled back the edit suggested to this answer as the edit was ommitting out various useful information. – Mohd Abdul Mujib Jul 03 '20 at 19:22
@Mohd What information was omitted that you think is useful? – grg Jul 04 '20 at 19:18
info about how the answer evolved over time as it might be useful for someone to understand better. also I believe the image is better for ux as people don't have to click the `run code snippet` button to look at what this answer has to offer – Mohd Abdul Mujib Jul 04 '20 at 22:32

Jbrown · Answer 4 · 2013-10-04T15:44:54.373

28

To rotate text 90 degrees:

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Also, it appears that the span tag can't be rotated without being set to display:block.

edited Oct 04 '13 at 15:44

answered Sep 18 '12 at 18:18

Jbrown

667
9
8

4

probably needs to be with display:block; to rotate properly – Mladen Janjetovic Apr 09 '13 at 13:04
2

I applied this to a
that sits inside a . It seems to successfully rotate in all browsers. ... ... BUT, once the div rotates (90degrees), the td does Not expand its height.
– dsdsdsdsd Sep 28 '13 at 15:24

Iggy · Answer 5 · 2017-02-09T04:15:10.137

11

For vertical text with characters one below another in firefox use:

text-orientation: upright;
writing-mode: vertical-rl;

edited Feb 09 '17 at 04:15

answered Feb 09 '17 at 02:12

Iggy

1,536
17
20

Abdallah Okasha · Answer 6 · 2018-04-18T08:00:21.737

To display text in vertical (Bottom-top) we can simply use:

writing-mode: vertical-lr; 

transform: rotate(180deg);

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

Note we can add this to ensure Browser Compatibility:

-webkit-transform: rotate(180deg);   
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

we can also read more about writing-mode property here on Mozilla docs.

score 7 · Answer 7 · answered Aug 02 '12 at 14:30

7

Try using:

writing-mode: lr-tb;

answered Aug 02 '12 at 14:30

Mladen Janjetovic

11,254
8
64
74

score 4 · Answer 8 · edited Jun 18 '18 at 13:54

4

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

enter image description here

edited Jun 18 '18 at 13:54

pushkin

7,514
14
41
74

answered Jun 18 '18 at 13:34

vishal singh

41
2

Hello thank you for trying to answer this question, can you briefly explain how your solution addresses OP's problem? – James Wong Jun 19 '18 at 02:58

score 3 · Answer 9 · edited Jul 13 '18 at 06:47

3

I'm new at this, it helped me a lot. Just change width, height, top and left to make it fit:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

You can also go here and see another way to do it. The author does it like this:

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

edited Jul 13 '18 at 06:47

halfer

18,701
13
79
158

answered May 21 '15 at 03:24

NICK

53
9

transform-origin is what I needed! – xtian Apr 09 '18 at 15:48
float left is what I needed! – chris Jan 18 '19 at 15:13

Sadee · Answer 10 · 2014-05-09T12:59:50.620

2

Can use CSS3 Transform property

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

edited May 09 '14 at 12:59

answered Feb 27 '14 at 15:13

Sadee

2,280
27
33

score 2 · Answer 11 · edited Jun 28 '15 at 14:09

2

Add the class

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);

}

I use this pretty much everyday and not had any issues whatsoever with it.

https://css-tricks.com/snippets/css/text-rotation/

edited Jun 28 '15 at 14:09

josliber

41,865
12
88
126

answered Jun 28 '15 at 14:03

MrJoshFisher

1,071
5
20
46

score 2 · Answer 12 · answered Feb 01 '17 at 14:33

2

I've manage to have a working solution with this :

(I have a title within a middleItem class div)

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}

answered Feb 01 '17 at 14:33

RVA

539
1
11
28

Neil Bauers · Answer 13 · 2017-02-04T22:45:46.360

Here is an example of some SVG code I used to get three lines of vertical text into a table column heading. Other angles are possible with a bit of tweaking. I believe most browsers support SVG these days.

<svg height="150" width="40">
  <text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
  <text x="-150" y="25" transform="rotate(-90 0 0)">0/0&nbsp;&nbsp;&nbsp;&nbsp;0/0</text>
  <text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
  Sorry, your browser does not support inline SVG.
</svg>

score 2 · Answer 14 · edited Feb 27 '14 at 15:16

2

rotation, like you did, is the way to go - but note that not all browsers support that. if you wan't to get a cross-browser solution, you'll have to generate pictures for that.

edited Feb 27 '14 at 15:16

Michael Irigoyen

21,233
17
82
125

answered Nov 24 '10 at 08:09

oezi

47,789
10
94
113

score 2 · Answer 15 · edited Feb 26 '19 at 11:19

2

You can achieve the same with the below CSS properties:

writing-mode: vertical-rl;
text-orientation: upright;

edited Feb 26 '19 at 11:19

סטנלי גרונן

2,740
21
43
62

answered Feb 26 '19 at 10:13

Rajitha Alluri

87
3

Beda Schmid · Answer 16 · 2020-02-11T09:45:19.433

If you want an alignement like

S
T
A
R
T

Then follow https://www.w3.org/International/articles/vertical-text/#upright-latin

Example:

div.vertical-sentence{
  -ms-writing-mode: tb-rl; /* for IE */
  -webkit-writing-mode: vertical-rl; /* for Webkit */
  writing-mode: vertical-rl;
  
}
.rotate-characters-back-to-horizontal{ 
  -webkit-text-orientation: upright;  /* for Webkit */
  text-orientation: upright; 
}

<div class="vertical-sentence">
  <p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>

Note the Hindi has an accent in my example and that will be rendered as a single character. That's the only issue I faced with this solution.

score 1 · Answer 17 · answered Jan 25 '17 at 21:07

Best solution would be to use writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

It defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

It has good browser support, but will not work on IE8 (if you care about IE) http://caniuse.com/#feat=css-writing-mode

score 1 · Answer 18 · answered Aug 02 '19 at 08:25

1

.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
}

answered Aug 02 '19 at 08:25

Code

467
4
8

score 1 · Answer 19 · answered Aug 20 '19 at 11:19

1

<!DOCTYPE html>
<html>
    <style>
        h2 {
           margin: 0 0 0 0;
           transform: rotate(270deg);
           transform-origin: top left;
           color: #852c98;
           position: absolute;
           top: 200px;
        }
    </style>
    <body>
        <h2>It’s all in the curd</h2>
    </body>
</html>

answered Aug 20 '19 at 11:19

sachin burnawal

11
3

you can change transform: rotate(270deg); to transform: rotate(90deg); according to requirements – sachin burnawal Aug 20 '19 at 11:20

score 1 · Answer 20 · answered May 25 '20 at 18:37

From developer.mozilla.org

The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

writing-mode: vertical-rl;
text-orientation: mixed;

You can also review all the Syntax here

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

score 1 · Answer 21 · answered Sep 20 '20 at 06:29

1

You do with this too...

.p{
   writing-mode: vertical-rl;
   text-orientation: upright;
 }

answered Sep 20 '20 at 06:29

Abdul Rahman

1,399
2
17
35

score 0 · Answer 22 · edited Jul 04 '16 at 05:27

0

This works as well:

transform: rotate(90deg);

edited Jul 04 '16 at 05:27

Pang

8,605
144
77
113

answered Aug 28 '14 at 20:18

fresh5447

1,072
2
12
25

Duplicate answer to https://stackoverflow.com/a/12482721/1549818 2 years earlier – grg Jul 03 '20 at 18:30

score 0 · Answer 23 · answered Jun 28 '15 at 13:03

0

You can use word-wrap:break-word to get vertical text use following snippete

HTML:

<div class='verticalText mydiv'>Here is your text</div>

css:

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}

answered Jun 28 '15 at 13:03

Hari Prasandh

1

score 0 · Answer 24 · answered Jul 28 '15 at 04:05

<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>

score 0 · Answer 25 · answered Sep 24 '15 at 09:21

h1{word-break:break-all;display:block;width:40px;}

H E L L O

NOTE: Browser Supported - IE browser (8,9,10,11) - Firefox browser (38,39,40,41,42,43,44) - Chrome browser (44,45,46,47,48) - Safari browser (8,9) - Opera browser (Not Supported) - Android browser (44)

b01 · Answer 26 · 2016-04-26T17:56:15.683

0

Try using an SVG file, it seems to have better browser compatibility, and won't break your responsive designs.

I tried the CSS transform, and had much trouble with the transform-origin; and ended up going with an SVG file. It took like 10 minutes, and I could control it a bit with CSS too.

You can use Inkscape to make the SVG if you don't have Adobe Illustrator.

edited Apr 26 '16 at 17:56

answered Apr 26 '16 at 17:50

b01

3,476
1
21
26

score 0 · Answer 27 · edited Jul 03 '20 at 18:31

0

This is a bit hacky but cross browser solution which requires no CSS

<div>
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
<div>

edited Jul 03 '20 at 18:31

grg

3,915
3
27
38

answered Oct 09 '17 at 08:42

Luke Preston

109
1
3

score 0 · Answer 28 · answered Apr 09 '19 at 14:12

0

You can try like this

-webkit-transform: rotate(270deg);   
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);

answered Apr 09 '19 at 14:12

Bablu Ahmed

2,638
1
26
46

Vertical Text Direction

28 Answers28

H E L L O

Linked

Related