CSS Quotes Customize Quotation Marks Easily

The quotes Property in CSS

The quotes property in CSS lets you control how quotation marks appear in your web content. It can be inherited, so if you set it on a parent element, all child elements will use the same quotes unless you override them.

Computed Value

The computed value is exactly what you specify in the CSS.

Animation Type

The quotes property doesn’t support smooth transitions; changes happen immediately.

Formal Syntax

quotes =
  auto |
  none |
  [<string> <string>]+;

• auto: Uses language-specific quotes based on the lang attribute.
• none: No quotes are shown.
• [<string> <string>]+: Defines pairs of quotes for different levels of nesting.

Example

quotes: "«" "»" "‹" "›";

In this example, ”«” and ”»” are used for outer quotes, and ”‹” and ”›” for nested quotes.

Default Quotes and Overrides

HTML

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

CSS

li {
  quotes: auto;
}

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

Result

Here, the first list item uses default quotes based on the language, while the second list item uses quotes defined by the quotes property.

Auto Quotes

The auto value uses language-specific quotes based on the lang attribute.

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

Each quote uses the appropriate quotation marks for its language.

With Generated Content

You can also use the quotes property with generated content.

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

This example demonstrates how to add custom quotes to elements without using the <q> element.

Text as Quotes and Empty Quotes

This example shows how to use something other than quotation marks.

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;
}

Result

Here, the open-quote indicates the speaker, and the close-quote is empty. Nested quotes are handled automatically.

Specifications

The quotes property in CSS is defined by several specifications that outline its behavior and usage. Understanding these specifications can help you effectively implement and utilize the quotes property in your web design projects.

CSS Generated Content Module Level 3

The primary specification for the quotes property is found in the CSS Generated Content Module Level 3. This module defines the behavior of generated content in CSS, including how quotation marks are handled.

Specification:

• CSS Generated Content Module Level 3 - quotes

Summary of Specifications

1. CSS Generated Content Module Level 3:
   • Description: This specification defines the quotes property and outlines how quotation marks are rendered in web content.
   • Key Features:
     • Support for keyword values such as none and auto.
     • Ability to specify custom quotation marks using string values.
     • Handling of nested quotes and language-specific quotation marks.
   • Link: CSS Generated Content Module Level 3

Importance of Specifications

Understanding the specifications related to the quotes property is crucial for several reasons:

• Consistency: Ensures that your implementation of the quotes property is consistent with industry standards and best practices.
• Browser Compatibility: Helps you understand how different browsers interpret and render the quotes property, ensuring compatibility across various platforms.
• Future-Proofing: Keeps you informed about upcoming changes and enhancements to the quotes property, allowing you to future-proof your web design projects.

Practical Example

Here’s an example of how the quotes property is defined and used according to the specifications:

.custom-quotes {
  quotes: "«" "»" "‹" "›";
}

<p class="custom-quotes">
  <q>
    This is the outer quote.
    <q>This is the first level of nested quote.</q>
    <q>This is another first level of nested quote.</q>
    <q>This is the second level of nested quote.</q>
  </q>
</p>

Browser Compatibility

Ensuring that your web content is compatible with various browsers is essential for providing a consistent user experience. The quotes property in CSS is widely supported across major browsers.

Browser Support

• Google Chrome: Supported since version 11.0.
• Mozilla Firefox: Supported since version 1.5.
• Internet Explorer: Supported since version 8.0.
• Microsoft Edge: Supported since version 12.0.
• Opera: Supported since version 4.0.
• Safari: Supported since version 5.1.

Fallback Styles

If you need to support older browsers that do not fully support the quotes property, you can include fallback styles using JavaScript to detect feature support and apply alternative styles.

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    if (!CSS.supports('quotes', '"“" "”"')) {
        // Fallback styles for browsers that do not support the quotes property
        document.querySelectorAll('q').forEach(function(quote) {
            quote.innerHTML = `“${quote.innerHTML}”`;
        });
    }
});

See Also

For further exploration and learning, you might find the following resources useful:

• CSS Text Module: Learn more about CSS properties related to text styling and manipulation.
  • [MDN Web Docs - CSS Text]WebsiteUrl
• HTML <q> Element: Understand the HTML element used for short inline quotations.
  • [MDN Web Docs - HTML <q> Element]WebsiteUrl
• HTML <blockquote> Element: Explore the HTML element used for block-level quotations.
  • [MDN Web Docs - HTML <blockquote> Element]WebsiteUrl
• CSS content Property: Learn about the CSS property used to insert generated content.
  • [MDN Web Docs - CSS content Property]WebsiteUrl
• CSS Generated Content Module: Dive deeper into the specifications and features related to generated content in CSS.
  • [CSS Generated Content Module Level 3]WebsiteUrl
• CSS Inheritance: Understand how CSS properties are inherited from parent elements to child elements.
  • [MDN Web Docs - CSS Inheritance]WebsiteUrl

These resources will help you gain a comprehensive understanding of how to effectively use the quotes property and related CSS features to enhance your web design projects.