HTML/CSS : How to write a text vertically, keeping the characters horizontally

Question

I'm wondering if we could write a vertically text, but without use a rotation of any hacks that change the characters direction.

So, instead of "START", I want a text in may div displayed like this :
S
T
A
R
T

I could use "break-word: word-break" and set the width of my element to 0, but the text would'nt be centered. Characters will just be aligned to the left

Not a duplicate of : Vertical Text Direction
I don't want to rotate the text, I want to preserve character's direction

Here is a code example of what I can get :

.vertical-text {
    font-size: 25px;
    word-break: break-word;
    width: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
 }
 
 body, html {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%
 }

<div class="vertical-text">START IT<div>

Possible duplicate : https://stackoverflow.com/questions/4264527/vertical-text-direction — Tapaka, Aug 03 '17 at 09:05
Possible duplicate of [Vertical Text Direction](https://stackoverflow.com/questions/4264527/vertical-text-direction) — Ikhlak S., Aug 03 '17 at 09:06
I find wrapping each letter in a span very ugly, I won't loop throught my word / words to do that.. Moreover, a span with a space in will not display the space character. The solution posted by Abhitalks is what i was looking for — Mattew Eon, Aug 03 '17 at 12:27
@MattewEon I was looking for the same as you. Write S T A R T But how does Abhitalks solution achieve that? It makes it exactly rotated, not stacked as above What do I miss? — , Feb 09 '20 at 11:08

Abhitalks · Accepted Answer · 2017-08-03T09:22:13.743

You may use the writing-mode CSS property in conjunction with the text-orientation CSS property.

div {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

To quote, writing-mode property..

[..]specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.

In effect, this defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

text-orientation property defines the orientation of the text characters in a line. This property only has an effect in vertical mode.

Example:

p:first-of-type {
  writing-mode: vertical-lr;
}
p:last-of-type {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

<h4>With writing mode "vertical-lr"</h4>
<p>Start</p>
<hr>
<h4>With writing mode "vertical-lr" and text-orientation "upright"</h4>
<p>Start</p>

Be warned though about text-orientation:

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

According to this: https://caniuse.com/#search=text-orientation, it seems nearly all browsers support it as of today, except IE/Edge.

Hey thanks @Abhitalks, it's totally what I was searching for ! I just have a small issue, if there is a space in the element all words will be stacked horizontally. Is there a way to let a space between two words, like "START IT" ? — Mattew Eon, Aug 03 '17 at 09:17
@MattewEon: it just works if the browser support it. See here: https://jsfiddle.net/abhitalks/Lgrxezmb/ — Abhitalks, Aug 03 '17 at 09:18
Okay, I should have make a mistake. Thanks, it totally do the job :) — Mattew Eon, Aug 03 '17 at 09:20

score 0 · Answer 2 · edited Aug 03 '17 at 09:12

0

You can try :

.vertical-text {
  margin: 0 auto 2em;
  width: 0;
  word-wrap: break-word;
}

body {
  font-family: Helvetica, sans-serif;
  text-align: center;
}

h1 {
  margin-bottom: 1.5em;
}

<h1>Vertically Written Text</h1>

<h2 class="vertical-text">Vertical</h2>

<p>Tested in Chrome, Safari, Firefox, IE 8, IE 9, IE 10 and IE 11.</p>

edited Aug 03 '17 at 09:12

Carl Binalla

5,393
5
27
46

answered Aug 03 '17 at 09:10

Upendra Joshi

603
6
15

I said I know about word-break and width 0, but the text is aligned to the left and I want it to be centered – Mattew Eon Aug 03 '17 at 09:21

Zico · Answer 3 · 2017-08-03T09:18:12.717

-1

Several ways to do it.

Check this tutorial out

UPDATE

Provide the best way to do it to me:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
 
<style>
  h1 span { display: block; }
</style>
</head>
<body>
  <h1> START </h1>
   
  <script>
    var h1 = document.getElementsByTagName('h1')[0];
    h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
  </script>
</body>
</html>

edited Aug 03 '17 at 09:18

answered Aug 03 '17 at 09:06

Zico

2,349
2
22
25

2

It would be better if you could add some of those "ways" in your answer, as links may die any time, and save users a click – Carl Binalla Aug 03 '17 at 09:11

HTML/CSS : How to write a text vertically, keeping the characters horizontally

3 Answers3