Incluir comillas latinas en tus citas con CSS

Para incluir citas breves en un texto, dentro de un párrafo, la etiqueta html que debemos emplear es <q>. Lo que incluyamos dentro de las etiquetas <q> y </q> aparecerá entre comillas automáticamente por arte de magia html/css. Bien. Pero aparecerá según el uso ortotipográfico anglosajón, es decir, entre comillas altas o inglesas (“ ”) y, si hubiera comillas dentro de la propia cita, serán comillas simples (‘ ’).

La cuestión es que el uso ortotipográfico español prescribe otras comillas diferentes: Comillas latinas o angulares en primera instancia y comillas altas como comillas secundarias (a usar dentro de la propia cita si fuera necesario). Así que solemos guglear para encontrar el modo de escribir las comillas latinas en nuestros teclados y sistemas operativos a fin de incluirlas en nuestros textos web cuando lo precisamos. Pero esto en realidad es innecesario, puesto que podemos dejar este uso fijado en nuestro CSS.

Por defecto, sin fijar los valores que deseamos para la etiqueta <q>, cuando escribimos y marcamos debidamente una cita en nuestro html de este modo:

<p>Como dijo Cervantes, <q>Dad crédito a las obras y no a las palabras</q>.<p>

Obtendremos lo siguiente:

Como dijo Cervantes, Dad crédito a las obras y no a las palabras.

Pero si definimos la propiedad quotes en nuestro CSS del siguiente modo:

q {
  quotes: "«" "»" "“" "”"; 
}

El efecto que conseguimos (en la mayoría de los navegadores) es el que se amolda al uso ortotipográfico en España:

Como dijo Cervantes, Dad crédito a las obras y no a las palabras.