Home → Codelab

Why Did I Spend 90 Minutes Telling you About French Quotation Marks in CSS?

Published:

tl;dr: Use the quotes property in CSS to specify how to render quotation marks in a specific language. Also, I spent 90 minutes on shit nobody cares about.

I just wrote about the trains in Morrocco and I had to quote a taxi driver. I could simply have quoted regularly, “like this”, but the guy was speaking french and I know they use square angle(called guillements) brackets to quote, « comme ci ». Given that I’m an HTML nerd, it seemed appropriate to use the quote element <q> and given that it’s a french quote, I’d add the lang attribute set to fr.

Having done that, I was worried that it wouldn’t render the quote properly so I looked up how to do it and I discovered the quotes CSS property which lets you specify how quotes are rendered. I then added this to my site’s stylesheet:

q[lang="fr"] {
    quotes: "«\2009" "\2009»" "‹\2009" "\2009›";
}

[!NOTE]+ Note that the \2009 is a thin space character  . Pendantic details follow. Wikipedia said they should be spaced with thin spaces. Writing this now I’m also reading that it could also be a non-breaking space (specified as \00a0) instead, strongest citation being Quebec’s French Language Guide [FRENCH, obviously]. As typeface artist Jack Yan discovered, it’s not so clear.

Having done that, I was happy to see the French quotes being rendered properly. To celebrate, I decided to write this article to gloat but in doing so I discovered a few things. French punctuation style recommendations is the first thing.

Secondly, I didn’t realize it then but it turns out that the quotes property specifies the values for open-quote and close-quote which are used in the content property to render quotes in the q element’s ::before/::after psudoelements, which is what the browser’s default rules for q specify.

Why did I spend 90 minutes writing this? Also, here’s some random note:

  • When I started writing this I thought the q element will localize for you based on the language context—it doesn’t.
  • I’m not sure why I like using the element so much even though copying quotes doesn’t include the quotation marks.
  • I actually made a mistake when I wrote the CSS code, which is so embarassing that it’s not worth pointing out. Guess the error and let me know.

Further Reading