Vertical text with css (90º)

Question

I’m turning a word document into html, but I don’t know how to write the text this way:

Would anyone know how?

Answer 1

You can use transform: rotate(270deg) to move the text vertically according to the image.

Answer 2

Outside the Rotate (which will modify the entire div) if you just want to change the writing, without affecting the background, border and spacing, you can use the writing-mode.

comes by default as horizontal-tb, and you will have the following options:

horizontal-tb

The contents go horizontally from left to right and vertically from top to bottom. The next horizontal line is positioned below the previous line.

.foo { writing-mode: horizontal-tb; }

<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>

vertical-rl

The contents go vertically from top to bottom and horizontally from right to left. The vertical line to the side is positioned to the left of the previous line.

.foo { writing-mode: vertical-rl; }

<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>

vertical-lr

The contents go vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.

.foo { writing-mode: vertical-lr; }

<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>

There is also the property direction, that supports the values ltr (left to right) and rtl (right to left), but this is usually used for texts with characters from different lineages (which may be useful if combined with unicode-bidi: bidi-override;).

Without unicode-bibi:

.foo { direction: ltr; }
.baz { direction: rtl; }

<div class="foo">Olá mundo novo!</div>
<div class="baz">Olá mundo novo!</div>

With unicode-bidi:

.foo {
    direction: ltr;
    unicode-bidi: bidi-override;
}
.baz {
    direction: rtl;
    unicode-bidi: bidi-override;
}

<div class="foo">Olá mundo novo!</div>
<div class="baz">Olá mundo novo!</div>

• Note that there are still the sideways-rl and sideways-lr (probably was the one you needed), but are experimental and not supported by all browsers.

• Note also that the values lr, lr-tb, rl and tb-rl are in disuse, but are still supported by SVG1 or older browsers:

Answer 3

Another suggestion.

.textovertical{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; 
    white-space: pre-wrap;
}

<p class="textovertical">
Olá esse é um texto vertical !
</p>