The HTML specification suggests “a mechanism for inserting quotation marks before and after a quotation delimited by BLOCKQUOTE in a manner appropriate to the current language context and the degree of nesting of quotations.” From a usability standpoint, it makes sense to indicate as clearly as possible that everything within a <blockquote> element is a quotation. To do so, I wanted to add quotation marks, clear indentation, and even a slightly different color to differentiate. Here’s what the result looks like in Firefox:
I wanted to accomplish the look strictly with CSS and standards-based XHTML, which initially proved difficult because the lack of CSS2 support for multiple background images. If more browsers supported CSS3 and it’s support for multiple background images (only Safari does now), then I could have just used a quote background image for the top left and the bottom right. I also couldn’t use one wide background image that contained both quotations because the width and the height of the box would always be unknown.
Then I found an interesting tutorial that uses the CSS2 pseudo element :after to add additional background images after content. With a similar method, I was able to apply quotation marks before and after the <blockquote> content via CSS:
blockquote {
background: url(quote-open.gif) no-repeat;
color: #666;
margin: 0 0 1em 0;
padding: 0 50px 0 45px;
}
blockquote:after {
background: url(quote-close.gif) no-repeat right;
content: '';
display: block;
height: 25px;
margin: -2.25em -40px 0 0;
}
Works like a charm in browsers that support CSS2, but in IE the :after content isn’t rendered. For those browsers, I’m OK with the second quote not showing up, so I just added some IE-only style to remove the extra padding on the right:
blockquote {
padding-right: 0;
}
That’s it! No fancy JavaScript or extraneous HTML tags needed. The result:
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. –That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, –That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed.
Update (8/22/2008): Evaluated Cross-Domain AJAX with DOMAssistant.
AJAX applications have become commonplace, but many of the tutorials for developing them lean heavily on the help of JavaScript frameworks like DOMAssistant or Prototype. So I figured I would take a look at the standard AJAX-related properties and methods, see how cross-domain calls make the whole process slightly more complicated, and find out how much the frameworks can actually help. Without the help of a framework, you basically have three steps to display content obtained via AJAX:
I finally got around to creating a WordPress theme, which was necessary because of some usability concerns I had with the previous theme. One of the major improvements I made was to implement what I call a “semi-fluid layout”, or one that scales to the size of your browser within pre-determined dimensions. In standards-compliant browsers, the page will now scale from 728 pixels to 900 pixels. I needed to declare a minimum width because at extremely small widths the content can break in unforeseen ways, and a maximum width because anything larger than 900 pixels made the main content column so wide it become difficult to read (shorter columns = better usability).
As mentioned in a previous post, innerHTML has many simple uses, but isn’t part of the DOM standard. For some of common tasks, I’ve had to write some DOM-compliant functions that mimic their functionality. In this post, I’ll talk about two such common tasks, replacing part of some text within an element, and wrapping text within an element in another element.
In the previous post, I unveiled a new method of display block-level code snippets on the site. While developing this new method, I ran into a couple of cross-browser compatibility issues that delayed release of the work. Primarily, when dealing with elements that maintain whitespace (the <pre> tag and the <textarea> tag), special considerations need to be made to handle things in Internet Explorer to make the code function the same as in other browsers. Specifically, carriage returns/new lines are treated differently, as is assigning text via the innerHTML property.
