Estou transformando um documento word em html, porém não sei como fazer para escrever o texto dessa forma:
Alguém saberia como?
Você pode usar transform: rotate(270deg)
para deixar o texto na vertical conforme a imagem.
Fora o rotate (que irá modificar todo o div) se você quiser apenas alterar a escrita, sem afetar o background
, border
e espaçamentos, você pode usar o writing-mode
.
O vem por padrão como horizontal-tb
, e terá as seguinte opções:
O conteúdo segue horizontalmente da esquerda para a direita e na vertical de cima para baixo. A próxima linha horizontal está posicionado abaixo da linha anterior.
.foo { writing-mode: horizontal-tb; }
<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>
O conteúdo segue verticalmente de cima para baixo e horizontalmente da direita para a esquerda. A linha vertical ao lado está posicionada à esquerda da linha anterior.
.foo { writing-mode: vertical-rl; }
<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>
O conteúdo segue verticalmente de cima para baixo, na horizontal da esquerda para a direita. A linha vertical seguinte é posicionada à direita da linha anterior.
.foo { writing-mode: vertical-lr; }
<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>
Também existe a propriedade direction
, que suporta os valores ltr
(esquerda para direita) e rtl
(direita para esquerda), mas isto é usado geralmente para textos com caracteres de diferentes linhagens (o que pode-se ser util se combinado com unicode-bidi: bidi-override;
).
Sem unicode-bibi
:
.foo { direction: ltr; }
.baz { direction: rtl; }
<div class="foo">Olá mundo novo!</div>
<div class="baz">Olá mundo novo!</div>
Com 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 que ainda existem o
sideways-rl
esideways-lr
(provavelmente era este que você necessitava), mas são experimentais e não é suportado por todos navegadores.Note também que os valores
lr
,lr-tb
,rl
etb-rl
estão em desuso, mas ainda são suportados pelo SVG1 ou para navegadores mais antigos:
Outra sugestão.
.textovertical{
width:1px;
word-wrap: break-word;
font-family: monospace;
white-space: pre-wrap;
}
<p class="textovertical">
Olá esse é um texto vertical !
</p>
Como já foi respondido anteriormente á cima, você pode usar dentro do seu style css a propriedade transform
exemplo {
transform: rotate(270deg);
}
Porém você vai rotacionar tudo que estiver dentro de "exemplo", seja o background, outros conteúdos como texto, imagens e vídeos.
Uma sugestão seria você criar parágrafos com a tag
dentro do seu conteúdo html contendo a frase ou a palavra que deseja rotacionar e classificar o
com um "rotate" por exemplo.
No html:
<body>
<h1>Meu Título</h1>
<p>Meu texto que vai ficar na posição correta</p>
<p class="rotate">Texto que vai rotacionar</p>
</body>
No css:
p.rotate {
transform: rotate(270deg);
}
Assim ele vai rotacionar apenas o que contem a classificação "rotate".
p.rotate { transform: rotate(270deg); }
e não somente .rotate { transform: rotate(270deg); }
?
Commented
15/06 às 17:39