HTML and CSS Reference
In-Depth Information
Standardizing Quotes on <q> Elements
Although browsers use different types of quotes on
<q>
elements, you can make all browsers conform to your
preferred style with the
quotes
property. Because
<q>
elements automatically insert quotation marks, there's no
need to use the
::before
and
::after
pseudo elements. Just specify the sequence of opening and closing quotes
in a style rule for the
<q>
element. For example, the following style rule in quotes_single.html tells
<q>
elements
to use double curly quotes:
q {
quotes: '\201C' '\201D';
}
If you test quotes_single.html in a browser, apart from a few ancient ones, they all use double curly quotes
instead of the browser default.
Generating Quotes for Other Elements
To generate quotes for elements other than
<q>
, you need to use the
::before
and
::after
pseudo-elements in
addition to defining the opening and closing quotes with the
quotes
property.
As noted earlier, the
content
property accepts as values
open-quote
,
no-open-quote
,
close-quote
, and
no-close-quote
. The first two are normally used with
::before
, and the others with
::after
. The values that
begin with
no-
suppress the insertion of a quotation mark, but keep track of the correct place in the sequence.
It's common to omit a paragraph's closing quote if the quotation continues in the next paragraph. Explicitly
setting
no-close-quote
ensures that the next paragraph uses the correct opening quotes, as the next example
demonstrates.
The HTML in quotes_nested.html is identical to the preceding example. It contains a
<blockquote>
element
within which
<q>
elements are nested. The styles begin by specifying a sequence of quotes for paragraphs nested
inside the
<blockquote>
element:
blockquote p {
quotes: '\201C' '\201D' '\2018' '\2019';
}
This specifies double curly quotes as the first pair, and single curly quotes as the second pair. When multiple
pairs are specified with the
quotes
property, each pair is used in sequence. What's particularly impressive is that
<q>
elements are automatically included in the sequence.
The quotes are added automatically to the
<q>
elements, but you need to use the
::before
and
::after
pseudo-elements for the paragraphs. The following style rules specify opening quotes for each paragraph, but
suppress closing quotes on all but the last paragraph.
blockquote p::before {
content: open-quote;
}
blockquote p::after {
content: no-close-quote;
}
blockquote p:last-child::after {
content: close-quote;
}
