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.
BR
;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.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
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 */
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...