Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Teste seu conhecimento 03

Publicado em: 2007-02-5 — 28.284 visualizacoes

Texto na vertical com CSS

Vertical

Dia destes dei uma passada pela seção CSS do fórum iMasters como faço regularmente e lá encontrei uma pergunta querendo saber como escrever um texto na vertical dentro de uma célula de tabela.

O autor da pergunta relatava que havia tentado resolver a questão definindo uma largura pequena para a célula (onde caberia apenas uma letra) na esperança que cada nova letra fosse forçada a pular para a linha seguinte e assim conseguir o que queria. Contudo, como sabemos, uma célula de tabela se expande para conter uma palavra, mesmo que o comprimento da palavra seja maior que a largura definida para a célula, e assim, a tentativa não deu certo.
Alguém respondeu apontando a clássica solução do uso da propriedade flip-vertical que só funciona no Internet Explorer e afirmando que não existe solução cross-browser para a questão.

Resolvi fazer algumas experiências e pesquisar para verificar a possibilidade de escrever o texto na vertical, usando marcação e CSS válidas e funcionando tanto nos IE quanto nos Mozillas. E descobri um meio. É bastante provável, ou melhor, quase certo, que o meio por mim descoberto já esteja documentado na Internet, contudo confesso que as buscas que fiz no Google resultaram infrutíferas.

Para testar seus conhecimentos e habilidades com (X)HTML e CSS estou desafiando você a escrever dentro de uma célula de tabela, um texto na vertical.
Para facilitar vamos combinar que a palavra a escrever na vertical é: VERTICAL.

Regras gerais:

  1. Usar somente (X)HTML e CSS (sem scripts);
  2. Nao usar imagens;
  3. Nao colocar as letras da palavra individualmente dentro de um elemento HTML;
    p.ex.: <span>V</span><span>E</span><span>R</span><span>T</span>…
  4. Nao usar o elemento BR;
    p.ex.: V<br />E<br />R<br />T<…

Se você encontrar a solução mande para mim via mensagem pessoal e não poste a solução nos comentários, para que outros possam tentar. Para cada solução recebida eu postarei nos comentários informando o nome do autor e se a solução está certa.
Dentro de algumas semanas postarei a minha solução e as soluções recebidas.
Ah! não se esqueça que você pode se inscrever para receber email informando quando novos comentários forem postados nos arquivos no Blog e assim acompanhar uma matéria de seu interesse.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2007-02-5 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2007/02/05/texto-na-vertical-com-css/trackback no seu site.

25 comentários na matéria: “Teste seu conhecimento 03”

  1. MárcioNo Gravatar disse:

    Pessoal, segue a solução.

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);

  2. Renan CerqueiraNo Gravatar disse:

    É só aplicar o css:

    -moz-transform: rotate(-90deg); /* Para Firefox */
    -webkit-transform: rotate(-90deg); /* Para Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Para IE */

  3. Marco AurélioNo Gravatar disse:

    A única forma é usando JQuery:

    Veja: http://www.openstudio.fr/jquery-flipv/

  4. MarcoSantoNo Gravatar disse:

    Exibir um texto na vertical significa mudar a orientação dele de 0 grau para noventa graus. As soluções aqui propostas parece que é só de colocar uma letra debaixo da outra.
    Mais honesto é dizer logo que não há solução cross-browser para esse problema.

    Vamos às imagens…

  5. Luiz MeloNo Gravatar disse:

    Vc saberia me falar como faço para inserir uma célula debaixo da outra sem ter q ficar arrastando uma dezena de células já inseridas, exatamente no lugar onde quero colocar a nova célula?

  6. vitor vtmNo Gravatar disse:

    dei mole,,,,,,, foi formatado na de cima,,,

    usei a tag pre em cada letra, e na de baixo usei pre seguido das letras

    pre t /pre
    pre e /pre
    .
    .
    .

    pre
    t
    e
    x
    t
    o
    /pre

  7. vitor vtmNo Gravatar disse:

    Minha solução foi usar a tag pre.

    T
    E
    X
    T
    O

    caso não fosse tags individuais também funcionaria assim.

    T
    E
    X
    T
    O

  8. RafaelNo Gravatar disse:

    interessante, mas como fazer isto com um texto dinãmico?
    eu escrevendo o texto blz, agora gostaria de capturar via post e colocar na vertical….

  9. BinaNo Gravatar disse:

    Cara,
    Você é maluco…
    Se estou procurando a solução para escrever um texto na vertical em uma tabela é porque preciso de uma solução rápida…
    Não dá tempo para entrar num “quizz”…

    Vou procurar em outro site.

  10. TPNo Gravatar disse:

    Essa foi a primeira solução que eu havia pensado em fazer, porém achei que haveria algum meio de fazer com palavras inteiras….

    Creio eu que exista um meio, já que idiomas como o chinês são escritos na vertical…

  11. João Paulo FechineNo Gravatar disse:

    Irene, infelizmente, com texto mesmo não tem condições… sua solução será usar imagem no final das contas.. 😀

  12. IreneNo Gravatar disse:

    Pessoal, parabéns a todos que se esforçaram para desvendar o mistério, mas essa solução ainda não atende minhas necessidades, pois as letras ainda continuam com orientação 180 graus e não a 90 graus como eu gostaria.
    Não consigo aqui anexar uma figura do que estou querendo, mas pelo MS Word 2003 eu consigo exemplifica….crie uma tabela, numa célula escreva uma palavra qualquer, selecione a palavra e clique com o botão direito do mouse, opção Direção do Texto…, vejam que são apresentadas 3 opções, eu quero a que tem o texto a 90 graus, opção da esquerda….e a pergunta continua, como fazer isso em (X)HTML, CSS, etc?
    Cordialmente.

  13. MaujorNo Gravatar disse:

    SOLUÇÃO
    A dica para solucionar o desafio está no segundo parágrafo da matéria.
    Se você escrever no código HTML a palavra V E R T I C A L com um espaço entre as letras e definir uma largura mínima para a célula, esta irá expandir-se para conter apenas uma letra e o texto ficará na vertical.

    HTML
    ...
    <td>V E R T I C A L</td>
    ...

    CSS
    td {width: 1px;}

    Solução passa no validador e é crossbrowser? Sim.
    Solução perfeita? Não, pois inserir um espaço entre as letras contraria a filosofia CSS de separar apresentação do conteúdo.
    Mas, enquanto as CSS3 não chegarem…

  14. JosenildoNo Gravatar disse:

    olá.
    gostaria de obter a solução para escrever na vertical .

    grato.

  15. the flashNo Gravatar disse:

    quando vao publicar os resultados, tentei mas nao consegui usei a tecnica

    writing-mode: tb-rl; ele fica na vertical mas nao fica do jeito que vcs estao dizendo

    aguardo respostas.

  16. Marcio MisumiNo Gravatar disse:

    Depois de pensar bastante, consegui encontrar uma solução para dispor o texto na VERTICAL. Não sei se é a melhor maneira.
    Já enviei para o e-mail indicado.
    Abraço.

  17. MaujorNo Gravatar disse:

    @Bruno Souza
    Sua solução não passou no validador CSS.
    @Rafael Beber
    Parabéns! Solução correta.
    @Marcio Misumi
    Solução funciona, mas usa atributos HTML para apresentação o que contraria a filosofia das CSS.

  18. Rafael BeberNo Gravatar disse:

    Implementei e validei o código da palavra na vertical.

  19. Bruno SouzaNo Gravatar disse:

    Maujor,
    solucionei o desafio. Porem o formulário de contato não está funcionando.
    O código de validação não está funcionando.

  20. Erik MarquesNo Gravatar disse:

    Vou aceitar o desafio, em breve, caso consiga te envio.

  21. MaujorNo Gravatar disse:

    @Luís Augusto Vulcanis,
    @Micox, @Thomás

    Na sua solução o texto não se encontra dentro de uma célula de tabela.

    @João Paulo Fechine,
    Parabéns! sua solução está correta.

    @Felipe dos Santos,
    Sua solução não passou no validador CSS.

    @Edward Kishi,
    Sua solução depende de células vizinhas e não passou no validador CSS.

    @Luís Augusto Vulcanis,
    @Micox

    Parabéns! agora sua solução está correta.

  22. João Paulo FechineNo Gravatar disse:

    Encontrei uma solução muuuuuito econômica.
    Envie pelo link (http://www.maujor.com/blog/contato) correto?

    Aguardo os comentários!
    hehehe.

  23. Felipe "Plets" dos SantosNo Gravatar disse:

    Encontrei uma solução mas não tenho certeza se é a melhor maneira de realizar esta tarefa.

    Também estou no aguardo dos resultados.
    Amplexos

  24. MaujorNo Gravatar disse:

    @Alexandre,
    Parabéns pela solução.
    A minha solução difere ligeiramente da sua.

  25. AlexandreNo Gravatar disse:

    Achei a solução, embora a que eu tenha achado não seja semântica (explicarei o porquê na mensagem pessoal).

    Aguardo os resultados!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo