Teste seu conhecimento 03
Publicado em: 2007-02-5 — 38.748 visualizacoes
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:
- Usar somente (X)HTML e CSS (sem scripts);
- Nao usar imagens;
- 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>… - 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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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.
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 */
A única forma é usando JQuery:
Veja: http://www.openstudio.fr/jquery-flipv/
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…
Irene, infelizmente, com texto mesmo não tem condições… sua solução será usar imagem no final das contas.. 😀
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.
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…
olá.
gostaria de obter a solução para escrever na vertical .
grato.
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.
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.
@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.
Implementei e validei o código da palavra na vertical.
Maujor,
solucionei o desafio. Porem o formulário de contato não está funcionando.
O código de validação não está funcionando.
Vou aceitar o desafio, em breve, caso consiga te envio.
@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.
Encontrei uma solução muuuuuito econômica.
Envie pelo link (http://www.maujor.com/blog/contato) correto?
Aguardo os comentários!
hehehe.
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
@Alexandre,
Parabéns pela solução.
A minha solução difere ligeiramente da sua.
Achei a solução, embora a que eu tenha achado não seja semântica (explicarei o porquê na mensagem pessoal).
Aguardo os resultados!