quotes

What the values mean

• auto: the initial value. The browser picks marks that suit the language: “” and ‘’ for English, 「」 and 『』 for Japanese.
• none: shows no quotation marks.
• "«" "»" "‹" "›": pairs of opening and closing strings. The first pair is used for the outermost quotation, the second for a quotation inside it. When quotations nest deeper than the number of pairs, the last pair is repeated.

The preview shows an English sentence and a Japanese sentence, each with a q nested two deep. With auto each sentence gets its own marks; with strings, both use the same marks.

When to use it

Use it to make the quotation marks of q follow your site's style guide, such as using guillemets throughout.

Watch out

• The marks only appear where content is open-quote or close-quote. Browsers already set that before and after q, so quotes alone changes them there. A blockquote gets no marks.
• auto uses the language of the parent element. A <q lang="ja"> inside English text still gets the English “” for itself; a q nested inside it gets 『』.
• The marks are drawn in ::before and ::after, so they are not included when you select and copy the text. With none a quotation no longer looks like one, so set it apart some other way.
• auto works in Chrome and Edge 87, Firefox 70, and Safari 14.1 or later. Older browsers use marks of their own choosing.