CSS: Simbolización

CSS permite cambiar los símbolos de los contadores. También se puede controlar la distribución de los símbolos, añadir prefijos y sufijos, definir un rango de valores determinado, indicar símbolos adicionales o especificar símbolos para valores negativos. Para ello se usa una regla arroba: @counter-style.

Esta funcionalidad de CSS permite añadir un alto grado de personalización de los contadores. De esta manera, podremos adaptar los estilos de las listas ordenadas sin tener que usar los símbolos y estilos que vienen predefinidos.

Dentro de esta regla arroba podemos usar una serie de descriptores que permiten definir los contadores personalizados con bastante detalle. En realidad funcionan como si se tratase de propiedades. Son los siguientes:

Vamos a verlos con detalle:

Sistema de conversión

El descriptor system permite indicar el sistema a usar en la conversión del contador. Como valor admite una palabra clave que indica el algoritmo.

Hay tres formas de uso y son las siguientes:

Para los sistemas cyclic, numeric, alphabetic, symbolic y additive, se usa únicamente la palabra clave como valor. Así: system: numeric.

En el caso de fixed, se puede usar como única palabra clave o junto a un número entero que define un conjunto finito de símbolos, iterando una sola vez la lista de símbolos que se haya proporcionado. Por ejemplo: system: fixed 3.

En cambio extends se debe acompañar con el nombre del tipo de lista que se esté usando. Si es numérico se usará system: extends decimal, si es alfabético podemos usar system: extends lower-latin, etc.

Vamos a crear una lista usando cyclic para alternar dos símbolos.

@counter-style haz-ciclo {
  suffix: ' ';
  symbols:  '<' '>';
  system: cyclic;
}

.alterna {
  list-style: haz-ciclo;
}

.alterna li::marker {
  color: red;
}

• HTML
• CSS
• JS
• Python

Símbolos personalizados

Tal y como se ha podido observar en el ejemplo anterior, para indicar los símbolos personalizados que queramos usar en los contadores se debe usar el descriptor symbols. Los símbolos se separan con un espacio y pueden ser cadenas de texto de varios caracteres. También se puede usar imágenes con la función url(), aunque no todos los navegadores web las soportan.

En el siguiente ejemplo usamos letras envueltas en círculos. Para simplificar, desde la A a la D. En este caso se usa el sistema alphabetic.

@counter-style circular {
  symbols: 'Ⓐ' 'Ⓑ' 'Ⓒ' 'Ⓓ';
  system: alphabetic;
}

.envuelve {
  list-style: circular;
}

.envuelve li::marker {
  color: red;
}

• HTML
• CSS
• JS
• Python

Símbolos acumulativos

Para crear asociaciones de símbolos acumulativos, como sería el caso de los números romanos o las seis caras de un dado, se usa el descriptor additive-symbols junto con el sistema additive.

Como valor, se debe indicar tuplas aditivas, que son parejas de valores. Estas tuplas constan de dos partes: un peso entero no negativo y un símbolo de contador, y se separan con una coma. Deben aparecer en orden descendente según el peso indicado, es decir, de más peso a menos peso.

Vamos a crear un ejemplo para definir los números romanos. El símbolo «I» equivale al número 1 y se puede acumular hasta el 3. Para hacer el 5 y el 10 se usa los símbolos «V» y «X». Por tanto, tendremos que indicar que el cuatro y el nueve son «IV» y «IX». Haremos los números que van del 1 («I») al 1000 («M»).

Por ejemplo:

@counter-style numeros-romanos {
  additive-symbols:
    1000 "M", 900 "CM",
    500 "D", 400 "CD",
    100 "C", 90 "XC",
    50 "L", 40 "XL",
    10 "X", 9 "IX",
    5 "V", 4 "IV",
    1 "I";
  system: additive;
}

.romanizacion {
  list-style: numeros-romanos;
}

.romanizacion li::marker {
  color: red;
}

• HTML
• CSS
• JS
• Python

Sufijo

Para introducir un sufijo al contador se usa el descriptor suffix. El valor será una cadena de caracteres, por lo que puede ir entre comillas, y aparecerá al final del contador. El valor por defecto es un punto (.).

Un ejemplo bastante habitual es el uso del cierre del paréntesis ()) en listas enumeradas con el alfabeto en minúsculas. Así:

@counter-style con-sufijo {
  suffix: ") ";
  symbols: a b c d;
  system: alphabetic;
}

.sufijo {
  list-style: con-sufijo;
}

.sufijo li::marker {
  color: red;
}

• HTML
• CSS
• JS
• Python

Prefijo

También se puede especificar un prefijo, que aparecerá justo antes del contador. Para ello se usa el descriptor prefix. Al igual que en el caso del sufijo, su valor es una cadena de caracteres, pero no tiene valor por defecto.

Vamos a ver un ejemplo bastante ilustrativo:

@counter-style puntos {
  prefix: "• ";
  system: extends decimal;
}

.prefijo {
  list-style: puntos;
}

.prefijo li::marker {
  color: red;
}

• HTML
• CSS
• JS
• Python

Valores negativos

El descriptor negative permite definir la forma de representar valores negativos de un contador, y admite dos parámetros que son dos cadenas de texto que se agregarán antes y después del contador. Es similar a indicar un prefijo y un sufijo, pero solo se muestra en valores negativos. Por defecto: -.

@counter-style neg {
  negative: "[-" "]";
  system: extends decimal;
}

.negativo {
  list-style: neg;
}

.negativo li::marker {
  color: red;
}

-2. HTML
-1. CSS
0. JS
1. Python

Rango de valores

Para especificar rangos de valores en los contadores se usa el descriptor range. De esta manera, el contador solo usará los valores que estén dentro del rango establecido. Si el valor del contador queda fuera del rango indicado, se usará el estilo alternativo (fallback) para la representación de ese marcador.

El valor por defecto es auto, con el que se establecerá un rango dependiendo del valor del descriptor system. Rango según los sistemas posibles:

Este descriptor admite dos valores separados con un espacio. Puede ser un valor numérico o la palabra clave infinite, referente al infinito.

Algunos ejemplos:

/* De 3 a 6 */
@counter-style rango {
  range: 3 6;
}

/* De -infintio a infinito */
@counter-style rango {
  range: infinite infinite;
}

/* De -100 a infinito */
@counter-style rango {
  range: -100 infinite;
}

Rellenar con ceros

El descriptor pad es muy interesante ya que permite rellenar con ceros u otros caracteres el sistema de numeración que estemos usando. Por ejemplo, puede usarse para que el mostrador muestre los valores «001», «002», «003» y «004», en vez de mostrar simplemente los números «1», «2», «3» y «4».

Este descriptor admite dos parámetros: el primero es el número de dígitos que debe tener el número del contador, y el segundo es el valor de relleno que se usará para cubrir el número de dígitos indicado en el primer parámetro.

@counter-style relleno {
  pad: 2 "0";
  system: extends decimal;
}

.relleno {
  list-style: relleno;
}

.relleno li::marker {
  color: red;
}

• HTML
• CSS
• JS
• Python

Valores alternativos

El descriptor fallback permite indicar el nombre del tipo de lista a usar como valor alternativo. Se utilizará como recurso de respaldo en aquellos casos en los que el contador personalizado no pueda crear una representación de marcador.

Es útil usarlo cuando hay que representar valores que quedan fuera del rango, y cuando se usa el sistema fixed y no hay suficientes símbolos para representar valores en todos los elementos. Su valor por defecto es decimal.

Accesibilidad

El descriptor speak-as permite indicar el modo de lectura (audio) de un contador por parte de los sintetizadores de voz. Se indica la representación del símbolo del contador de forma hablada. Por ejemplo, que un contador sea pronunciado como un valor numérico. Por tanto, mejora la accesibilidad.

Como valor admite una serie de palabras clave. Son las siguientes: