Recipe 10.8 Emphasizing a Quotation

Problem

You want to add emphasis to a quotation by large and bold quotation marks as shown in Figure 10-20.

Figure 10-20. The stylized quotation

Solution

First code the markup for the quotation (see Figure 10-21):

 <blockquote>  <p>There is a tendency for things to right themselves.</p>  <cite>Ralph Waldo Emerson</cite> </blockquote> 

Figure 10-21. Quotation as it would normally appear

Then apply CSS rules to stylize the quote:

 blockquote {  padding: 0;  margin: 0;  text-align: center; } p {  font-size: 1em;  padding-bottom: 3em;  text-transform: lowercase;  font-family: Georgia, Times, "Times New Roman", serif;  margin: 0;  padding: 0; }  cite {  display: block;  text-align: center; } 

Finally, use pseudo-elements :before and :after to stylize the punctuation in the quotation as well as to place an em dash ‚ a horizontal dash equal to the default size of the font ‚ before the name of the cited source:

 blockquote p:before {  content: "1C";   font-size: 1.2em;  font-weight: bold;  font-family: Georgia, Times, "Times New Roman", serif; } blockquote p:after {  content: "1D";   font-size: 1.2em;  font-weight: bold;  font-family: Georgia, Times, "Times New Roman", serif; } cite:before {  content: "14 "; } cite {  display: block;  text-align: center; } 

Discussion

Pseudo-elements are selector constructs that browsers use first to select portions and then to stylize a web page that can't be marked up through standard HTML. For instance, you can use pseudo-elements to stylize the first line of a paragraph or, in the case of this Recipe, to place generated content before and after an actual element.

In this Solution we insert smart quotes around the actual quotation. For the left double quotes, we use this declaration:

 content: "1C "; 

Any text that you want displayed after an element needs to be marked off with double quotes. Because we are using double quotes to mark what should be displayed, we can't put another set of double quotes inside the first set. To put quotes around the quotation, we need to use the hexadecimal value for a quotation mark, which is 201C.

Because anything between the quotation marks automatically is generated as is, we need to escape the hexadecimal number that tells the browser to render the quotation marks by placing a forward slash in front of the double quotes.

The content property in the CSS 2.1 specification contains values for easily inserting quotation marks. For example, to re-create the left double quotes, use the following declaration:

 content: open-quote; 

However, note that open quote keyword value specification is implemented only in Mozilla and Opera. Also, note that the :before and :after pseudo-elements don't work in Internet Explorer 5+ for Windows and Internet Explorer for Macintosh.

See Also

Recipe 8.3 on how to include links in printouts of web pages using pseudo-elements; http://homepages.luc.edu/~vbonill/Entities923-8472.html for a list of HTML character entities; the CSS 2 specification for quotations for generated content at http://www.w3.org/TR/REC-CSS2/generate.html#quotes.