{"rowid": 320, "title": "DOM Scripting Your Way to Better Blockquotes", "contents": "Block quotes are great. I don\u2019t mean they\u2019re great for indenting content \u2013 that would be an abuse of the browser\u2019s default styling. I mean they\u2019re great for semantically marking up a chunk of text that is being quoted verbatim. They\u2019re especially useful in blog posts. \n\n<blockquote>\n     <p>Progressive Enhancement, as a label for a strategy for Web design, \n     was coined by Steven Champeon in a series of articles and presentations \n     for Webmonkey and the SxSW Interactive conference.</p>\n </blockquote>\n\nNotice that you can\u2019t 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.\n\nThere 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:\n\n<blockquote cite=\"http://en.wikipedia.org/wiki/Progressive_Enhancement\">\n     <p>Progressive Enhancement, as a label for a strategy for Web design, \n     was coined by Steven Champeon in a series of articles and presentations \n     for Webmonkey and the SxSW Interactive conference.</p>\n </blockquote>\n\nGreat! Except\u2026 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.\n\nYou could simply duplicate the information with a hyperlink at the end of the quoted text:\n\n<blockquote cite=\"http://en.wikipedia.org/wiki/Progressive_Enhancement\">\n     <p>Progressive Enhancement, as a label for a strategy for Web design, \n     was coined by Steven Champeon in a series of articles and presentations \n     for Webmonkey and the SxSW Interactive conference.</p>\n     <p class=\"attribution\">\n          <a href=\"http://en.wikipedia.org/wiki/Progressive_Enhancement\">source</a>\n     </p>\n </blockquote>\n\nBut 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.\n\nWell, \u201ctedious\u201d is no problem to a programming language, so why not use a sprinkling of DOM Scripting? Here\u2019s a plan for generating an attribution link for every block quote with a cite attribute:\n\n\n\tWrite a function called prepareBlockquotes.\n\tBegin by making sure the browser understands the methods you will be using.\n\tGet all the blockquote elements in the document.\n\tStart looping through each one.\n\tGet the value of the cite attribute.\n\tIf the value is empty, continue on to the next iteration of the loop.\n\tCreate a paragraph.\n\tCreate a link.\n\tGive the paragraph a class of \u201cattribution\u201d.\n\tGive the link an href attribute with the value from the cite attribute.\n\tPlace the text \u201csource\u201d inside the link.\n\tPlace the link inside the paragraph.\n\tPlace the paragraph inside the block quote.\n\tClose the for loop.\n\tClose the function.\n\n\nHere\u2019s how that translates to JavaScript:\n\nfunction prepareBlockquotes() {\n     if (!document.getElementsByTagName || !document.createElement || !document.appendChild) return;\n     var quotes = document.getElementsByTagName(\"blockquote\");\n     for (var i=0; i<quotes.length; i++) {\n          var source = quotes[i].getAttribute(\"cite\");\n          if (!source) continue;\n          var para = document.createElement(\"p\");\n          var link = document.createElement(\"a\");\n          para.className = \"attribution\";\n          link.setAttribute(\"href\",source);\n          link.appendChild(document.createTextNode(\"source\"));\n          para.appendChild(link);\n          quotes[i].appendChild(para);\n     }\n }\n\n\nNow all you need to do is trigger that function when the document has loaded:\n\nwindow.onload = prepareBlockquotes;\n\nBetter yet, use Simon Willison\u2019s handy addLoadEvent function to queue this function up with any others you might want to execute when the page loads.\n\nThat\u2019s 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.\n\nYou can style the attribution link using CSS. It might look good aligned to the right with a smaller font size.\n\nIf you\u2019re looking for something to do to keep you busy this Christmas, I\u2019m sure that this function could be greatly improved. Here are a few ideas to get you started:\n\n\n\tShould the text inside the generated link be the URL itself?\n\tIf the block quote has a title attribute, how would you take its value and use it as the text inside the generated link?\n\tShould the attribution paragraph be placed outside the block quote? If so, how would you that (remember, there is an insertBefore method but no insertAfter)?\n\tCan you think of other instances of useful information that\u2019s locked away inside attributes? Access keys? Abbreviations?", "year": "2005", "author": "Jeremy Keith", "author_slug": "jeremykeith", "published": "2005-12-05T00:00:00+00:00", "url": "https://24ways.org/2005/dom-scripting-your-way-to-better-blockquotes/", "topic": "code"}