Guillemets en CSS : la propriété quotes, q et les blockquotes stylisés
Guide des guillemets en CSS
Propriété CSS quotes : q, open-quote et guillemets selon la langue
Comment fonctionnent la propriété CSS quotes, l'élément q et open-quote / close-quote, avec un sélecteur de langue en direct, des niveaux de citation imbriqués et des modèles de blockquote stylisés.
La propriété CSS quotes choisit les guillemets que le navigateur dessine pour l'élément q et pour content: open-quote et close-quote. quotes: auto choisit des guillemets adaptés à l'attribut lang, une liste de paires de chaînes définit vos propres guillemets par niveau d'imbrication, et quotes: none les supprime. Un blockquote n'a aucun guillemet tant que vous ne les ajoutez pas.
Valeurs de quotes
Valeur
Effet
Guillemets adaptés à la langue de l'élément (définie avec lang)
open-quote et close-quote ne dessinent rien
Une seule paire, utilisée à tous les niveaux d'imbrication
Paire extérieure, puis paire intérieure pour les citations imbriquées
Les guillemets sont un détail typographique que la plupart des sites ratent : guillemets droits tapés dans les modèles, mauvais guillemets pour le français ou l'allemand, ou guillemet décoratif de blockquote lu à voix haute par les lecteurs d'écran. Ici, la propriété quotes est montrée en direct dans plusieurs langues, avec des modèles propres pour les citations mises en avant et les témoignages.
Choisissez une langue dans le sélecteur. L'exemple utilise quotes: auto, votre navigateur choisit donc les guillemets d'après lang.
Passez aux guillemets personnalisés et saisissez votre propre paire extérieure et intérieure pour voir l'imbrication fonctionner.
Copiez la règle quotes générée.
Utilisez les modèles de blockquote ci-dessous pour les témoignages et les citations mises en avant.
Définissez lang sur l'élément html, et sur tout passage en langue étrangère, pour que les guillemets automatiques correspondent au texte.
Utilisez l'élément q pour les courtes citations en ligne, et blockquote pour les passages plus longs qui forment leur propre bloc.
Quand l'imbrication dépasse votre liste de paires, la dernière paire est réutilisée.
Utilisez no-open-quote et no-close-quote pour garder les niveaux d'imbrication équilibrés sans dessiner de guillemet, par exemple sur plusieurs paragraphes.
Questions fréquentes
Comment supprimer les guillemets d'un élément q ?
Définissez q { quotes: none; }. Les guillemets viennent du contenu ::before et ::after par défaut du navigateur, open-quote et close-quote, et none fait que ceux-ci ne dessinent rien tout en conservant le sens de l'élément.
Pourquoi blockquote n'affiche-t-il pas de guillemets ?
Les navigateurs n'ajoutent automatiquement des guillemets que pour q. Un blockquote est indenté par défaut mais sans guillemets. Ajoutez blockquote::before { content: open-quote; } et un ::after correspondant, ou un guillemet décoratif, si votre design en demande un.
Comment utiliser des guillemets typographiques en CSS ?
Écrivez directement les caractères dans une feuille de style UTF-8, quotes: "“" "”" "‘" "’";, ou sous forme d'échappements comme "\201C" et "\201D". Les échappements sont pratiques quand un éditeur ou une étape de build abîme les caractères non ASCII.
Les guillemets générés en CSS sont-ils lus par les lecteurs d'écran ?
Le contenu généré peut être annoncé par les technologies d'assistance, traitez donc les guillemets comme du texte. Un grand guillemet décoratif est mieux dessiné avec une image de fond, un SVG avec aria-hidden, ou un content avec un texte alternatif vide : content: "“" / "";.
Comment fonctionnent les niveaux d'imbrication
Chaque open-quote augmente la profondeur d'imbrication de un et chaque close-quote la diminue. La profondeur zéro utilise la première paire de quotes, la profondeur un la deuxième, et ainsi de suite. C'est pourquoi, en anglais, un q dans un q passe automatiquement des guillemets doubles aux simples.
Comme la profondeur est suivie sur tout le document, un open-quote non équilibré laisse toutes les citations suivantes un niveau trop profond. Appariez-les soigneusement dans les pseudo-éléments, ou utilisez les variantes no- pour ajuster la profondeur sans rien afficher.
Guillemets droits ou guillemets typographiques
Les " et ' du clavier sont des signes de machine à écrire. Le texte imprimé utilise des guillemets courbes orientés vers la citation : “ et ” pour les doubles, ‘ et ’ pour les simples. Générer les guillemets en CSS les garde cohérents, même quand les rédacteurs tapent des guillemets droits.
D'autres langues utilisent des formes et des positions différentes : les guillemets « » en français, les guillemets bas et hauts „ “ en allemand, les crochets d'angle 「 」 en japonais. quotes: auto avec le bon lang gère cela pour q sans CSS spécifique à chaque langue.
Les caractères de citation et leurs échappements CSS
Guillemets courants avec leurs points de code Unicode
Signe
Nom
Échappement CSS
Guillemets anglais doubles ouvrant et fermant
Guillemets anglais simples ouvrant et fermant
Guillemets doubles en chevrons (guillemets français)
\AB \BB
Guillemets simples en chevrons
Guillemet double bas en forme de 9 (low-9)
Crochets d'angle
Guillemets personnalisés pour les citations imbriquées
Deux niveaux avec des échappements
Le q extérieur utilise des guillemets doubles, le q à l'intérieur des guillemets simples. Les échappements produisent des guillemets courbes.
Modèles de blockquote stylisés
Citation mise en avant avec un guillemet décoratif et une légende
Le grand guillemet a un texte alternatif vide, il n'est donc pas lu à voix haute. figure et figcaption relient la citation à sa source. Les navigateurs qui ne gèrent pas la syntaxe du texte alternatif ignorent cette règle et ne dessinent aucun guillemet.
Blockquote qui dessine de vrais guillemets ouvrant et fermant
open-quote et close-quote participent à l'imbrication, donc un q à l'intérieur de ce blockquote reçoit les guillemets intérieurs.