Spanish (Español) translation by Javier Salesi (you can also view the original English article)
Comillas, signos de citación, comas invertidas, como sea que llames estas formas de puntuación, podrías estar usándolas incorrectamente. Echemos un vistazo a los que es correcto, lo que no lo es y lo que puedes hacer dentro de tu CSS para asegurarte de que las comillas tengan aplicado un formato correctamente.
Un poco de terminología
Comencemos ilustrando de lo que hablamos. Hay varias formas de lo que reconocemos como comillas, y cada una tiene su propio propósito específico. Cuando se hace la puntuación en un texto, deberías usar "comillas inglesas".
Ello aplica a comillas dobles y sencillas.
E incluso apóstrofes:
Sin embargo, en internet, comúnmente verás "comillas simples". Son versiones rectas, que a menudo son utilizadas porque están predeterminadas en CMSs y aplicaciones. Incluso tu teclado generalmente hará difícil utilizar cualquier cosa menos las comillas simples.
Las comillas simples no se deben comparar con las "primas"; glifos separados que se usan para denotar unidades de medición, como pies y pulgadas, coordenadas e incluso unidades más complicadas utilizadas en la fabricación de relojes, por ejemplo.
Las primas generalmente son diferentes a las comillas simples en que se inclinan ligeramente, pero eso corresponde a la tipografía.
Así que ¡¿qué son las comillas simples?!
Código. Ese es casi el único lugar en el que deberías usarlas.
Usando comillas adecuadas
Como se mencionó, tu teclado no te ayudará mucho cuando trates de usar las comillas correctas. De hecho, mientras escribo esto, estoy escribiendo comillas constantemente, tendré que hacer una investigación ¡y después remplazarlas!
Si tu documento está usando charset utf-8
1 |
<meta charset="utf-8" /> |
entonces podrás pegar las comillas correctas de manera directa. De manera alternativa, necesitarás usar el llamado HTML o entidades numéricas, o (para CSS) los valores unicode escapados:
| glifo | entidad llamada | entidad numérica | unicode escapado |
“ | “ | “ | \201C |
“ | ” | ” | \201D |
‘ | ‘ | ‘ | \2018 |
’ | ’ | ’ | \2019 |
Comillas en CSS
Podemos usar la propiedad quotes en CSS para asegurarnos que nuestros elementos <q> y <blockquote> están escritos con las comillas correctas. La propiedad quotes acepta cuatro valores en secuencia, cada uno definiendo qué carácter usar bajo cada circunstancia:
- Comillas de apertura
- Comillas de cierre
- Comillas anidadas de apertura
- Comillas anidadas de cierre
Podría parecer un poco así:
1 |
q, |
2 |
blockquote { |
3 |
quotes: "\201C" "\201D" "\2018" "\2019"; |
4 |
}
|
Aquí estamos apuntando tanto a comillas dentro del marcado como blockquotes. Estamos usando valores unicode escapados (mencionados en la tabla anterior) para dictar qué glifos se usarán para abrir y cerrar nuestras comillas. Hemos señalado que queremos comillas dobles para abrir, luego comillas dobles para cerrar. Las comillas anidadas tendrán comillas sencillas aplicadas.
Mira esta demostración. En ella, verás un <div> sin ningún estilo aplicado, luego uno con la aplicación correcta de estilo.
Nota: Estas comillas están destinadas a usar pseudo elementos, así que solo navegadores que las soportan mostrarán las comillas de esta manera.
¡Quiero más poder!
Más propiedades nos permiten tener mayor control. Podemos continuar para controlar específicamente esos pseudo elementos, señalando si quisiéramos que se muestren las comillas de apertura o de cierre.
1 |
q:before, |
2 |
blockquote:before { |
3 |
content: open-quote; |
4 |
}
|
5 |
q:after, |
6 |
blockquote:after { |
7 |
content: no-close-quote; |
8 |
}
|
En este código hemos alterado el contenido de los pseudo elementos señalando que realmente no queremos mostrar comillas de cierre.
Brecha de lenguaje
Pero, no todos muestran las comillas de la misma manera. Mira como se usan en el francés por ejemplo.
Estas se llaman guillemets (no, no guillemots) y son solo un ejemplo de comillas alternativas. Felizmente, somos libres para usar las entidades correctas para cualquier idioma que necesitemos. Y podemos apuntar al atributo lang en el elemento html para ser específico (gracias fliptheweb por ese pequeño consejo).
1 |
<html lang="fr"> |
2 |
<q>...
|
1 |
html[lang="fr"] q { |
2 |
quotes: "\00ab" "\00bb"; |
3 |
}
|
Perdón también por mi francés, si cometí algún error..
Conclusión
Prepárate, ¡no hay excusa para usar comillas simples!
Más recursos
- Comillas en el mismo marcado en html5doctor.com
- Comillas rectas y estilizadas en typographyforlawyers.com
- quotesandaccents.com
- Tipografía web técnica: Pautas y técnicas por Harry Roberts
- Variación internacional en el uso de comillas en Wikipedia
- Comillas inglesas para personas inteligentes
By
