Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

La Forma Más Fácil Para Crear Texto Vertical con CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Esta mañana, necesitaba crear texto vertical para un proyecto en el que estoy trabajando. Después de probar un par ideas, me dirigí a Twitter para consultar y solicitar a nuestros seguidores opiniones respecto al tema. ¡Obtuvimos un montón de excelentes respuestas e ideas que hoy vamos a revisar!

* Nota: por favor, consulta el "Método 6" más abajo para conocer más detalles sobre el uso adecuado.

¡Suscríbete a nuestro canal de YouTube para ver todos los video tutoriales!
¿Prefieres ver este vídeo en Screenr?


Método 1: Etiquetas <br>

En principio, una posible forma (aunque no recomendable) de conseguir un texto vertical consiste en añadir una etiqueta <br> tras cada letra.

Ver Muestra

No utilices este método. Es poco fiable y descuidado.


Método 2: Crear un Contenedor Estático

Con este método, envolvemos cada letra entre etiquetas span y luego configuramos su atributo display a block mediante CSS.

Ver Muestra

El problema con esta solución, además del aterrador código de su estructura, es que es un proceso manual. Si el texto se generase dinámicamente desde un CMS, no podrías emplearlo. No uses este método.


Método 3: Utilizar JavaScript

Mi instinto inicial fue añadir dinámicamente las etiquetas span con JavaScript. De esta forma, sorteamos los inconvenientes mencionados en el segundo método.

Ver Muestra

Este método definitivamente incorpora mejoras. Arriba, hemos split (dividido) el texto en una cadena y luego hemos envuelto cada letra dentro de un elemento span. Aunque podríamos usar algo como una declaración for, o $.map para filtrar la cadena, una forma mucho mejor y más rápida que reunir y envolver el texto cada vez manualmente. 

Pero aun siendo mejor, esta solución no es recomendable.

  • ¿Rompería nuestro diseño si JavaScript estuviese deshabilitado?
  • Con preferencia y de ser posible, deberíamos estar usando CSS para lograr esto.

Método 4: Aplicar Width al Elemento Contenedor

Evitemos el empleo de JavaScript siempre que sea posible. ¿Qué pasaría si aplicásemos una anchura determinada al elemento contenedor y forzásemos que el texto estuviese siempre contenido en él? Podría funcionar.

Ver Muestra

En este escenario, aplicamos una breve anchura a la etiqueta h1, y después hacemos que su font-size sea igual al valor exacto de la anchura. Por último, estableciendo un word-wrap con valor break-word, forzando a cada letra a ocupar su propia línea. El problema es que aun siendo word-wrap: break-word parte de la especificación CSS3, no todos los navegadores la aceptan.

Excluyendo a los navegadores más antiguos, esto aparentemente soluciona nuestro problema... aunque no del todo. La muestra de arriba parece funcionar, pero es demasiado arriesgado jugar con valores expresaos en píxeles. Vamos a intentar algo tan simple como convertir las letras mayúsculas en minúsculas.

Broken Again

¡Uy!; con este método, tenemos que ser muy cuidadosos en lo que respecta a los valores que especifiquemos. No es recomendable.


Método 5: Aplicar letter-spacing

Como medida de precaución y para ampliar el cuarto método, ¿por qué no aplicamos un letter-spacing bastante grande solucionando así este asunto?

Ver Muestra

Esto parece resolver el problema, sin embargo, de nuevo, también estamos usando aquí un poco de CSS3.


Método 6: Usa medidas en ems

Por otra parte, existe una solución que se resuelve con una línea. ¿Recuerdas cuando nos enteramos de que aplicando un overflow: hidden a un elemento padre, haría que de forma milagrosa su contenido flotase? ¡Este método cosiste en ajustar las cosas de esta manera! La clave está en el uso de ems, y la colocación de un espacio entre cada letra.

Ver Muestra

Bastante sencillo, ¿no? Y de esta forma, podrás aplicar cualquier tamaño de fuente que desees. Y esto es así porque estamos usando ems -- que es el equivalente a usar x-height relativo a la fuente elegida en cada caso -- de esta forma obtenemos mucha más flexibilidad.

Pero, una vez más, en ocasiones más de una letra acabará situándose en una misma línea. Tienes que estar seguro; por este motivo hemos aplicado un amplio letter-spacing, para asegurarnos de que nunca habrá más de una letra por línea. 

Según mis conocimientos hasta el momento, esta es la mejor solución, la más compatible con la mayoría de los navegadores.


Método 7: Whitespace

Una última forma de conseguir este efecto se basa en sacar provecho de la propiedad white-space.

Ver Muestra

Aplicando el valor pre a la propiedad white-space, estamos indicando que el texto se comporte como si estuviera dentro de una etiqueta pre. Por tanto, respeta cualquier espacio que hayas añadido.


Conclusión

¿No debería existir una regla CSS3 que cumpliese esta función? ¿Y si pudiésemos indicar algo en las líneas font-display: letter-block; que estableciese que los caracteres fuesen renderizados en forma de bloques ordenados?

¿Qué opinas? ¿Conoces alguna otra alternativa que debamos considerar? Mucha gente ha sugerido el empleo de text-rotation como solución, pero es importante recordar que esto también provoca el giro del texto en 90 grados, que no es lo que pretendemos.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.