Comillas en CSS: la propiedad quotes, q y blockquote con estilo
Guía de comillas en CSS
Propiedad quotes de CSS: q, open-quote y comillas por idioma
Cómo funcionan la propiedad quotes de CSS, el elemento q y open-quote / close-quote, con un selector de idioma en directo, niveles de comillas anidadas y patrones de blockquote con estilo.
La propiedad quotes de CSS elige qué comillas dibuja el navegador para el elemento q y para content: open-quote y close-quote. quotes: auto elige las comillas adecuadas al atributo lang, una lista de pares de cadenas define tus propias comillas por nivel de anidación y quotes: none las elimina. Un blockquote no lleva comillas salvo que las añadas.
Valores de quotes
Valor
Efecto
Comillas adecuadas al idioma del elemento (definido con lang)
open-quote y close-quote no dibujan nada
Un par, usado en todos los niveles de anidación
Par exterior y luego par interior para las citas anidadas
Las comillas son un detalle tipográfico que la mayoría de los sitios hace mal: comillas rectas escritas en las plantillas, las comillas equivocadas para francés o alemán, o una comilla decorativa de blockquote que los lectores de pantalla leen en voz alta. Aquí verás la propiedad quotes en directo en varios idiomas, junto con patrones limpios para citas destacadas y testimonios.
Elige un idioma en el selector. La muestra usa quotes: auto, así que tu navegador elige las comillas según lang.
Cambia a comillas personalizadas y escribe tu propio par exterior e interior para ver cómo funciona la anidación.
Copia la regla quotes generada.
Usa los patrones de blockquote de abajo para testimonios y citas destacadas.
Define lang en el elemento html, y en cualquier pasaje en otro idioma, para que las comillas automáticas coincidan con el texto.
Usa el elemento q para citas cortas dentro de una línea, y blockquote para pasajes más largos que forman su propio bloque.
Cuando la anidación va más allá de tu lista de pares, se reutiliza el último par.
Usa no-open-quote y no-close-quote para mantener equilibrados los niveles de anidación sin dibujar ninguna comilla, por ejemplo entre párrafos.
Preguntas frecuentes
¿Cómo quito las comillas de un elemento q?
Pon q { quotes: none; }. Las comillas vienen del content por defecto del navegador en ::before y ::after, open-quote y close-quote, y none hace que no dibujen nada sin quitar el significado del elemento.
¿Por qué blockquote no muestra comillas?
Los navegadores solo añaden comillas automáticamente al elemento q. Un blockquote tiene sangría por defecto pero no lleva comillas. Añade blockquote::before { content: open-quote; } y su ::after correspondiente, o una comilla decorativa, si tu diseño la necesita.
¿Cómo uso comillas tipográficas en CSS?
Escribe los caracteres directamente en una hoja de estilos UTF-8, quotes: "“" "”" "‘" "’";, o como escapes como "\201C" y "\201D". Los escapes vienen bien cuando un editor o un paso de build estropea los caracteres que no son ASCII.
¿Los lectores de pantalla leen las comillas generadas con CSS?
El contenido generado puede ser anunciado por las tecnologías de apoyo, así que trata las comillas como texto. Una comilla decorativa enorme es mejor dibujarla con una imagen de fondo, un SVG con aria-hidden, o content con texto alternativo vacío: content: "“" / "";.
Cómo funcionan los niveles de anidación
Cada open-quote sube la profundidad de anidación en uno y cada close-quote la baja. La profundidad cero usa el primer par de quotes, la profundidad uno el segundo, y así sucesivamente. Por eso un q dentro de otro q pasa automáticamente de comillas dobles a simples en inglés.
Como la profundidad se cuenta en todo el documento, un open-quote sin cerrar deja todas las citas posteriores un nivel demasiado hondas. Empareja con cuidado en los pseudoelementos, o usa las variantes no- para ajustar la profundidad sin dibujar nada.
Comillas rectas frente a comillas tipográficas
Las " y ' del teclado son marcas de máquina de escribir. El texto impreso usa comillas curvas que apuntan hacia la cita: “ y ” para las dobles, ‘ y ’ para las simples. Generar las comillas con CSS las mantiene coherentes aunque quienes editan el contenido escriban comillas rectas.
Otros idiomas usan formas y posiciones distintas: comillas angulares « » en francés, bajas y altas „ “ en alemán, corchetes de esquina 「 」 en japonés. quotes: auto con el lang correcto resuelve esto para q sin CSS específico por idioma.
Caracteres de comillas y sus escapes CSS
Comillas habituales con sus puntos de código Unicode
Comilla
Nombre
Escape CSS
Comillas dobles de apertura y cierre
Comillas simples de apertura y cierre
Comillas angulares dobles (latinas)
\AB \BB
Comillas angulares simples
Comilla doble baja tipo 9
Corchetes de esquina
Comillas personalizadas para citas anidadas
Dos niveles con escapes
El q exterior usa comillas dobles y el q de dentro usa comillas simples. Los escapes producen comillas tipográficas.
Patrones de blockquote con estilo
Cita destacada con comilla decorativa y pie
La comilla grande usa texto alternativo vacío, así que no se lee en voz alta. figure y figcaption vinculan la cita con su fuente. Los navegadores sin la sintaxis de texto alternativo ignoran esa regla y no dibujan la comilla.
Blockquote que dibuja comillas reales de apertura y cierre
open-quote y close-quote participan en la anidación, así que un q dentro de este blockquote recibe las comillas interiores.