Manual de CSS

 
 
 

Mapa Web

 
borde   borde
Portada arrow Lista de Códigos CSS arrow Texto en vertical usando CSS

 

Texto en vertical usando CSS Imprimir E-mail
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

 

 
Portada
Capítulos del Manual de CSS
Introducción a CSS
El Tag LINK
El Tag STYLE y la directiva @import
Comentarios CSS y Reglas Básicas
Agrupación de Selectores y Declaraciones
El Atributo Class y el Atributo ID
Pseudo-clases y Pseudo-elementos
Estructura y Herencia
Especificidad y Estilos en Cascada
Clasificación de los elementos y Colores
Unidades
Identación
Alineación
Espacios en Blanco
Anchura de Líneas
Alineación Vertical
Espacio entre Palabras y entre Letras
Transformación del Texto
Decoración del Texto
Practicar en línea
Lista de prácticas en línea
FAQ
Preguntas frecuentes
Códigos CSS
Lista de Códigos CSS
Foros
Foros CSS
Otros Manuales
Manuales de otros lenguajes
 
   
 
 
Alojamiento web en Hostalia