How to Inspect and Control CSS quotes and Quotation Marks in Safari Web Inspector

Internationalisation and editorial typography on the web require adhering to culturally distinct punctuation norms. In web typography, quotation mark conventions vary substantially across languages: English typically uses curly quotes (“ ” and ‘ ’), French and Spanish use angled guillemets (« »), and German uses low-high quotation glyphs („ “). Rather than hard-coding quotation symbols directly into HTML content, modern web standards rely on the semantic <q> element and the CSS quotes property. Safari Web Inspector provides specialised developer tools to inspect active quotation token hierarchies, test multi-level nesting, and trace locale-specific styling rules.

Understanding CSS quotes Syntax and Inheritance

The CSS quotes property specifies quotation mark pairs used when generating quotes via the open-quote, close-quote, no-open-quote, and no-close-quote values on content pseudo-elements:

• Syntax Pairs: The quotes property accepts strings in pairs representing opening and closing quotes. Supplying multiple string pairs defines styling for nested quotation levels.
• Primary and Secondary Pairs: The first pair defines quotes for the outermost quote level; the second pair defines quotes for nested quotes within quotes; subsequent pairs define deeper nesting levels.
• Keyword none: Disables quotation mark generation completely, preventing pseudo-elements from rendering glyphs.
• Keyword auto: Instructs the browser engine to automatically select culturally appropriate quotation marks based on the document or element’s active lang attribute.

A typical CSS quotation rule set establishing British and French typographic norms appears as follows:

/* British English: single quotes outside, double quotes inside */
:lang(en-GB) q {
  quotes: "‘" "’" "“" "”";
}

/* French: angled guillemets with non-breaking spaces */
:lang(fr) q {
  quotes: "« " " »" "“" "”";
}

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

Enabling Developer Tools in Safari

To inspect typography and CSS rules in Safari on macOS:

1. Launch Safari and navigate to Safari > Settings (or press Cmd + ,).
2. Select the Advanced tab and ensure Show features for web developers is checked.
3. Open your target webpage in Safari.
4. Right-click on the quotation element you wish to inspect and select Inspect Element, or press Option + Cmd + I.

Inspecting Quotation Marks in Safari Web Inspector

When the Safari Web Inspector opens, navigate to the Elements tab. Select the <q> element or blockquote in the DOM hierarchy.

Inspecting ::before and ::after Pseudo-Elements

The HTML <q> element does not insert raw text characters into the DOM; instead, the browser user agent stylesheet inserts quotes using pseudo-elements:

1. In the DOM tree, expand the <q> tag node.
2. Notice the generated ::before and ::after pseudo-element nodes.
3. Click on ::before. In the Styles panel, inspect the active declaration:

   content: open-quote;

4. Click on ::after and note:

   content: close-quote;

5. WebKit resolves these abstract tokens against the nearest inherited quotes property in the CSS cascade.

Inspecting Computed Quotes in the Computed Panel

To verify the exact quotation glyphs applied by Safari’s rendering engine:

1. Select the parent <q> element in the DOM tree.
2. Switch from the Styles panel to the Computed panel in the right sidebar.
3. Search for quotes to inspect the resolved string values.
4. Check whether the rule is inherited from html[lang], body, or applied directly to the element class.

Testing Multi-Level Nested Quotes Interactively

To test how your design handles complex editorial text containing citations within dialogue:

1. Switch to the Console panel in Web Inspector.
2. Inject nested quote elements dynamically into your target container:

   const container = document.querySelector('.article-body');
   container.innerHTML = `
     <p>The speaker remarked, <q>We must remember what was said: <q>Knowledge is power</q> before proceeding.</q></p>
   `;

3. Observe the browser rendering. In British English styling, the outer quote renders as ‘ and ’, while the inner quote automatically switches to “ and ”.
4. Double-click the quotes declaration in the Styles pane to change glyphs on the fly and verify layout reflow.

Debugging Common Quotation Pitfalls in WebKit

When debugging typography across Safari, keep the following considerations in mind:

• Missing lang Attributes: If quotes: auto is declared, Safari relies on the lang attribute (e.g., <html lang="fr"> or <span lang="de">). If the attribute is omitted, Safari defaults to English quotation norms. Use Safari Web Inspector to inspect the root element for valid BCP 47 language tags.
• Double Quotation Artifacts: If authors manually type quotation marks inside a <q> tag in HTML (e.g., <q>"Quote"</q>), the browser renders double quotes (e.g., ““Quote””). To eliminate browser-generated quotes while preserving manual punctuation, set q { quotes: none; } in the Styles panel.
• Spacing with Guillemets: In French typography, thin spaces or non-breaking spaces are required between guillemets and enclosed text (« Texte »). Inspect whether your quotes property includes spaces inside the string definitions (e.g., quotes: "«\A0" "\A0»";).

By leveraging Safari Web Inspector to inspect pseudo-element tokens and test nested quote cascades, web designers can enforce rigorous international typographic standards across all Apple devices.