Advertisement
Typography

Start Using Quotation Marks the “Correct” Way

by

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”:

q-curly-double

That applies to both double and single quotation marks.

q-curly-single

And even apostrophes:

q-apostrophe

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.

q-straight-double
q-straight-single

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.

q-prime

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

&ldquo; &#8220; \201C

&rdquo; &#8221; \201D

&lsquo; &#8216; \2018

&rsquo; &#8217; \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.

q-citer

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

Related Posts
  • Web Design
    Typography
    Getting the Hang of Hanging PunctuationGrand motel text effect
    Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web... until now. We’ll take a look at the value of hanging punctuation and how you can partially implement it using a little JavaScript and a CSS rule which has been around for years.Read More…
  • Web Design
    HTML/CSS
    Unicode: A Beginner's PrimerUnicode retina 400x400
    Believe it or not, there's an image format which is built right into your browser. It allows images to be downloaded even before you need them, renders them perfectly on Retina screens, and allows them to have CSS colours and effects applied to them. Ok, I'm not being entirely truthful there. It's not an image format as such – but the rest still applies. Using Unicode you can create icons that are resolution independent, have virtually no download time and can also be styled with CSS.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    HTML/CSS
    The Truth About Multiple H1 Tags in the HTML5 EraH1 retina
    Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"Read More…
  • Web Design
    Typography
    A Web Designer's Typographic BoilerplateB
    I like to use a typography.css in my projects; a separate file which houses all the basic structural typographic styles I'll need. A lot of what's found within it is obvious stuff (heading sizes, for example) but it also contains less obvious things which I don't want to forget. Let's work our way through the checklist..Read More…
  • Web Design
    Workshops
    Any Old Icon: All Wrapped up!Any old icon finished retina
    Any Old Icon is complete, 70 icons in all! Thank you to everyone who contributed, you can be proud to have participated in the most random icon set on Earth! For the rest of you, here's how to download and use the set..Read More…