Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


Teste seu conhecimento 03

Publicado em: 2007-02-5 — 7,139 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.

1 Star2 Stars3 Stars4 Stars5 Stars (Post ainda não avaliado)
Loading ... Loading ...

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Construindo sites com CSS e (X)HTML

Esta matéria foi publicada em: 2007-02-5 (Monday). 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.



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

  1. Alexandre 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!

  2. Maujor disse:

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

  3. Felipe "Plets" dos Santos 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

  4. João Paulo Fechine disse:

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

    Aguardo os comentários!
    hehehe.

  5. Maujor 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.

  6. Erik Marques disse:

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

  7. Bruno Souza 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.

  8. Rafael Beber disse:

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

  9. Maujor 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.

  10. Marcio Misumi 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.

  11. the flash 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.

  12. Josenildo disse:

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

    grato.

  13. Maujor 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. Irene 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.

  15. João Paulo Fechine disse:

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

  16. TP 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…

  17. Bina 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.

  18. Rafael 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….

  19. vitor vtm 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

  20. vitor vtm 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

  21. Luiz Melo 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?

Comentário:






Subscrição de comentários sem comentar

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

Voltar ao topo

PR Tool


ir topo