Fandom

HTML & CSS Wiki

Quotes

649pages on
this wiki
Add New Page
Comments0 Share

The CSS quotes property determines the type of quotation marks that will be used in a document. One or more quotation mark pairs are given, with the basic quotation characters being the left-most pair. Each subsequent pair represents the quotation characters used at progressively deeper element nesting contexts.

Values of the content property are used to specify where the open/close quotation marks should or should not occur - the open-quote, close-quote, no-open-quote, and no-close-quote values. "Open-quote" refers to the left (first) of a given pair of specified quotes, while "close-quote" refers to the second (right) quote character in the pair. Quotes can be skipped at a particular location by using the "no-close-quote" and "no-open-quote" value. In the event that the quote character nesting depth is not covered in the quotes property specification, the last valid quotation pair set should be used.


Quotation Characters

Example Character Reference Unicode Description
Quote34 " 0022 ASCII double quote.
Quote39 ' 0027 ASCII single quote.
Quote8249 ‹ 2039 Single, left angle quote.
Quote8250 › 203A Single, right angle quote.
Quote171 « 00AB Double, left angle quote.
Quote187 » 00BB Double, right angle quote.
Quote8216 ‘ 2018 Left quote (single high-6).
Quote8217 ’ 2019 Right quote (single high-9).
Quote8220 “ 201C Left quote (double high-6).
Quote8221 ” 201D Right quote (double high-9).
Quote8222 „ 201E Double quote (double low-9).

Values

Value Description
inherit Explicitly sets the value of this property to that of the parent.
none The open-quote and close-quote values of the content property produce no quotations marks.
<string> <string> Values for the open-quote and close-quote values of the content property are taken from this list of quote mark pairs. The first, or possibly only, pair on the left represents the outermost level of quotation embedding, the pair to the right (if any) is the first level of quote embedding, etc.


CSS example:

/* Specify pairs of quotes for two levels in two languages */
q:lang(en) { quotes: '"' '"' "'" "'" }
q:lang(no) { quotes: "«" "»" '"' '"' }

/* Insert quotes before and after Q element content */
q:before { content: open-quote }
q:after  { content: close-quote }
blockquote[lang-=en] { quotes: "\201C" "\201D" }
blockquote[lang-=fr] { quotes: "\00AB" "\00BB" }
blockquote:before { content: open-quote }
blockquote:after { content: close-quote }

See Also

External Links

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.