Texto en vertical usando CSS

Nuevo atributo CSS para poner un texto que se pueda leer en vertical en nuestro documento HTML.

Junto con CSS3 llegan nuevos atributos para aplicar a nuestros documentos html.

Este es el turno de presentar writing-mode, que permite enderezar un texto en dirección vertical.

Lamentablemente el único explorador en soportarlo es Internet Explorer, por eso ten precaución en su uso.

<style>
#textovertical {writing-mode: tb-rl; filter: flipv fliph}
</style>

Puedes ver un ejemplo en marcha en una página aparte.

Actualmente utilizando CSS no podremos solucionar este problema de una manera adecuada para todos los entornos. Dado que este ejemplo sólo funciona con Internet Explorer, otros navegadores como Firefox u Opera verán el texto en horizontal. Si nuestro diseño es muy preciso, seguramente no podamos utilizar este ejemplo, porque si el texto aparece unas veces en hortizontal y otras en vertical, seguramente acabe descuadrándo la página.

Una posible solución a este problema sería guardar el texto como una imagen, modificarla con Photoshop o con cualquier otro programa de este tipo, para colocar el texto en vertical. Luego habría que añadirla a la web tal como cualquier otra imagen. De esta forma el texto quedaría en vertical del mismo modo que con CSS y funcionaría en todos los navegadores.

Federico Elgarte
http://www.cssboulevar.com.ar/articulos/?id=10

Leave A Comment?