Texto en CSS
CSS dispone de ciertas propiedades relacionadas con el texto de una página, pero alejándose de criterios de tipografías, y centrándose más en objetivos de alineación o tratamiento de espaciados. Veamos algunas de estas propiedades:
Espaciados
-
letter-spacing normal Espacio entre letras (tracking) -
word-spacing normal Espacio entre palabras - line-height normal | Altura de una línea (interlineado) text-indent Indentación de texto (sangría)
-
white-space normal nowrap pre pre-line pre-wrap Comportamiento de los espacios -
tab-size Ancho de las tabulaciones (espacio o tamaño) -
direction ltr rtl Dirección del texto
Las tres primeras propiedades, determinan el espacio en diferentes zonas del texto. Por ejemplo la primera de ellas, letter-spacing , especifica el espacio de separación que hay entre cada letra de un texto, denominado comúnmente interletraje o tracking. Con números negativos tendremos más unidas las letras y con números positivos, las tendremos más separadas unas de otras.
La propiedad line-height especifica la altura que tendrá cada línea de texto, una característica que puede facilitar muchísimo la lectura, puesto que un interlineado excesivo puede desorientar al lector, mientras que uno insuficiente puede hacer perder al visitante el foco en el texto.
La propiedad word-spacing permite establecer el espacio que hay entre una palabra y otra en un texto determinado, lo que puede facilitar la legibilidad de los textos de una página web y da flexibilidad y control sobre ciertas tipografías.
La propiedad text-indent establece un tamaño de indentación (por defecto, 0), o lo que es lo mismo, hace un sangrado, desplazando el texto la longitud especificada hacia la derecha (o izquierda en cantidades negativas).
Al utilizar white-space podemos indicar el comportamiento que tendrán los espacios en blanco en una página web. Por defecto, el valor es normal (transforma múltiples espacios en blanco en un solo espacio consecutivo), pero tiene otras opciones posibles:
- normal Los espacios se transforman en uno solo. Se ajusta al contenedor.
- nowrap Los espacios se transforman en uno solo. Ignora saltos de línea.
- pre Respeta literalmente los espacios. Ignora saltos de línea.
- pre-wrap Respeta literalmente los espacios. Se ajusta al contenedor.
- pre-line Respeta literalmente los espacios y suprime los espacios del final. Se ajusta al contenedor.
Nota: La diferencia entre pre-wrap y pre-line es que este último respeta literalmente los espacios que están antes del texto, mientras que si sobran después del texto, los suprime.
Probablemente, a medida que realices diferentes diseños, te encontrarás con la desagradable situación en la que un texto concreto (por ejemplo, un enlace demasiado largo) no cabe dentro de un contenedor, por lo que el texto se desborda y provoca efectos no deseados como salirse de su lugar.
-
hyphens manual none auto Indica si se debe dividir las palabras por guiones. -
overflow-wrap normal break-word anywhere Dividir palabras para evitar desbordamientos. -
line-break auto loose normal strict anywhere Determina como dividir líneas. -
word-break normal keep-all break-all Establece si está permitido partir palabras.
OJO: La propiedad overflow-wrap sólo funciona cuando white-space está establecida a valores que respeten espacios. Además, la propiedad word-wrap es un alias de overflow-wrap por temas de retrocompatibilidad.
Existen formas de mitigar este problema, como la propiedad word-break , word-wrap o la propiedad hyphens , sin embargo, aún están en fase de desarrollo y su soporte está poco extendido en la actualidad. Aún así, si quieres probar una combinación de varias propiedades que suele dar resultado para paliar este comportamiento, puedes probar lo siguiente:
.container {
hyphens: auto;
word-wrap: break-word;
word-break: break-word;
}
Por otra parte, la propiedad tab-size permite establecer el número de espacios que se mostrarán en el cliente o navegador al representar el carácter de un TAB (tabulador), que generalmente se convierten a un espacio en blanco, pero sin embargo son visibles en elementos HTML como <textarea>
o <pre>
.
Por último, la propiedad direction permite establecer la dirección del texto: de izquierda a derecha (ltr, left to right) o de derecha a izquierda (rtl, right to left).
Alineaciones
También existen varias propiedades CSS que permiten modificar las diferentes alineaciones de los textos en su conjunto. Veamos un resumen de ellas:
-
text-align left center right justify Justificación del texto -
text-justify auto inter-word inter-character none Método de justificación de textos -
text-overflow clip ellipsis texto Comportamiento cuando el texto no cabe «[…]»
En el primer caso, se puede establecer los valores left , right , center o justify a la propiedad text-align para alinear horizontalmente el texto a la izquierda, a la derecha, en el centro o justificar el texto, respectivamente, de la misma forma que lo hacemos en un procesador de texto.
En la propiedad text-justify indicamos el tipo de justificación de texto que el navegador realizará: automática (el navegador elige), ajustar el espacio entre palabras (el resultado de ajustar con la propiedad word-spacing), ajustar el espacio entre par de carácteres (el resultado de ajustar con la propiedad letter-spacing) y justificación desactivada.
Por su parte, la propiedad text-overflow cambia el comportamiento del navegador cuando detecta que un texto no cabe y se desborda. En ella podemos utilizar los valores clip , desbordar el contenedor (comportamiento por defecto), ellipsis , que muestra el texto «…» cuando no cabe más texto y por último indicar el texto que queremos utilizar en lugar de «…».
Al igual que existe text-align para alinear horizontalmente, también existe la propiedad vertical-align , que se encarga de la alineación vertical de un elemento, pudiendo establecer como valor las siguientes opciones:
- baseline La base del elemento con la base del elemento padre.
- sub El elemento como un subíndice.
- super El elemento como un superíndice.
- top La parte superior del elemento con la parte superior del elemento más alto de la línea.
- middle El elemento en la mitad del elemento padre.
- bottom La parte inferior del elemento con la parte inferior del elemento más bajo de esa línea.
- text-top La parte superior del elemento con la parte superior del texto padre.
- text-bottom La parte inferior del elemento con la parte inferior del texto padre.
- size Sube o baja un elemento el tamaño o porcentaje especificado.
Consejo: Cuidado con vertical-align . Esta propiedad puede querer utilizarse para centrar verticalmente un elemento, sin embargo, su utilización es un poco menos intuitiva de lo que en un principio se cree, ya que se debe utilizar para alinear textos respecto a elementos. Para alinear bloques de contenido o crear estructuras de diseño, véase Flexbox.
Variaciones
Por último, existen varias propiedades aplicables a los textos para variar su naturaleza. Echemos un vistazo:
-
text-decoration none underline overline line-through Indica el tipo de subrayado (decoración) -
text-transform none capitalize uppercase lowercase Transforma a mayús/minús o texto capitalizado
La propiedad text-decoration permite establecer subrayados (underline), subrayados por encima del texto (overline) y tachados (line-through). Indicando el valor none se puede eliminar cualquiera de los formatos anteriores. Es muy utilizado, por ejemplo, para eliminar el subrayado de los textos que tienen un enlace o hipervínculo.
Por último, la propiedad text-transform es muy útil para convertir textos a mayúsculas (uppercase) o minúsculas (lowercase), o incluso capitalizar el texto (capitalize), es decir, poner sólo la primera letra en mayúscula, independientemente de como esté escrito en el documento HTML.