Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
q
Represents an inline quotation with locale-aware quotation marks via VB's i18n system.
Description
The <q> element marks an inline quotation. The browser inserts quotation marks automatically via CSS quotes. VB's i18n system provides locale-specific quotation marks for 11+ languages — English, German, French, Italian, Spanish, Portuguese, Polish, Japanese, Chinese, Korean, Russian, and Arabic.
For longer quotations that require paragraph breaks, use <blockquote>.
When to Use
- Short quotations: Quotes within running text
- Attributed speech: "She said..." patterns
- Multilingual content: Quotes that need locale-correct marks
When NOT to Use
- For long, block-level quotations — use
<blockquote> - For titles of works — use
<cite> - For scare quotes or air quotes — type the quote characters directly
Examples
Basic quotation
<p>She said <q>Hello, world!</q> and smiled.</p>Nested quotation
<p> He asked, <q>Did she really say <q>I'll be there</q>?</q></p>With cite attribute
<p> According to the documentation, <q cite="https://example.com/docs">this feature is experimental</q>.</p>Locale-Aware Quotes
VB's i18n stylesheet sets the CSS quotes property per language using :lang() selectors. Set lang on the element or any ancestor and the correct quotation marks appear automatically.
Locale examples
<p lang="en">English: <q>Hello</q></p><p lang="de">German: <q>Hallo</q></p><p lang="fr">French: <q>Bonjour</q></p><p lang="ja">Japanese: <q>こんにちは</q></p>| Language | Outer | Inner |
|---|---|---|
| English (US) | “...” | ‘...’ |
| English (GB, AU, NZ) | ‘...’ | “...” |
| German | „...“ | ‚...‘ |
| French | « ... » | ‹ ... › |
| Japanese / Chinese | 「...」 | 『...』 |
| Russian | «...» | „...“ |
| Arabic | «...» | ‘...’ |
CSS Reference
Locale-aware quotes CSS
q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* English "..." '...' */ :lang(de) q { quotes: "\201E" "\201C" "\201A" "\2018"; } /* German „..." */:lang(fr) q { quotes: "\00AB\202F" "\202F\00BB" "\2039\202F" "\202F\203A"; } /* French «...» */:lang(ja) q { quotes: "\300C" "\300D" "\300E" "\300F"; } /* Japanese 「...」 */:lang(ru) q { quotes: "\00AB" "\00BB" "\201E" "\201C"; } /* Russian «...» */ q::before { content: open-quote; }q::after { content: close-quote; }French quotes include narrow non-breaking spaces (\202F) inside the guillemets, matching French typographic convention.
Attributes
| Attribute | Description |
|---|---|
cite |
URL pointing to the source of the quotation (not displayed, but available to scripts) |
lang |
Language of the quotation — drives locale-appropriate quote marks |
Accessibility
- Screen readers typically announce the quotation marks the browser inserts
- The semantic markup distinguishes quoted text from regular content
- Nested quotes alternate between outer and inner quote styles
Related
<blockquote>— For longer, block-level quotations<cite>— For citing the title of a work<bdi>— For isolating quoted text in mixed-direction contexts- Internationalization — Full i18n reference with quote tables for all supported languages