Categories: CSSTestestodas

Teste seu conhecimento 03

Texto na vertical com CSS

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.

Maujor

Exerci o magistério paralelamente a minha carreira profissional por toda uma vida e ao longo destes trinta anos aprendi tanto quanto ensinei. Sou um apaixonado por Web Standards e desenvolvo o site de tutoriais CSS para Web Design.

View Comments

  • Pessoal, segue a solução.

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

  • É 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 */

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

  • 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?

  • 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

  • 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

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

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

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

Share
Published by
Maujor

Recent Posts

Teste seu conhecimento #20

Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…

7 anos ago

Teste seu conhecimento #19

Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…

9 anos ago

JavaScript bubbling e capturing

Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…

10 anos ago

HTML5 – W3C versus WHATWG

HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…

10 anos ago

Seria esse o futuro das imagens responsivas?

Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…

10 anos ago

BrazilJS Conf 2013

Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…

11 anos ago