Extra Credit

---

For extra credit, we'll be looking at a few creative ways to style quotations marked up with <blockquote>, but before that, let's talk a little about the cite attribute as well as inline quotations.

A Cite for Curious Eyes

Getting tired of the corny headings yet? Oh, good. Neither am I. It's important to mention the cite attribute when discussing quotations. According to the W3C's specification, cite gives the designer a place to reference the source from which the quotation was borrowed—meaning if the quotation comes from another web page, we can add the URL of that page as the value of the cite attribute.

Let's take a look at how this works in the code.

 <blockquote cite="http://www.somewebsite.com/path/to/page.html"   <p>Misquotations are the only quotations that are never misquoted.</p>   <p>&#8212; Hesketh Pearson </p> </blockquote> 

At the time of this writing, most browsers aren't going to do anything particularly special with the cite attribute that we've just added. But things start to get interesting when advanced CSS techniques or scripting applications are used to display or index the information contained within the cite attribute. The location of the quotation is an additional nugget of information that helps describe the content it contains—and that can be very valuable in the future.

Think of adding cite information as you would putting pennies in a piggy bank. The pennies aren't worth much today, but you'll be happy later on down the road that you saved them all.

Inline Quotations

What about quotations that are short, and meant to be referenced inline? For instance, if you're quoting someone within a sentence, use the <q> element demonstrated here:

 I said, <q>Herman, do you like bubblegum?</q> And he said, <q>Yes, the kind that comes with a comic.</q> 

which, in a visual browser, would most likely appear like this:

I said, "Herman, do you like bubblegum?" And he said, "Yes, the kind that comes with a comic."

No Need for Marks

Most visual browsers will insert quotation marks where <q> and </q> elements are used, so there's no need to type them in. The W3C also recommends adding the lang attribute with whatever language the quotation is in, as the value. Certain languages may display the quotation marks differently, depending on the language.

 I said, <q lang="en-us">Herman, do you like bubblegum? </q> And he said, <q lang="en-us">Yes, the kind that comes with a comic.</q> 

A full listing of possible language codes is available at the W3C site (www.w3.org/TR/html4/struct/dirlang.html#langcodes).

Nesting Inline Quotations

You can also nest inline quotations when you're quoting someone within a quotation. Confused? Me too. Let's take a look at an example:

 I said, <q lang="en-us">Herman, do you like bubblegum? </q> And he said, <q lang="en-us">Yes. Bubblegum is what Harry calls <q lang="en-us">delicious</q>.</q> 

Double and single quotation marks would be used in the appropriate places like this:

I said, "Herman, do you like bubblegum?" And he said, "Yes. Bubblegum is what Harry calls 'delicious'."

Styling <blockquote>

For a few years now, Fast Company has been running a daily quotation from the magazine's archives on its home page. In order to preserve FC's typographic style and emphasis, the quote had, for a long while, been created as a GIF image, with the ability to manipulate the font any which way the designer wished.

In the early fall of 2003, right about the time I was watching my beloved Red Sox come oh-so-close to a historic World Series berth, I decided to toss out the GIFs and use a styled <blockquote> instead.

From an accessibility angle, it sure made sense to have the quotation as text rather than an image, and while we couldn't reproduce the flexibility in typography of the GIF, we had the challenge of making the quote stylish in some fashion. CSS to the rescue, of course.

Background Quote Marks

The idea is pretty simple, and involves creating opening and closing quote marks as two separate images, light enough in shade to be sitting behind the text of the quote that will overlap a bit on top of them. The quote also lives in a 270-pixel-wide, light gray box that has rounded corners to match the rest of the look and feel of the website. A third image is used to complete the rounded effect along with the quotation marks. All three images are contained entirely within CSS using the background property on the various elements that are available.

Let's first create those quotation mark and rounded corner images in Photoshop or your favorite image editor. Here is the opportunity to use a custom font that would normally be unavailable to the everyday browser. In the case of Fast Company, I was able to use a font for the quotation marks that was found throughout the magazine.

Three Images

Figure 4-1 shows the three images created, one that handles both the opening quotation mark and top rounded corners, one for the closing quotation mark, and one for the two bottom rounded corners.

Figure 4-1: Three images created in Photoshop to create quotation marks and rounded corners

The images are transparent to let the gray background that we'll specify in CSS show through: white where we can create the rounded corners and gray for the quotation marks.

Tagging the Elements

At present, you can only assign one background image to an element using the background or background-image property. So, we'll add an id to each of the paragraphs within our <blockquote>.

One paragraph we'll tag as #quote and the other as #author so that in the end, we'll have three unique elements to assign background images to.

Take a look at the modified markup that we'll be using for the rest of this exercise:

 <blockquote cite="http://www.somesite.com/path/to/page.html">   <p ><strong>Misquotations</strong> are the only quotations that are <strong>never</strong> misquoted.</p>   <p >&#8212;Hesketh Pearson</p> </blockquote> 

Now we're ready to assign the images.

Three Elements, Three Backgrounds

As mentioned previously, at present, you can specify just one background image for an element using the background or background-image property. So we'll take advantage of the three available elements in our example—the <blockquote>, the #quote paragraph, and the #author paragraph—in order to assign the three images needed to complete the effect we're after.

It's always a good idea to take a look at what elements you have available before adding new ones. Oftentimes, it's possible to get the CSS styling you need with elements that are already in place from writing good, structured markup.

To begin, we'll write the CSS rules for the <blockquote> element:

 blockquote {   width: 270px;   margin: 0;   padding: 0;   font-family: georgia, serif;   font-size: 150%;   letter-spacing: -1px;   line-height: 1em;   text-align: center;   color: #555;   background: #eee url(top.gif) no-repeat top left;   } 

We've given the entire package a width of 270 pixels, the same width as the top.gif image that's creating the rounded borders as well as the opening quotation mark. We're also giving the text some love by specifying font, size, and color. Lastly, we're centering all of the text and have assigned the background color, image, and position in the last rule.

Turning off margins and padding for the <blockquote> is important as well. We'll be adding padding to each of the paragraph elements instead. This will allow us to work around Internet Explorer version 5 in Windows' misinterpretation of the CSS box model. We'll discuss in detail the box model further on in Part Two of the book.

Next, let's set up the rules for the #quote paragraph:

 blockquote {   width: 270px;   text-align: center;   margin: 0;   padding: 0;   font-family: georgia, serif;   font-size: 150%;   letter-spacing: -1px;   line-height: 1em;   color: #555;   background: #eee url(top.gif) no-repeat top left;   } #quote {   margin: 0 10px 0 0;   padding: 20px 10px 10px 20px;   background: url(end_quote.gif) no-repeat right bottom;   } 

By setting, margin: 0 10px 0 0;, we'll collapse the browser's default spacing for the paragraph on top and bottom, instead using a bit of precise padding to get the layout just right. We're adding a 10-pixel margin to the right side, however, effectively offsetting the quote mark background image by exactly that amount to match the left side. If we leave that 10 pixels out, the image would sit flush to the right edge of the entire box. Another option is to add that 10 pixels of padding to the right of the image itself.

Also note that background image (the closing quotation mark) is specified to sit at the bottom and right of the <blockquote>.

Lastly, we'll use the author paragraph (#author) element to add the last background image—the rounded corners for the bottom of the box.

 blockquote {   width: 270px;   text-align: center;   margin: 0;   padding: 0;   font-family: georgia, serif;   font-size: 150%;   letter-spacing: -1px;   line-height: 1em;   color: #555;   background: #eee url(top.gif) no-repeat top left;   } #quote {   margin: 0 10px 0 0;   padding: 20px 20px 10px 20px;   background: url(end_quote.gif) no-repeat right bottom;   } #author {   margin: 0 10px 0 0;   padding: 0 0 10px 0;   color: #999;   font-size: 60%;   background: url(bottom.gif) no-repeat bottom;   } 

Again, we've collapsed the default margin of the paragraph, opting instead to use a bit of padding on the bottom to get things lined up. The third image is in place now, and adds the bottom left and right rounded corners to the box. By using padding instead of margin to set spacing for the author, the rounded corner image can sit where it needs to—precisely at the bottom.

The Results

Figure 4-2 shows the results as seen in a typical, modern graphical browser. The rounded box is complete and quotation marks are tucked in nicely behind the quotation text. What's especially nice about this method is that the entire box is scalable—meaning you can drop in a quote of any length, and the box will expand or contract perfectly, with the quotation marks and rounded corners lining up in the right spots. This also means the design of the quote and containing box will be maintained if a user with low vision increases the text size.

Figure 4-2: Resulting styled blockquote using three background images and text

Calling Out Special Words

One additional design touch that I added to the Fast Company quote was to use the <strong> tag to call out certain important words within the quotation, to further mimic the typography that was used throughout the magazine.

By using <strong>, I could ensure that most unstyled viewers and nonvisual visitors of the quote would still receive a bold or strongly emphasized word (which makes perfect sense in this case), while at the same time, I could treat <strong> tags within the <blockquote> with a darker color as well, in the CSS.

The markup would change slightly, with the addition of selected words wrapped in <strong> tags:

 <blockquote cite="http://www.somesite.com/path/to/page.html">   <p ><strong>Misquotations</strong> are the only quotations that are <strong>never</strong>  misquoted.</p>   <p >&#8212;Hesketh Pearson</p> </blockquote> 

And here's the one additional CSS declaration that needs to be added:

 #quote strong {   color: #000;   font-weight: normal;   } 

Now, any <strong> elements that are within our quotation will be black (none more blacker) and since the rest of the quote is of normal font-weight, we'll override the default bold that occurs with <strong> with a value of normal.

The results of the <strong> tags can be seen in Figure 4-3, where we've called out the words "Misquotations" and "never."

Figure 4-3: The styled <blockquote> with <strong> tags added for calling out certain words

How Does it Degrade?

We've seen how stylish our <blockquote> can be with just a few background images and CSS rules, but what about browsers and devices that don't handle CSS well? How well does this method degrade?

Well, fortunately because we're using the <blockquote> element as it was meant to be used, unstyled viewers, old browsers, phones, PDAs, and screen readers will treat it appropriately. For instance, Figure 4-4 demonstrates how our lean markup will look without the fancy CSS applied. I've added a bit of dummy text around the quotation to give the complete effect.

Figure 4-4: An unstyled view of our <blockquote> example

---