AtoZ CSS Screencast: The CSS Quotes Property

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

Single and double quotes appear frequently when writing code.

However, when displaying any quoted text like the q element or when using apostrophes, we should use smart quotes.

These are often added by the browser, but we can control their appearance and the choice of character from CSS.

In this episode about we’ll learn all about:

• the difference between dumb quotes and smart quotes
• the different styles of quotes used internationally
• and the somewhat under-used CSS quotes property

Smart or Dumb?

When we create a string of text in a code editor, we use “dumb quotes”.

These are either ‘single quotes’ or “double quotes” and are straight. The same character is used at the beginning of the string as at the end.

Smart quotes are the correct typographic choice for any quotes or apostrophes that are displayed in the browser. They are often curly or sloped and the start and end quotes are often different.

If your document uses the utf-8 character set you can add smart quotes directly into the HTML with the following keyboard shortcuts on a Mac:

‘ ⌥+]
’ ⌥+⇧+]
“ ⌥+[
” ⌥+⇧+[

And on Windows:

‘ alt+0145
’ alt+0146
“ alt+0147
” alt+0148

Alternatively, the character entities can be used:

‘ ‘
’ ’
“ “
” ”

International Quotes

When researching this episode, it came as a bit of a surprise to me that there is so much variation in the style of quote marks from country to country.

English quotes look “like this” – with left and right double (or single) quotes.

French quotes use right and left «angle quotes».

And »Danish quotes« use the same characters but the other way round.

Bulgarian, Czech, Estonian, Georgian, Icelandic, Russian, Slovak, Slovene and in Ukrainian quotes use the bottom double quote as the open quote and the right double quote to close.

Other countries use a combination of these styles and a table of quote marks can be found on Wikipedia.

quotes in CSS

In CSS, there’s a quotes property that allows us to control how the browser generates quotes for elements like q which is for inline quotations.

q {
  quotes: "“" "”";
}

The two space separated strings specify the characters to use for the opening quote and the closing quote mark.

It’s possible to use two sets of strings to specify how nested quotes appear.

q {
  quotes: "“" "”" "‘" "’";
}

With this snippet, any nested quotes will use single curly quotes instead of double curly quotes.

“the quote contained a ‘nested’ quote”

The q element will have quote marks generated by the browser but the blockquote element will not. We can add in quotes using pseudo elements and the content property.

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

These can be styles with any other CSS properties to achieve the desired design result.

Finally, we can combine our knowledge of international quote characters with CSS by changing the quotes property based on the language of the document or part of the document.

We can do this using the :lang pseudo class.

:lang(en) q {quotes: "“" "”";}
:lang(fr) q {quotes: "«" "»";}
:lang(pl) q {quotes: "„" "”";}

Now by changing the language attribute of the html element, our quote marks are corrected for the corresponding language.

I like the idea of getting subtle details like this right in web design, I’m sure it’s something often overlooked but anything that can be done, big or small, to improve user experience sounds good to me.