vagacode

Los textos son textos pero a veces es necesario que sean más que textos y la posibilidad de decorarlos o darles cierto formato ha sido siempre una de las características principales del CSS pero, durante años, las propiedades que permitían eso permanecieron invariables.

Sin embargo, a partir de la irrupción del CSS3 las cosas están cambiando. Aunque lo hacen de modo anárquico porque muchas de las nuevas propiedades o sus valores aún no están incorporados de modo definitivo y se mantienen como recomendaciones, la mayoría de los navegadores las aceptan en su forma más básica o incluyendo un prefijo.

text-decoration es una propiedad muy vieja, jamás ha cambiado y es poco flexible; en principio, tiene unos pocos valores elementales: none, underline, overline, line-through y blink de las cuales, solemos usar sólo las dos primeras y lo que hacen es subrayar un texto o evitar que quede subrayado que es lo que por defecto ocurre con todos los enlaces.

text-decoration es una de las propeidades más tradicionales; jamás ha cambiado y es poco flexible. Se utiliza para agregar una línea debajo de un texto (underline), arriba de él (overline) o tacharlo (line-through).

A esos valores, podríamos agregar blink que ya no tiene uso práctico porque no produce ningún efecto en los navegadores modernos y nada más; eso era todo lo que podía hacerse con esa propiedad aunque todos esos valores podían ser combinados y generarse cosas estrafalarias, no se ven muchos ejemplos de este tipo de doble o triple decoración.

Hasta ahora, ese subrayado era una línea simple, del mismo color de la fuente del texto. La novedad es que ahora existe la posibilidad de establecer una serie de características diferenciadas para esa línea, transformando la propiedad original en una que permite definir su estilo con tres parámetros optativos; por un lado, text-decoration-line se usará para definir donde irá (arriba, abajo, etc), text-decoration-color definirá su color y text-decoration-style el estilo que podrá ser solid, double, dotted, dashed o wavy.

p.subrayado {
    text-decoration: red underline wavy;
}

Al parecer, hay gente muy preocupada con los detalles de esta línea porque se ha propuesto agregar otra propiedad llamada text-decoration-skip que permitiría perfeccionar el subrayado evitando que aparezca por encima de ciertos caracteres lo que hace que el texto sea más confuso de leer (por ejemplo una letra p minúscula) y otra llamada text-underline-position que permitiría establecer la posición de esa línea pero en ambos casos, los navegadores parecen reacios a implementarlas.

En lo que si parecen haberse puesto de acuerdo es en otra propiedad llamada text-emphasis que agrega una línea con una marca (un carácter) sobre cada carácter de la línea inferior excepto espacios y cualquier otro carácter no imprimible.

La propiedad es una forma simplificada de establecer otras dos: text-emphasis-style y text-emphasis-color.

La propiedad text-emphasis-style define el tipo de carácter a mostrar y por defecto es un punto que puede estar relleno (filled) o abierto (open); los estilos predefinidos son dot, circle, double-circle, triangle y sesame.

Un ejemplo:

text-emphasis-color: red;
text-emphasis-style: open sesame;

/* o bien */

text-emphasis: open sesame red;

No estamos limitados a usar los estilos predefinidos, podemos utilizar cualquier otro carácter; para eso, basta colocarlo entre comillas:

text-emphasis-style: "*";
text-emphasis-style: "2386";
text-emphasis-style: "+";

No es mucho más que eso y hasta que punto tendrá una existencia permanente nadie lo puede adivinar; a simple vista, uno diría que será una de esas cosas que terminarán en el olvido pero ... por ahora, sólo se sabe que la dimensión del carácter es alrededor de un 50% del tamaño de la fuente y su posición no puede ser modificada así que depende de la propiedad font-size y no se ve afectada por la propiedad line-height.

Mucho más útil es la propiedad text-rendering que no está muy difundida pero que merece ser tenida en cuenta ya que lo que nos permite es controlar la forma en que los navegadores y sistemas operativos muestran los textos cuando se utilizan determinado tipo de fuentes, haciendo hincapié en alguna característica de esas fuentes.

Puede tener cuatro valores diferentes:

auto es el valor por defecto
optimizeSpeed enfatiza la velocidad eliminando ciertas características de la fuente
optimizeLegibility enfatiza la legibilidad en desmedro de la velocidad
geometricPrecision enfatiza la geometría de la fuente

en la práctica un valor auto utiliza optimizeSpeed para fuentes pequeñas (menos de 20 pixeles) y optimizeLegibility para el resto

La propiedad puede ser importante con ciertas fuentes pero su efecto es muy sutil y claro, siempre se recomienda utilizar las llamadas fuentes seguras, establecer una variante alternativa por defecto o recurrir a las que provee Google Fonts.

La propiedad text-transform también es una vieja conocida con la cual podemos transformar los caracteres en mayúsculas (uppercase), minúsculas (lowercase) o forzar a que la primera letra de cada palabra esté en mayúsculas sin cambiar al resto (capitalize).

La novedad es que se ha agregado un nuevo valor llamado full-width que está pensado para combinar caracteres occidentales con otros tipos de escrituras forzando que que se muestren dentro de un cuadrado virtual y de tal forma de mantener cierta equivalencia entre sus dimensiones individuales, ignorando casi por completo las características de la fuente original: