quotes

Overview

The quotes property determines the type of quotation marks that are applied when using the open-quote or close-quote values of the content property. It gives control over which type of quotation marks to use and how they should be displayed in different nesting levels.

Examples and Usage

Typography can differ across languages, particularly with quotation marks. For instance, American English commonly uses the left double quotation mark (“) to commence a quote and the right double quotation mark (”) to end it.

Should a quote be nested within the first, it's then enclosed by the left single quotation mark (‘) and the right single quotation mark (’). In our examples, we'll demonstrate this functionality, and show how to apply different quotation marks to different levels of nested quotes.

Consider the following HTML structure:

<q>The Internet is becoming the town square for the global village of tomorrow.</q>

The corresponding CSS would be:

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

Here, the ::before and ::after pseudo-elements are used to place the opening and closing quotes respectively around the q element. The content property determines the type of quotation mark that should be inserted, where open-quote specifies the opening quote and close-quote defines the closing quote.

Let's examine another example with nested quotes:

<q>Let's explore the meaning of the quote <q>Do unto others as you would have them do unto you,</q>said Mike.
</q>

Here's the CSS setup:

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

In this case, we've defined two pairs of quotes for the different quote levels. The double quotation marks are used for the outer quote, while the single quotation marks are applied to the nested quote.

In addition, there's a wide range of characters that can be used as quotations, beyond the traditional straight and curly quotes. Many languages use different characters, such as the guillemet (or double chevron) for their quotation marks, represented by Unicode U+00AB («) and U+00BB (») characters.

For instance, in French, these are typically used with the no-break space U+00A0 character.

Values

Associated Properties

• contain
• content

Tips and Tricks

• Remember, different languages and typographic standards use different quotation marks. Always make sure the quotes you choose are appropriate for your audience's language and region.

• The quotes property works in tandem with the content property. The content property's open-quote and close-quote values use the quotes defined by the quotes property.

• If you're dealing with nested quotations, remember to provide pairs of quotation marks for each level in your quotes property.

• Browsers may have different default quotation marks for the <q> element. Using the quotes property can ensure consistency across different browsers.

Browser Compatibility

For a more detailed breakdown, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: quotes

W3C's Editor's Draft of CSS Generated Content Module Level 3: quotes

On Quotes and Accents

On Straight and Curly Quotes