Rotación de texto con CSS

Explicamos una técnica para poder rotar un texto con CSS, que sea visible en todos los navegadores

Es común que al momento de querer obtener un texto de manera vertical, hagamos uso de imágenes para obtener los resultados deseados. Las imágenes pueden resultar efectivas si las mantenemos dentro de un sprite, lo que permite reducir las peticiones a servidor; sin embargo, esta tarea puede resultar más abrumadora de lo necesario, ya que con CSS tenemos lo necesario para evitar recurrir a un editor y simplemente utilizar nuestro código para lograr dicha acción.

Afortunadamente, la gran mayoría de los navegadores populares, soportan el uso de rotación en el texto mediante CSS, por lo que la compatibilidad no será un problema. La mayoría de estos lo hacen a través de una simple sentencia de CSS3, mientras que para Internet Explorer es necesario hacer uso de filtros con DXImageTransform, pero esto hará que nuestra aplicación funcione inclusive en la versión 5.5.

Estructura HTML

Para comenzar, debemos establecer una estructura con HTML, sobre la cual trabajaremos. Utilizaremos un div contenedor con tres elementos span en su interior, para introducir las cadenas “la”, “webera” y “.es”.

<div class="contenedor">
  <span class="la">la</span> 
  <span class="es">.es</span>
  <span class="webera">webera</span> 
</div>

En este caso, la cadena “.es” será la que será rotada para que quede enseguida de la palabra “la”.

Estilo con CSS

El siguiente paso, consiste en agregar el estilo mediante CSS y de esa manera rotar nuestro texto. Para el caso de los navegadores que utilizan webkit, como Google Chrome y Safari, asi como para Mozilla, podemos utilizar la propiedad “transform” para rotar nuestro texto. Esto lo haremos de la siguiente manera

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

En caso de utilizar Opera, tenemos que especificar que la propiedad -o-transform empezó a ser soportada a partir de la versión 10.50.

Como nota, para que el efecto funcione, además de la propiedad “transform”, es necesario establecer el valor de “block” o “inline-block” a la propiedad “display” del elemento que queremos rotar. En este caso sería el span que contiene la palabra “.es”, de no ser así no veremos cambio alguno.

Para lograr un resultado similar con Internet Explorer, utilizaremos la propiedad “filter”, con un valor que hará uso de un filtro llamado “BasicImage”, el cual ofrece la habilidad de rotar cualquier elemento que se encuentre en el layout.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

El filtro “BasicImage” acepta cuatro valores, los cuales son 0, 1, 2 o 3, dependiendo del que escojamos, el elemento se rotará 0, 90, 180 o 270 grados respectivamente.

Código final

Nuestro código CSS final lucirá de la siguiente manera:

<style>
.la {
    color: blue;
    font-size: 55px;
}
.webera {
    color: gray;
    display: block;
    font-size: 20px;
}
.es{
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    height:20px;
    width:25px;
}
.inline-block{
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline; 
}
</style>

Mientras que el HTML quedará de la siguiente manera:

<div class="contenedor">
  <span class="la">la</span> 
  <span class="es inline-block">.es</span>
  <span class="webera">webera</span> 
</div>

La clase “inline-block” fue agregada para lograr compatibilidad con las versiones viejas de Internet Explorer.