Quotes

quotes Support Key: [*CSS2*] [N6\|O4]	Other Generated Content Properties
	content counter-reset counter-increment include-source
= Index DOT Css by Brian Wilson =

What is it?: This 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

0022

ASCII double quote

0027

ASCII single quote

‹

2039

Single, left angle quote

›

203A

Single, right angle quote

00AB

Double, left angle quote

00BB

Double, right angle quote

‘

2018

Left quote (Single high-6)

’

2019

Right quote (Single high-9)

“

201C

Left quote (Double high-6)

”

201D

Right quote (Double high-9)

„

201E

Double quote (Double low-9)

Allowed Values
inherit
[CSS2] [N6]: Type: Explicit; Description:
Explicitly sets the value of this property to that of the parent.
none
[CSS2] [O4]: Type: Explicit; Description:
The 'open-quote' and 'close-quote' values of the 'content' property produce no quotations marks.
([string] [string])
[CSS2] [N6|O4]: Type: Explicit; Syntax: ([string] [string])+; Description:
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.

Example: Ext/Doc:
blockquote[lang-=fr] { quotes: "\201C" "\201D" }
blockquote[lang-=en] { quotes: "\00AB" "\00BB" }
blockquote:before { content: open-quote }
blockquote:after { content: close-quote }
[Applies correct quotes based on language used]

Notes

CSS2 states that contents of a quotation that are in a different language than the surrounding content should use quotes appropriate to the surrounding content, NOT those from the quoted content.
In practice, only the HTML element Q will understand this property without also specifying any of the quote values in the 'content' property for :before and :after pseudo-elements.

Browser Peculiarities

Netscape

6.x+:
- If more than one pair of [String String] is mentioned, it is supposed to be used for nested quotes, but that doesn't seem to work as expected; only the first quote-pair is repeated at each nesting level.
Opera

4.0x+:
- If you have nested quotes, and you specify strings on each element (rather than listing multiple string-pairs on the parent element), the nested element quoting will ignore the first half of the string quote-pair, and use the second half of the string quote-pair for the first quote. The second quote uses the normal double-quote character Ex: <q style="'#' '#'">this is a <q style="'$' '@'">weird</q> quote</q>...should be rendered as
#this is a $weird$ quote#
but in O4+ it is rendered as
#this is a @weird" quote#