Formas de crear un texto vertical con CSS y HTML

A lo largo de nuestros desarrollos podemos encontrarnos con varios proyectos que exijan realizar tareas que comúnmente no consideramos relevantes para un sitio, pero que con el paso del tiempo se convierten en un sostén básico de nuestros diseños. Uno de estos casos peculiares, que puede parecer poco útil en principio pero cuyo uso se presenta con gran frecuencia, es el representar un texto de manera vertical.

En nuestra cabeza puede parecer muy sencillo darle un formato vertical al texto, y lo es, solo que generalmente no es con la primera idea que se nos viene a la mente. Muchos pensamos que utilizar el salto de línea o hacer una imagen con texto representa una solución, pero es todo lo contrario, esta clase de contenido solo entorpecerá nuestro sitio y hará que perdamos estilo.

Para evitarnos darle muchas vueltas al asunto, en este artículo presentamos una serie de métodos para lograr estructurar verticalmente un texto.

Saltos de línea con HTML: br

Sí, lo sé, hace apenas unas líneas atrás acabo de mencionar que los saltos de línea son junto con las imágenes la peor opción que podemos elegir, aún así siguen siendo una alternativa, la cual tenemos que evitar, pero una alternativa al fin.

A este método se le podría asignar el título de “clásico” para realizar esta tarea, más de uno hemos recurrido a la famosa etiqueta ”
“ para colocarla después de cada letra de nuestra palabra y así tener un texto vertical.

<h1>
    W<br />E <br />B <br />E <br />R <br />A
</h1>

Si bien logra su objetivo. por favor no lo uses, es un método que representa flojera y al mismo tiempo falta de estilo, tenemos que pensar más allá de un simple salto de línea y para ello vienen los siguientes métodos

Uso de elementos span de HTML

Una alternativa no muy correcta pero efectiva, con excepción de los casos donde usamos contenido dinámico, es utilizar elementos de tipo “span” para envolver cada letra de la palabra y después darle un formato mediante una sentencia CSS que muestre cada elemento del encabezado en forma de bloque. Es decir, a una estructura HTML como esta:

<h1>
    <span> W </span>
    <span> E </span>
    <span> B </span>
    <span> E </span>
    <span> R </span>
    <span> A </span>
</h1>

Le aplicamos el siguiente estilo:

h1 span { display: block; }

Y listo, tenemos un texto vertical, con un código muy poco estético y con el riesgo de que falle con contenido dinámico, pero una alternativa al fin.

Uso de JavaScript para crear texto vertical

El fiel aliado JavaScript sale al rescate una vez más, esta vez para trabajar en combinación con CSS y darnos una alternativa un poco menos inestable y sin duda con mejor código de marcado.

Para evitar agregar cada etiqueta “span” manualmente a las letras, podemos utilizar una función de JavaScript, de esta manera evitamos los problemas que mencionamos en la alternativa anterior y ahorramos unas cuantas líneas de código.

Su uso es bastante similar al ejemplo anterior, utilizamos el mismo estilo pero el código HTML cambiará a este:

<h1> WEBERA </h1>
<script>
    var encabezado = document.getElementsByTagName('h1')[0];
    encabezado.innerHTML = '<span>' + encabezado.innerHTML.split('').join('</span><span>') + '</span>';
</script>

Como se puede ver el encabezado es la palabra completa sin nada entre las letras, después mandamos llamar un código de script que se encargará de envolver en una variable el elemento “h1” para después cambiarle su contenido por cada letra que compone la palabra precedida y seguida por una etiqueta “span”.

Uso de un ancho fijo para crear texto vertical

Otra opción a utilizar, es aplicar una propiedad “width” fija al elemento que actúa como contenedor de nuestra palabra, en este caso el encabezado de tipo “h1”. Para ello recurriremos únicamente a utilizar CSS y lo haremos de la siguiente manera:

h1 {
   width: 50px;
   font-size: 50px;
   word-wrap: break-word;
}

Como se puede ver, con este código asignamos un ancho muy pequeño que es exactamente igual al tamaño de la letra, para finalmente utilizar la propiedad “word-wrap” con valor de “break-word” y con esto forzar a que cada letra permanezca en su propia línea.

Sin embargo este método tiene un par de desventajas, la propiedad “word-wrap” es parte de la versión 3 de CSS por lo que no es totalmente reconocida por todos los navegadores, además si utilizamos minúsculas puede que no surja efecto. Como opción para solucionar este último problema se puede utilizar la propiedad “letter-spacing” y así de esa manera asegurarnos de que no se pondrán más de 2 letras por renglón.

Uso de ems para crear texto vertical

Un “em” es una medida de tipografía, alternativa a los píxeles, y se utiliza para proporcionar la distancia y espacio que tendrá una letra en base al punto donde se encuentra, en pocas palabras utilizar un “em” es como utilizar la propiedad “x-height” pero con más flexibilidad.

Basta con darle un ancho de “1em” al encabezado y colocar las letras separadas por un espacio para obtener resultados.

h1 {
   width: 1em;
   font-size: 50px;
   letter-spacing: 50px; /* solo por precaución */}

<h1> W e b e r a </h1>

Uso de la propiedad “white-space” de CSS

Si utilizamos la propiedad “white-space” con un valor de “pre”, entonces CSS interpretará cada espacio de nuestro texto literalmente, por lo que si agregamos los espacios suficientes en el código, el texto lucirá de igual manera en la página.

h1 { white-space: pre; }

<h1>
   W
   E
   B
   E
   R
   A
</h1>