Jump to content

Year

Day

24 Ways to impress your friends

5 12/2005 DOM Scripting Your Way to Better Blockquotes

by Jeremy Keith

Block quotes are great. I don’t mean they’re great for indenting content – that would be an abuse of the browser’s default styling. I mean they’re great for semantically marking up a chunk of text that is being quoted verbatim. They’re especially useful in blog posts. 

<blockquote>
     <p>Progressive Enhancement, as a label for a strategy for Web design, 
     was coined by Steven Champeon in a series of articles and presentations 
     for Webmonkey and the SxSW Interactive conference.</p>
 </blockquote>

Notice that you can’t just put the quoted text directly between the <blockquote> tags. In order for your markup to be valid, block quotes may only contain block-level elements such as paragraphs.

There is an optional cite attribute that you can place in the opening <blockquote> tag. This should contain a URL containing the original text you are quoting:

<blockquote cite="http://en.wikipedia.org/wiki/Progressive_Enhancement">
     <p>Progressive Enhancement, as a label for a strategy for Web design, 
     was coined by Steven Champeon in a series of articles and presentations 
     for Webmonkey and the SxSW Interactive conference.</p>
 </blockquote>

Great! Except… the default behavior in most browsers is to completely ignore the cite attribute. Even though it contains important and useful information, the URL in the cite attribute is hidden.

You could simply duplicate the information with a hyperlink at the end of the quoted text:

<blockquote cite="http://en.wikipedia.org/wiki/Progressive_Enhancement">
     <p>Progressive Enhancement, as a label for a strategy for Web design, 
     was coined by Steven Champeon in a series of articles and presentations 
     for Webmonkey and the SxSW Interactive conference.</p>
     <p class="attribution">
          <a href="http://en.wikipedia.org/wiki/Progressive_Enhancement">source</a>
     </p>
 </blockquote>

But somehow it feels wrong to have to write out the same URL twice every time you want to quote something. It could also get very tedious if you have a lot of quotes.

Well, “tedious” is no problem to a programming language, so why not use a sprinkling of DOM Scripting? Here’s a plan for generating an attribution link for every block quote with a cite attribute:

  1. Write a function called prepareBlockquotes.
  2. Begin by making sure the browser understands the methods you will be using.
  3. Get all the blockquote elements in the document.
  4. Start looping through each one.
  5. Get the value of the cite attribute.
  6. If the value is empty, continue on to the next iteration of the loop.
  7. Create a paragraph.
  8. Create a link.
  9. Give the paragraph a class of “attribution”.
  10. Give the link an href attribute with the value from the cite attribute.
  11. Place the text “source” inside the link.
  12. Place the link inside the paragraph.
  13. Place the paragraph inside the block quote.
  14. Close the for loop.
  15. Close the function.

Here’s how that translates to JavaScript:

function prepareBlockquotes() {
     if (!document.getElementsByTagName || !document.createElement || !document.appendChild) return;
     var quotes = document.getElementsByTagName("blockquote");
     for (var i=0; i<quotes.length; i++) {
          var source = quotes[i].getAttribute("cite");
          if (!source) continue;
          var para = document.createElement("p");
          var link = document.createElement("a");
          para.className = "attribution";
          link.setAttribute("href",source);
          link.appendChild(document.createTextNode("source"));
          para.appendChild(link);
          quotes[i].appendChild(para);
     }
 }

Now all you need to do is trigger that function when the document has loaded:

window.onload = prepareBlockquotes;

Better yet, use Simon Willison’s handy addLoadEvent function to queue this function up with any others you might want to execute when the page loads.

That’s it. All you need to do is save this function in a JavaScript file and reference that file from the head of your document using <script> tags.

You can style the attribution link using CSS. It might look good aligned to the right with a smaller font size.

If you’re looking for something to do to keep you busy this Christmas, I’m sure that this function could be greatly improved. Here are a few ideas to get you started:

About the author

Jeremy Keith is an Irish web developer living in Brighton, England where he works with Clearleft. He is joint leader of the WaSP DOM Scripting Task Force and he has written a book about DOM Scripting. He likes music, food, and liquid layouts. All he wants for Christmas is universal support for max-width.

Like what you read?

Comments

Commenting is closed for this article.

About the author

Jeremy Keith

Jeremy Keith is an Irish web developer living in Brighton, England where he works with the web consultancy firm Clearleft. He has written two books, DOM Scripting and Bulletproof Ajax, but what he really wants to do is direct.

His latest project is Huffduffer, a service for creating podcasts of found sounds. When he's not making websites, Jeremy plays bouzouki in the band Salter Cane. His loony bun is fine benny lava.

More information

In association with:

Perch - a really little cms