3

Estou transformando um documento word em html, porém não sei como fazer para escrever o texto dessa forma: inserir a descrição da imagem aqui

Alguém saberia como?

4 Respostas 4

10

Você pode usar transform: rotate(270deg) para deixar o texto na vertical conforme a imagem.

2
  • Obrigado @RaimundoNorberto, funcionou aqui com 270deg Commented 6/09/2016 às 14:17
  • Desculpa, valor errado, vou arrumar... =) Commented 6/09/2016 às 14:19
4

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:

horizontal-tb

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>

vertical-rl

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>

vertical-lr

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 e sideways-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 e tb-rl estão em desuso, mas ainda são suportados pelo SVG1 ou para navegadores mais antigos:

1
  • Muito legal também! Commented 6/09/2016 às 16:44
2

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>

2
  • Boa tbm, acabei de ver que vou precisar de algo assim também em breve rs Commented 6/09/2016 às 14:26
  • É, a princípio é diferente do que pede, mas se for precisar usar para idiomas escritos na vertical, ai vai...
    – MagicHat
    Commented 6/09/2016 às 14:28
0

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

4
  • Por que você fez p.rotate { transform: rotate(270deg); } e não somente .rotate { transform: rotate(270deg); }? Commented 15/06 às 17:39
  • Boa noite @AugustoVasques! Utilizei da pratica de colocar a tag seguida do nome da class por mera exemplificação, pois nesse caso não teria nenhum efeito diferente. Agora no caso de ter vários elementos/tags que vão compartilhar da mesma configuração de estilo, pode se deixar apenas com .nomeClass { dentro do <style>, ou style.css, que inclusive vai deixa o código mais "limpo" e facilitar a aplicação nas demais <tags> que vão se beneficiar do estilo. Espero ter solucionado a tua dúvida. Commented 16/06 às 23:36
  • Em sua resposta mencione toda limitação, suposição ou simplificação em sua resposta veja em Como responder. Outra coisa, não somos rede social, nós somos um Q&A técnico especializado em linguagens de programação com ênfase em desenvolvimento de software, use o campo de comentários para fazer saudações ou observações não técnicas e não relacionadas diretamente com a com a pergunta. Dá uma lida nos links da central de ajuda para entender um pouco das restrições impostas pelo nosso formato. Commented 17/06 às 0:41
  • Observações do autor retiradas do corpo da pergunta: -"Sei que o tópico é antigo e já foi respondido, porém achei valido complementar, pois foi uma dúvida que eu tive há poucos dias quando iniciei meus estudo em html5 e css3. Espero ter ajudado a quem compartilhar da mesma dúvida." Commented 17/06 às 0:43

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .