Deux paires de guillemets, l’une pour les citations de premier niveau, l’autre pour les citations imbriquées à l’intérieur : c’est tout ce que la propriété CSS quotes attend en argument, et c’est suffisant pour régler un problème que beaucoup de sites multilingues résolvent maladroitement, à coup de balises <blockquote> différentes selon la langue ou de feuilles de style dupliquées.
Le sélecteur :lang(), combiné à cette propriété, permet d’afficher des guillemets français « » pour un contenu déclaré en français, et des guillemets anglais typographiques pour un contenu déclaré en anglais, à partir d’une seule règle CSS générique qui s’adapte automatiquement selon l’attribut lang présent dans le HTML.
Le problème des guillemets codés en dur
Beaucoup de thèmes affichent une citation avec des guillemets saisis directement dans le contenu ou générés par un pseudo-élément CSS fixe, indépendant de la langue. Un site en français affiche alors ses citations avec des guillemets anglais si le thème vient d’un développeur anglophone, ou inversement un site multilingue affiche partout les mêmes guillemets français même pour ses pages en anglais ou en allemand, où la convention typographique est pourtant différente.
Cette incohérence typographique passe souvent inaperçue d’un développeur non germaniste ou non anglophone, mais elle saute aux yeux d’un visiteur natif de la langue concernée, habitué à des conventions différentes de citation.
La solution : quotes combiné à :lang()
La propriété quotes s’applique généralement à un pseudo-élément ::before et ::after, en s’appuyant sur les valeurs spéciales open-quote et close-quote :
blockquote:lang(fr) {
quotes: "\00AB\2009" "\2009\00BB" "\2039\2009" "\2009\203A";
}
blockquote:lang(en) {
quotes: "\201C" "\201D" "\2018" "\2019";
}
blockquote:lang(fr) p::before,
blockquote:lang(en) p::before {
content: open-quote;
}
blockquote:lang(fr) p::after,
blockquote:lang(en) p::after {
content: close-quote;
}
Les quatre valeurs de la propriété quotes correspondent, dans l’ordre, au guillemet ouvrant principal, au guillemet fermant principal, puis à la paire utilisée pour une citation imbriquée à l’intérieur de la première. Les codes hexadécimaux précédés d’un antislash désignent des caractères Unicode précis, ici l’espace fine insécable habituelle en français entre le guillemet et le texte.
Pourquoi passer par :lang() plutôt que par une classe
Une alternative consisterait à ajouter une classe CSS différente selon la langue de la page, par exemple .lang-fr ou .lang-en, posée manuellement sur le conteneur principal. Cette approche fonctionne, mais oblige à maintenir cette classe à jour à chaque changement de langue, en plus de l’attribut lang déjà présent nativement en HTML pour d’autres raisons, notamment l’accessibilité et la césure automatique.
Le sélecteur :lang() évite cette duplication : il s’appuie directement sur l’attribut lang déjà présent, qu’il soit posé sur la balise html globale ou localement sur un élément précis, comme une citation dans une langue différente du reste de la page. Aucune classe supplémentaire n’est nécessaire, ce qui réduit d’autant le risque d’oubli lors d’une mise à jour du contenu.
- Le sélecteur cible aussi bien l’attribut
langglobal que local, sans distinction. - Un code de langue avec région, comme
fr-CA, correspond aussi à:lang(fr)selon les règles de correspondance. - La propriété fonctionne dans tous les navigateurs modernes, sans préfixe propriétaire nécessaire.
Étendre le principe à d’autres langues du site
Sur un site traduit en plusieurs langues, il suffit d’ajouter une règle :lang() supplémentaire pour chaque langue disposant d’une convention de guillemets propre, par exemple l’allemand qui utilise des guillemets bas-hauts inversés par rapport au français. Aucune duplication de feuille de style par langue n’est nécessaire : une seule feuille couvre l’ensemble des langues du site.
Un repère utile pour construire cette règle correctement : vérifier la convention typographique réelle de chaque langue avant de l’implémenter, plutôt que de supposer qu’elle ressemble à celle du français ou de l’anglais.
En résumé
Le sélecteur :lang() reste sous-utilisé alors qu’il règle élégamment un détail typographique auquel peu de sites multilingues font vraiment attention. Combiné à la propriété quotes, il permet d’obtenir des citations correctement ponctuées dans chaque langue du site, sans dupliquer aucune feuille de style ni ajouter la moindre classe CSS artificielle au balisage existant.
