4.4. Propiedad quotes

La propiedad quotes sólo tiene sentido cuando se utiliza junto con la propiedad content y los pseudo-elementos :after y :before. La propiedad quote se puede emplear para establecer los caracteres que se utilizan al mostrar las comillas en un elemento.

Por defecto, cuando se utiliza la propiedad content junto con los valores open-quote y close-quote, el navegador muestra unas determinadas comillas. Por tanto, si se considera el siguiente código HTML y CSS:

blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

<blockquote>Lorem ipsum dolor sit amet...</blockquote>

El navegador muestra el ejemplo anterior de la siguiente forma:

Si utilizas un navegador moderno con soporte de la propiedad quotes, el ejemplo anterior se visualiza como muestra la siguiente imagen:

Figura 4.5 Ejemplo de la propiedad quotes

La imagen anterior corresponde al navegador Firefox. Como el estándar CSS 2.1 no indica las comillas que se deben utilizar por defecto, se pueden producir diferencias visuales en cada navegador.

La propiedad quotes se utiliza para establecer de forma explícita las comillas que debe utilizar el navegador y por tanto, neutraliza las posibles diferencias entre navegadores. Las comillas siempre se indican por pares, siendo la primera la comilla de apertura y la segunda la comilla de cierre.

El siguiente ejemplo modifica el anterior para utilizar las comillas « y »:

blockquote {
  quotes: "«" "»";
}
blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

<blockquote>Lorem ipsum dolor sit amet...</blockquote>

Ahora, el navegador muestra el ejemplo anterior de la siguiente forma:

Si se visualiza esta página con un navegador que soporte la propiedad quotes, el ejemplo anterior se visualiza como muestra la siguiente imagen:

Figura 4.6 Ejemplo de la propiedad quotes

La propiedad quotes permite indicar un número ilimitado de pares de comillas. Cuando sólo se define un par, se muestran siempre que se utilice open-quote y close-quote. Cuando se definen varios pares, se van alternando cada vez que se muestran unas comillas dentro de otro elemento que ya tiene comillas. Cada comilla se separa de las demás mediante un espacio en blanco, por lo que no debe utilizarse una coma o cualquier otro caracter de separación.

El siguiente ejemplo define dos pares de comillas en cada elemento de modo que se alternan las comillas cada vez que un elemento se encuentra dentro de otro elemento que también muestra comillas:

blockquote, span {
  quotes: "«" "»" '"' '"';
}

blockquote:before, span:before {
  content: open-quote;
}
blockquote:after, span:after {
  content: close-quote;
}

<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. <span>Vivamus fermentum</span>, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit <span>sem pede suscipit pede.</span> Nulla cursus porta sem. Donec mollis nunc in leo.</blockquote>

Las reglas CSS anteriores indican que el navegador debe utilizar diferentes comillas cuando el nivel de anidamiento sea diferente:

En el ejemplo anterior, tanto <blockquote> como <abbr> establecen dos pares de comillas. Cuando uno de estos dos elementos se encuentre dentro de otro elemento que ya muestra comillas, la propiedad quotes indica que se debe utilizar el segundo par de comillas en vez del primero. Por lo tanto, si utilizas un navegador que soporta la propiedad quotes, el ejemplo anterior se visualiza de la siguiente forma:

Figura 4.7 Ejemplo de la propiedad quotes

Los valores de la propiedad quotes se indican mediante cadenas de texto. Una cadena de texto es un conjunto de uno o más caracteres encerrados por las comillas dobles (") o las comillas simples (``'). Si la cadena contiene comillas dobles, se encierra con las comillas simples y viceversa. Si una cadena de texto tiene tanto comillas simples como dobles, las comillas problemáticas se modifican y se les añade la barra invertida \ por delante:

/* Comillas simples encerradas por comillas dobles */
.selector { quotes: "'" "'"; }

/* Comillas dobles encerradas por comillas simples */
.selector { quotes: '"' '"'; }

/* Comillas simples y dobles encerradas por comillas dobles */
.selector { quotes: "\"" "\"" "'" "'"; }

/* Comillas simples y dobles encerradas por comillas simples */
.selector { quotes: '"' '"' '\` '\`; }

Como las comillas se indican mediante cadenas de texto, no están limitadas a un solo carácter. En el siguiente ejemplo se utilizan unas comillas poco habituales formadas por varios caracteres:

blockquote, span {
  quotes: "«««" "»»»" "--" "--";
}

blockquote:before, span:before {
  content: open-quote;
}
blockquote:after, span:after {
  content: close-quote;
}

<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. <span>Vivamus fermentum</span>, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit <span>sem pede suscipit pede.</span> Nulla cursus porta sem. Donec mollis nunc in leo.</blockquote>

Las reglas CSS anteriores producen el siguiente resultado en el navegador:

En un navegador con soporte de la propiedad quotes, el ejemplo anterior se visualiza de la siguiente forma:

Figura 4.8 Ejemplo de la propiedad quotes

Utilizando el pseudo-selector :lang() es posible incluso definir diferentes tipos de comillas en función del idioma del contenido:

blockquote:lang(en) { quotes: '"' '"' "'" "'" } /* comillas para inglés */
blockquote:lang(es) { quotes: "«" "»" '"' '"' } /* comillas para español */

La propiedad quotes define otro valor llamado none que hace que no se muestre ninguna comilla cuando se utiliza el valor open-quote y close-quote de la propiedad content.

Por último, el estándar de CSS 2.1 recomienda utilizar directamente los códigos definidos en el estándar ISO 10646 para indicar la comilla que se quiere utilizar.

De esta forma, las dos siguientes reglas CSS son equivalentes:

blockquote, abbr {
  quotes: "«" "»" "'" "'";
}

blockquote, abbr {
  quotes: "\00AB" "\00BB" "\0027" "\0027";
}

La siguiente tabla recoge las comillas más utilizadas y sus códigos correspondientes: