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
– G-Cyrillus, Commented Nov 28, 2019 at 12:59

swan · Accepted Answer · 2013-08-29 14:18:43Z

149

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

p { writing-mode: tb-rl; }

edited Aug 29, 2013 at 14:18

user133408

answered Apr 15, 2012 at 12:01

swan

2,6393 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Crystal Miller Over a year ago

I was able to find this: generatedcontent.org/post/45384206019/writing-modes. Though it feels so hacky.

jave.web Over a year ago

@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" - developer.mozilla.org

HalfWebDev Over a year ago

It works in chrome, mozilla and IE edge but not safari for windows.

Jared Chu Over a year ago

tb-rl is deprecated, please use vertical-rl instead.

Kir Kanos Over a year ago

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);

|

halfer · Accepted Answer · 2018-07-13 06:47:22Z

-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; }

The property 'bottom' has no value without a property of 'position'.
I needed to add -ms-transform:rotate(90deg); to get this working in IE11
according to developer.mozilla.org/en-US/docs/Web/CSS/writing-mode, writing-mode:tb-rl; is deprecated. Use writing-mode:vertical-rl instead!

Mohd Abdul Mujib · Accepted Answer · 2022-03-08 08:53:33Z

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{ writing-mode: vertical-lr; text-orientation: upright; }

JSFiddle DEMO

======================= OLD Answer ==========================

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.

I didn't quite get what you mean by aligning center, but maybe you can just align the container element .vericaltext to the center?
Another possible solution to the same result: stackoverflow.com/a/60136214/3934058 Thanks for the tip with space ;)
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

Jbrown · Accepted Answer · 2013-10-04 15:44:54Z

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 4, 2013 at 15:44

answered Sep 18, 2012 at 18:18

Jbrown

6679 silver badges8 bronze badges

2 Comments

Mladen Janjetovic Over a year ago

<span> probably needs to be with display:block; to rotate properly

dsdsdsdsd Over a year ago

I applied this to a <div> that sits inside a <td>. It seems to successfully rotate in all browsers. ... ... BUT, once the div rotates (90degrees), the td does Not expand its height.

Abdallah Okasha · Accepted Answer · 2018-04-18 08:00:21Z

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.

Iggy · Accepted Answer · 2017-02-09 04:15:10Z

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

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

Mladen Janjetovic · Accepted Answer · 2012-08-02 14:30:14Z

7

Try using:

writing-mode: lr-tb;

answered Aug 2, 2012 at 14:30

Mladen Janjetovic

14.8k8 gold badges75 silver badges86 bronze badges

Comments

pushkin · Accepted Answer · 2018-06-18 13:54:04Z

#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

Neil Bauers · Accepted Answer · 2017-02-04 22:45:46Z

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>

halfer · Accepted Answer · 2018-07-13 06:47:10Z

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; }

Abdul Rahman · Accepted Answer · 2020-09-20 06:29:21Z

3

You do with this too...

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

answered Sep 20, 2020 at 6:29

Abdul Rahman

1,7034 gold badges25 silver badges44 bronze badges

Comments

Michael Irigoyen · Accepted Answer · 2014-02-27 15:16:15Z

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.

Sadee · Accepted Answer · 2014-05-09 12:59:50Z

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 */ }

josliber · Accepted Answer · 2015-06-28 14:09:54Z

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/

RVA · Accepted Answer · 2017-02-01 14:33:20Z

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%; }

groenhen · Accepted Answer · 2019-02-26 11:19:01Z

2

You can achieve the same with the below CSS properties:

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

edited Feb 26, 2019 at 11:19

groenhen

3,02725 gold badges51 silver badges69 bronze badges

answered Feb 26, 2019 at 10:13

Rajitha Alluri

1151 silver badge3 bronze badges

Comments

sachin burnawal · Accepted Answer · 2019-08-20 11:19:42Z

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

you can change transform: rotate(270deg); to transform: rotate(90deg); according to requirements

score 2 · Accepted Answer · 2020-02-11 09:45:19Z

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.

Vasil Enchev · Accepted Answer · 2017-01-25 21:07:35Z

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

Code · Accepted Answer · 2019-08-02 08:25:28Z

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

Yousef Altaf · Accepted Answer · 2020-05-25 18:37:50Z

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;

Hari Prasandh · Accepted Answer · 2015-06-28 13:03:04Z

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; }

Ayyappa · Accepted Answer · 2015-07-28 04:05:28Z

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

Salehin · Accepted Answer · 2015-09-24 09:21:48Z

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 · Accepted Answer · 2016-04-26 17:56:15Z

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.

Pang · Accepted Answer · 2016-07-04 05:27:36Z

0

This works as well:

transform: rotate(90deg);

edited Jul 4, 2016 at 5:27

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Aug 28, 2014 at 20:18

fresh5447

1,3603 gold badges14 silver badges27 bronze badges

1 Comment

grg Over a year ago

Duplicate answer to stackoverflow.com/a/12482721/1549818 2 years earlier

Bablu Ahmed · Accepted Answer · 2019-04-09 14:12:31Z

You can try like this

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

grg · Accepted Answer · 2020-07-03 18:31:17Z

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>

shine odigie · Accepted Answer · 2023-02-28 23:38:56Z

0

writing-mode: vertical-rl; gives u the right vertical text

answered Feb 28, 2023 at 23:38

shine odigie

2963 silver badges7 bronze badges

Collectives™ on Stack Overflow

Vertical Text Direction

29 Answers 29

6 Comments

3 Comments

4 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

H E L L O

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

29 Answers 29

6 Comments

3 Comments

4 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

H E L L O

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Related