docs.rodeo

MDN Web Docs mirror

quotes

{{CSSRef}} 

The CSS quotes property sets how the browser should render quotation marks that are automatically added to the HTML {{HTMLElement("q")}}  element or added using the open-quotes or close-quotes (or omitted using the no-open-quote and no-close-quote) values of the of the CSS content property.

{{EmbedInteractiveExample("pages/css/quotes.html")}} 

Browsers insert quotation marks at the opening and closing of <q> elements and for the open-quote and close-quote values of the content property. Each opening or closing quote is replaced by one of the strings from the value of quotes, based on the depth of nesting, or, if quotes is explicitly set to or otherwise resolves to auto, the quotation marks used are language dependent.

Syntax

/* Keyword value */
quotes: none;
quotes: auto;

/* <string> values */
quotes: "«" "»"; /* Set open-quote and close-quote to use French quotation marks */
quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */

/* Global values */
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: revert-layer;
quotes: unset;

Values

[!NOTE] The CSS content property value open-quote increments and no-close-quote decrements the quoting level, but does not insert a quotation marks.

Formal definition

{{cssinfo}} 

Formal syntax

{{csssyntax}} 

Examples

Default quotes and overrides

This examples compares the default quotes provided by the semantic HTML <q> element to those we define using the CSS quotes property.

The default value of quotes is auto. In this example, the first list item has quotes: auto set, so gets the default quotes for the language specified; the same as if no quotes property was set. The second list item defines which quotation marks to use for quotes and nested quotes; these quotation marks will be used for descendants of an element with specialQuotes class regardless of the language (like any lang attribute values set).

HTML

<ul>
  <li>
    Default quotes:
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
  <li class="specialQuotes">
    Defined by <code>quotes</code> property :
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
  <ul></ul>
</ul>

CSS

li {
  quotes: auto;
}

.specialQuotes {
  quotes: "“" "”" "‘" "’";
}

Result

{{EmbedLiveSample('Overriding default quotes', "100%", 200)}} 

By default, browser provide language specific quotation marks when the <q> element is used. If the quotes property is defined, the values provided override the browser defaults. Note the quotes property is inherited. The quotes property is set on the <li> with the specialQuotes class, but the quotes are applied the <q> elements.

Note that each open-quote and close-quote is replaced by one of the strings from the value of quotes, based on the depth of nesting.

Auto quotes

The default value of quotes is auto. This example works without it being explicitly being set.

HTML

<ul>
  <li lang="fr">
    <q>Ceci est une citation française.</q>
  </li>
  <li lang="ru">
    <q>Это русская цитата</q>
  </li>
  <li lang="de">
    <q>Dies ist ein deutsches Zitat</q>
  </li>
  <li lang="en">
    <q>This is an English quote.</q>
  </li>
</ul>

CSS

q {
  quotes: auto;
}
li:not(:last-of-type) {
  border-bottom: 1px solid;
}

li {
  padding: 0.5em 0;
}

Result

{{EmbedLiveSample('Auto_quotes', "100%", 200)}} 

Note that the lang attribute was placed on an ancestor of the <q>, not the <q> itself. If a quotation is in a different language than the surrounding text, it is customary to quote the text with the quote marks of the language of the surrounding text, not the language of the quotation itself.

With generated content

In this example, instead of using the <q> element, we are adding quotation marks to the {{cssxref("::before")}}  and {{cssxref("::after")}}  pseudo-elements before and after the content of each element with a specific class name.

HTML

<p>
  <span class="quote">I should be using quotes</span>, I thought,
  <span class="quote"
    >But why use semantic HTML elements when I can add classes to
    <span class="quote">ALL THE THINGS!</span>?
  </span>
</p>

CSS

.quote {
  quotes: '"' '"' "'" "'";
}
.quote::before {
  content: open-quote;
}
.quote::after {
  content: close-quote;
}

Result

{{EmbedLiveSample('With generated content', "100%", 80)}} 

Text as quotes and empty quotes

This example demonstrates using something other than quotation marks as the <string> values. The open-quote indicates the speaker and, as there is not opening quotation mark, the close-quote is the empty. (Mixing a <string> with an enumerated keyword to create a pair is not supported). We set auto for the nested quotes. These nested quotes will be book-ended by whatever the language dictates is normal for nested quotes.

HTML

<ul>
  <li><q data-speaker="karen">Hello</q></li>
  <li><q data-speaker="chad">Hi</q></li>
  <li><q data-speaker="karen">this conversation is not interesting</q></li>
  <li>
    <q data-speaker="pat"
      >OMG! <q>Hi</q>? Seriously? at least <q>hello</q> is five letters long.</q
    >
  </li>
</ul>

CSS

[data-speaker="karen" i] {
  quotes: "She said: " "";
}
[data-speaker="chad" i] {
  quotes: "He said: " "";
}
[data-speaker="pat" i] {
  quotes: "They said: " "";
}
[data-speaker] q {
  quotes: auto;
}

li {
  padding: 0.5em 0;
}

Result

{{EmbedLiveSample('Text as quotes and empty quotes', "100%", 200)}} 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN