Quotation marks, speech marks, inverted commas; whatever you call these forms of punctuation, you might well be using them incorrectly. Let’s take a quick look at what’s correct, what isn’t, and what you can do within your CSS to make sure your quotes are properly formatted.
Quick Terminology
Let’s begin by illustrating what we’re talking about here. There are several forms of what we recognize as quotation marks, and each has its own specific purpose. When punctuating writing, you should use “smart quotes”, or “curly quotes”:
That applies to both double and single quotation marks.
And even apostrophes:
On the web, however, you’ll commonly see “dumb quotes”. These are straight versions, which are often used because of defaults set in CMSs and applications. Even your keyboard will usually make it difficult to use anything but dumb quotes.
Dumb quotes are not to be mistaken for “primes”; separate glyphs which are used for denoting measurement, such as feet and inches, co-ordinates and even more complicated units used in watch-making, for example.
Primes are usually different to dumb quotes in that they slant slightly, but that’s of course entirely down to the typeface.
So what are dumb quotes for then?!
Code. That’s pretty much the only place you should technically be using them.
Using Proper Quotes
As mentioned, your keyboard won’t help you much when you’re trying to use correct quotes. In fact, as I type this, I’m throwing dumb quotes in all over the place—I’ll have to do a search and replace afterwards!
If your document is using charset utf-8
<meta charset="utf-8" />
then you’ll be able to paste the correct quotation marks directly in. Alternatively, you’ll need to use the HTML named or numeric entities, or (for CSS) the escaped unicode values:
| glyph | named entity | numeric entity | escaped unicode |
“ | “ | “ | \201C |
” | ” | ” | \201D |
‘ | ‘ | ‘ | \2018 |
’ | ’ | ’ | \2019 |
Quotes in CSS
We can use the quotes property in CSS to make sure our <q> and <blockquote> elements are properly decorated with the correct quotation marks. The quotes property accepts four values in sequence, each one defining which character to use under each circumstance:
- Opening quote
- Closing quote
- Opening nested quote
- Closing nested quote
It might look a bit like this:
q,
blockquote {
quotes: "\201C" "\201D" "\2018" "\2019";
}Here we’re targeting both inline quotes and blockquotes. We’re using escaped unicode values (mentioned in the table earlier) to dictate which glyphs will be used to open and close our quote elements. We’ve stated that we want a double quotation mark to open, then double closing mark to close. Nested quotation elements will have single marks applied.
Take a look at this demo. In it, you’ll see a <div> with no styling applied, then one with correct styling.
Note: These quotation marks are slotted in using pseudo elements, so only supporting browsers will actually display quotation marks in this way.
I want more power!
Further properties allow us even more control. We can go on to specifically control those pseudo elements, stating whether we’d like the opening, or closing marks to be displayed at all.
q:before,
blockquote:before {
content: open-quote;
}
q:after,
blockquote:after {
content: no-close-quote;
}In this code we’ve altered the content of the pseudo-elements, saying that we actually don’t want a closing quote to be displayed.
Language Gap
Not everyone displays quotation marks in the same way, however. Take a look at what the French use, for example.
These are called guillemets (no, not guillemots) and they’re just one example of alternative quotation marks. Happily, we’re free to use the correct entities for whatever language we need. And we can target the lang attribute on the html element to be specific (thanks fliptheweb for that little tip).
<html lang="fr"><q>...
html[lang="fr"] q {
quotes: "\00ab" "\00bb";
}Excuses for mon français too, if I’ve done that wrong..
Conclusion
Get smart, there is no excuse for using dumb quotes!
Further Resources
- Inline quotations on html5doctor.com
- Straight and curly quotes on typographyforlawyers.com
- quotesandaccents.com
- Technical Web Typography: Guidelines and Techniques by Harry Roberts
- International variation in quotation marks on Wikipedia
- Smart Quotes for Smart People