Quotes

La propriété CSS quotes vous permet de spécifier le type de guillemets utilisés lorsque les guillemets sont utilisés via les règles content: open-quote; ou content: close-quote. On les utilise ainsi :

//CSS
q {
  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}

Dans cet exemple, on a quatre valeurs. Un ensemble de smart quotes doubles et une paire de smart quotes simples. C'est un peu confus car chaque guillemet est lui-même entouré de guillemets, mais ces derniers ne sont que des guillemets de code, ils peuvent être simples ou doubles ça ne change rien (comme partout ailleurs en CSS). Les guillemets qui sont à l'intérieur sont ceux que nous utiliserons sur notre page.

La propriété content liée à quotes peut prendre quatre valeurs : open-quote, close-quote, no-open-quote et no-close-quote.

La première paire de guillemets forme les guillemets ouvrant (open-quote) et fermant (close-quote). La seconde paire représente les guillemets ouvrant et fermant situés à l'intérieur d'autres guillemets utilisant également la propriété quote, autrement dit ils sont imbriqués à un niveau plus profond. Par exemple un élément <q> à l'intérieur d'un autre élément <q>.


image

Les valeurs no-open-quote et no-close-quote empêchent l'affichage des guillemets, mais la profondeur des guillemets n'est pas modifiée.


Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

Quels guillemets choisir pour le web ? par romy.tetue.net
La grammaire typographique, les guillemets, par Jean Méron (pdf)
Touche option, wikipédia : résumé des touches claviers pour tous les caractères spéciaux sur un clavier Mac AZERTY

articles en anglais :

Quoting and citing with <blockquote>, <q>, <cite> and the cite attribute, par html5 Doctor
Quotes and accents


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.