Generated quotes
Quotes can also be dynamically generated in CSS2. Unless your web page is a thesis paper, you may not use this feature all that often, though it's definitely still worth learning about.
Generated quotes in CSS2 is accomplished by first defining the kind of quotes you want via the "quotes" property:
P.myquotes{quotes: '"' '"';}
Quotes are always specified in pairs, one for the opening and one of the closing quotation mark. In this case, I want the standard double quote (") in both cases, which is done by wrapping each double quote in single quote. Having done this, you now formally apply this quote behavior to an element:
P.myquotes:before{
content: open-quote;
}
P.myquotes:after{
content: close-quote;
}
<p class="myquotes">Life is like a box of chocolates.</p>
The result simply is (simulated): "Life is like a box of chocolates."
The supported values for your quote content are:
- open-quote: Inserts an opening quotation mark per the "quotes" property
- close-quote: Inserts a closing quotation mark per the "quotes" property
- no-open-quote: No opening quotation is inserted.
- no-close-quote: No closing quotation is inserted.
The "quotes" property is nifty in that it allows you to not only customize the type of quote to be shown, but also, the behavior of nested quotes. One thing at a time.
Specifying the type of quote
You can specify any string value as the opening and closing quotation mark inside the "quotes" property, though obviously you don't want to go nuts here. You can also input ISO characters to derive some classic quotes look, like curly quotes. Here are some ISO characters you can input:
| Type of quotation | ISO character |
|---|---|
| " (standard quotation) | 0022 |
| ' (single quotation) | 0027 |
| < (single left angle quotation) | 2039 |
| > (single rght angle quotation) | 203A |
| « (double left angle quotation) | 00AB |
| » (double right angle quotation) | 00BB |
| ` (single left quotation) | 2018 |
| ' (single right quotation) | 2019 |
| `` (double left quotation/ curly) | 201C |
| '' (double right quotation/ curly) | 201D |
| ,, (double low-9 quotation) | 201E |
So for example, the below adds some bold curly quotes around the BLOCKQUOTE element:
blockquote{quotes: "\201C" "\201D";}
blockquote:before{content: open-quote; font-weight: bold;}
blockquote:after{content: close-quote; font-weight: bold;}
<blockquote>
What happens is not as important as how you react to what happens.
</blockquote>
Example (screenshot):
Specifying nested quotes
You can also dictate how quotes appear when nesting occurs, such as when there is a quote within a quote. This is done by entering multiple pairs of values within the "quote" property:
.quoteit{quotes: '"' '"' "'" "'";}
The above specifies that the second level of quotes should be single quotes. You can add a third level by adding an additional pair of values.
