CSS Quotes Property for Multi-Language Quotations

The CSS quotes property defines the specific typographic quotation marks used by the browser when rendering quotation-based elements like <q> or pseudo-elements using open-quote and close-quote. In internationalization and multi-language styling, this property ensures that web content automatically adheres to the distinct typographic and cultural conventions of different languages, replacing generic quotation marks with localized alternatives based on the language attribute of the document or element.

How the quotes Property Works

Quotation conventions vary significantly across regions. While English uses curved marks like “ and ”, French uses guillemets (« and »), German positions the opening mark at the baseline („ and “), and East Asian languages such as Japanese use bracket-style quotes (「 and 」).

The quotes property accepts pairs of strings representing opening and closing quotes. You can define multiple pairs to handle nested quotations:

selector {
  quotes: "“" "”" "‘" "’"; /* Primary and secondary (nested) pairs */
}

When HTML <q> tags are used, browsers insert quotation marks using the ::before and ::after pseudo-elements set to content: open-quote and content: close-quote. The quotes property dictates what characters are generated by those values.

Implementing Multi-Language Quotations

To adapt quotation marks to the language of the content, pair the quotes property with the :lang() pseudo-class. This allows you to style quotes dynamically based on the HTML lang attribute.

/* English */
:lang(en) {
  quotes: "“" "”" "‘" "’";
}

/* French */
:lang(fr) {
  quotes: "«\A0" "\A0»" "‹\A0" "\A0›"; /* \A0 inserts a non-breaking space */
}

/* German */
:lang(de) {
  quotes: "„" "“" "‚" "‘";
}

/* Japanese */
:lang(ja) {
  quotes: "「" "」" "『" "』";
}

In the corresponding HTML, you simply assign the appropriate language attribute:

<p lang="en">He said, <q>Hello <q>world</q></q>.</p>
<p lang="fr">Il a dit, <q>Bonjour <q>monde</q></q>.</p>
<p lang="de">Er sagte, <q>Hallo <q>Welt</q></q>.</p>

The auto Value

Modern CSS supports the auto keyword (quotes: auto). When set to auto, the browser determines the correct typographic quotation marks automatically based on the language set via the lang attribute on the element or its parent. While convenient, explicitly defining quote pairs via :lang() remains useful when custom spacing (such as thin spaces for French guillemets) or specific stylistic preferences are required.

Key Advantages for Localization

• Content Separation: Translators and content authors can use semantic <q> elements without manually typing language-specific symbols or HTML entities into text fields.
• Nested Consistency: Browsers automatically alternate between primary and secondary quote levels as defined by the property, preventing nesting errors common in translated text.
• Typography Control: Designers can maintain typographic accuracy across multilingual websites without introducing separate template structures for each locale.