Mar 052013
 

En ocasiones nos puede interesar presentar un texto en vertical, por ejemplo para dar un título al eje Y de un gráfico. Hay muchas maneras de conseguir este resultado, y en este artículo comentamos algunas de ellas.

Utilizando sólo HTML

La manera más elemental de escribir un texto en vertical es colocando un tag “<br/>” detrás de cada carácter. Por ejemplo:

T<br/>Í<br/>T<br/>U<br/>L<br/>O<br/>

El resultado es:

T
Í
T
U
L
O

Esta solución tiene el inconveniente de que hay que descomponer el texto en caracteres individuales. Además, si el texto contiene alguna palabra clave que podría mejorar el posicionamiento de la página, los motores de búsqueda no la reconocerán.

Por contra, al ser una solución pura HTML, la compatibilidad con todo tipo de navegadores es máxima.

Utilizando CSS “word-wrap”

En este caso, colocamos el texto en el interior de un <div> y asignamos al<div> el estilo CSS “word-wrap: break-word;”. Con esto, la palabra puede ser dividida entre dos caracteres cualesquiera. Si además asignamos al <div> una anchura de exactamente un carácter, la palabra se dividirá carácter a carácter:

<div style="width: 10px; word-wrap: break-word; text-align: center">TÍTULO</div>

El resultado es:

TITULO

Utilizando una imagen

Esta solución es también muy obvia. En lugar de colocar directamente el texto, colocamos en la página una imagen que contiene el texto. El problema apuntado antes en relación con los motores de búsqueda lo podemos solucionar añadiendo el atributo “alt”.

<a alt="título" src="/images/titulo.png" width="40" height="138" /></a>

Y el resultado es:

imagen-texto

La ventaja de este método es que tenemos total libertad en el diseño de la imagen.

El problema es que la imagen hay que generarla con un editor gráfico, y además tiene un tamaño (en bytes) superior al de los caracteres del texto, y requiere una petición adicional al servidor web para descargarla.

 Rotando el texto mediante CSS

La solución más elaborado utilizando CSS es la funcionalidad “transform”, que permite rotar el texto en un ángulo determinado. El problema de este método es que no está disponible en navegadores antiguos. Además, la implementación de esta funcionalidad es distinta en distintos tipos de navegador, por lo que hay que añadir la definición del estilo CSS para todos ellos.

 

<style>
.Rotate-90
{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  font-size: 40px;
  background: #e0e0e0;
  width: 100px;
  position: relative;
  top: 50px;
}
</style>
<div style="width:100px; height: 150px; background: #c0c0c0;">
<div class="Rotate-90">Título</div>
</div>

El resultado es:

Título

Nota: Las versiones de Internet Explorer anteriores a IE9 utilizan otra sintaxis CSS para obtener el mismo resultado:

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

Referencias:

 Publicado por en 5:45 pm

  2 Respuestas a “Cómo escribir texto en vertical en una página web”

  1. Excelente Truco
    sigue adelante

  2. muy buen ejemplo

 Deja un comentario

(requerido)

(requerido)