CSS: Comillas

La propiedad CSS quotes permite crear comillas personalizadas para su uso en elementos HTML de citación, como sería <q>, <blockquote> o <cite>. Esta propiedad se usa en combinación con content, utilizada para añadir contenido estético, y los pseudoelementos ::before y ::after.

En esencia, la finalidad de la propiedad quotes es establecer de forma explícita los caracteres que debe mostrar el navegador web para representar las comillas, evitando diferencias entre los distintos navegadores.

Para utilizar la propiedad quotes, se define una lista de pares de valores entre comillas. Estos pares de valores representan las comillas de apertura y cierre para distintos niveles de anidamiento, y se mostrarán rodeando al elemento HTML que se haya apuntado mediante los pseudoelementos ya mencionados.

Código CSS de uso de la propiedad quotes:

q {
 quotes: "«" "»" "‘" "’";
}

En este ejemplo, el primer par de valores ("«" "»") define las comillas de nivel superior, mientras que el segundo par ("‘" "’") define las comillas del siguiente nivel, y así sucesivamente. Se puede definir tantos pares de comillas como niveles sean necesarios. Después, usando el elemento <q> en el documento HTML, se aplicarán las comillas teniendo en cuenta los niveles definidos.

Para mostrar las comillas previamente definidas es necesario usar la propiedad content junto con los pseudoelementos ::before y ::after. El valor de la propiedad content será una de las siguientes palabras clave:

Vamos a ver un ejemplo práctico del uso de quotes en el que se va a representar tres tipos de comillas diferentes en un frase de tipo literario.

Código CSS:

.ej1 q {
 quotes: "«" "»" "“" "”" "‘" "’";
}

.ej1 q::before {
 quotes: open-quote;
}

.ej1 q::after {
 quotes: close-quote;
}

Código HTML:

<q>Me dijo: <q>está en la carpeta <q>/usr/bin</q></q></q>.

Resultado:

Me dijo: está en la carpeta /usr/bin.

En este ejemplo, el navegador web ha aplicado las comillas angulas «» en el elemento <q> de primer nivel. Luego ha aplicado las comillas dobles o inglesas “” y, finalmente, las comillas simples ‘’.

Con los valores no-open-quote y no-close-quote se evita que se muestren las comillas a un elemento específico, pero de igual forma se mantendrá la jerarquía establecida a través de la propiedad quotes.

Sintaxis

La sintaxis para indicar pares de valores es sencilla. Cada valor debe ir cerrado entre comillas simples ('') o dobles (""), aunque esto pueda sonar redundante, y debe ir separado del resto de valores con un espacio en blanco.

Si el valor contiene comillas dobles se encierra con comillas simples ('"'), y viceversa ("'"). Es una cuestión de sentido común. En caso de conflicto, se puede usar la barra inversa (\) como carácter de escape; así: '\'' o "\"".

Comillas anidadas

Como ya se ha mencionado, la propiedad quotes permite indicar un número ilimitado de pares de comillas. Si solo se establece un par de valores, el navegador web siempre mostrará estos valores en el documento HTML.

En cambio, si se definen varios pares, se irán alternando cada vez que el navegador web se encuentre un elemento HTML en el que debe representarlas.

Múltiples idiomas

Por defecto, los navegadores web utilizan ciertos caracteres para representar las comillas de citación. Estos caracteres pueden ser diferentes dependiendo del idioma que se haya definido a través del atributo lang en el elemento HTML.

Estos caracteres por defecto se pueden modificar con la pseudoclase de idioma, permitiendo definir comillas específicas para cada idioma. Esta pseudoclase es :lang(), y admite como parámetro el código de idioma (ISO 639).

Por ejemplo, la siguiente lista HTML:

<ul>
  <li lang="fr">
    <q>Comillas en francés.</q>
  </li>
  <li lang="de">
    <q>Comillas en alemán.</q>
  </li>
  <li lang="en">
    <q>Comillas en inglés.</q>
  </li>
</ul>

Resultado por defecto que mostrará el navegador web:

• Comillas en francés.
• Comillas en alemán.
• Comillas en inglés.

Vamos a adaptarlas para que el navegador las represente con otros caracteres. En el código CSS declaramos lo siguiente:

.ej2 li:lang(fr) {
  quotes: "‹" "›";
}

.ej2 li:lang(de) {
  quotes: "❛" "❜";
}

.ej2 li:lang(en) {
  quotes: "❝" "❞";
}

.ej2 li q::before {
  color: red;
  content: open-quote;
}

.ej2 li q::after {
  color: red;
  content: close-quote;
}

Resultado:

• Comillas en francés.
• Comillas en alemán.
• Comillas en inglés.

Múltiples caracteres

Debido al hecho de que las comillas se especifican a través de cadenas de texto, no están limitadas a un solo carácter, por lo que es posible definir múltiples caracteres a la vez, tanto para los caracteres de apertura como para los de cierre.

Código CSS:

.ej3 q {
  quotes: "``" "´´" "--" "--"
}

.ej3 q::before {
  color: red;
  quotes: open-quote;
}

.ej3 q::after {
  color: red;
  quotes: close-quote;
}

Resultado

Comillas con múltiples caracteres.

Norma ISO 10646

Las comillas de los ejemplos anteriores se han indicado como cadena de texto, y no hay problema por hacerlo así. Sin embargo, CSS también permite introducir estos caracteres a partir de códigos de la norma ISO 10646.

En la tabla siguiente se exponen algunos códigos:

Por tanto, el siguiente código CSS:

.ej4 q {
  quotes: "«" "»";
}

Es equivalente al siguiente:

.ej4 q {
  quotes: "\00AB" "\00BB";
}

Resultado:

Comillas con la norma ISO 10646.

Tal y como se puede ver en este ejemplo, los códigos se han introducido con el prefijo de la barra inversa (\) usada como carácter de escape.