nerkalog

nerkles March 8th, 2005

Here’s a simple technique to add a floated sidebar to a web page with the following features:

• uses table-free layout with CSS.
• source-ordered: the sidebar content is at the end of the XHTML source code.
• good accessibility.
• graceful degradation: still visible and usable in old browsers (pre-5.x), but it’s at the bottom of the page and accessed via anchors instead of floated alongside the article.
• uses unobtrusive JavaScript to move the sidebar into place on modern browsers at page load time.
• you can style it however you like with CSS.

Here is a complete example.

And here’s what it will look like on older browsers. (This is the exact same XHTML & CSS, minus the JavaScript.)

An Accessibility Story

I downloaded the demo version of JAWS to get an idea of how this would work out. My first attempt at this placed the sidebar into the flow of the document’s body, but running JAWS revealed that it reads you the document after the JavaScript has had its way with the DOM. What to do?

The technique leaves the sidebar at the bottom of the document by performing this series of steps:

1. move a copy of the sidebar into the document via the DOM to where you want it appear.
2. get its pixel size and position
3. remove the copy of the sidebar from the DOM
4. replace it with a floated, empty div of the same dimensions
5. position the actual sidebar content on top of the empty one with absolute positioning, setting its position and size to match.
6. repeat this process at onresize events

I’d appreciate if any users of screen readers or other assistive devices out there would report whether this technique works properly for them. From my tests, it works well in JAWS.

I suspect a similar problem is cropping up for JAWS users with the Semantically Correct Knockout Quotes technique I posted, so I’ll have to re-visit that at some point.

NOTE: this requires the X library, and you may need to adjust the path to it in the JavaScript to match where you put it.

• articles , General , Nerding , web stuff
• Comments(1)

nerkles October 19th, 2004

Here is a technique to add eye-grabbing knockout quotes (a.k.a. pull quotes) to your pages which:

• doesn’t require the semantic blemish of repeating the quotes in order to include them as knockouts
• lets you decorate the knockouts any way you want with CSS
• allows for an attribution line that does not appear in the document’s body
• allows you to use non-contiguous segments of text as knockouts
• works on modern browsers, causes no harm on old ones*

Please view The Example.

To use it, you just add the JavaScript noted below to your document (in the head section or in a separate file), add a few lines of CSS (see example below; you can and should customize it to your liking, of course), and then mark up your text like this:

<p>Bunch of text that says something so important you 
just can’t stand it. You are truly blown away by the 
greatness of this paragraph. It’s like nothing you’ve 
ever seen before 
<strong><span class="koq" id="koq1"></strong>and 
the implications are earth‐shattering<strong></span></strong>! 
And furthermore, this sentence really does it for you, 
whatever <em>it</em> is. </p>

Notice the span tag. If you want to add attribution to your quote, just add an id attribute. The script will then look for a meta tag with a name that matches the span’s id. If it finds one, the content from the meta tag becomes your attribution.

Here is the corresponding meta tag that gives an attribution line for the quote above:

But What If You Don’t Want to Quote a Contiguous Chunk of the Text?

This is easy too, as long as you don’t need your quote to span across paragraphs or divs (pun intended). In that case, you’re on your own. (Although if somebody has a reason to tackle this one, please share your solution.)

Here’s how to do it:

<p>Bunch of text that says something so 
important you just can’t
stand it. You are truly blown away by the greatness of this paragraph. 
<span class="koq" id="koq2">It’s like
nothing you’ve ever seen before 
<strong><span class="skip"></strong>and
the implications are <strong></span></strong>earth‐shattering</span>!
And furthermore, this sentence really does it for 
you, whatever <em>it</em> is.</p>

Simply insert a span of class skip and you are on your way. The JavaScript will insert an ellipsis for you.

Here is a simple example of the CSS you need:

/* the box */

div.koq {
        font-size: 1em;
        float:right;
        margin: 0 0 0.75em 0.75em;
        padding: 1em;
        background-color: #CCCC99;
        width:27%;
        border:1px solid #999;
        color: #3A2000;
        text-decoration: none;
        clear:right;
}

/* the text of the quote */

div.koq p {
        margin:0; padding:0;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 1.3em;
        font-style: italic;
        font-weight: bold;
}


/* be sure skipped phrases are invisible */

div.koq span.skip { display:none; }

/* the attribution line */

span.koqsrc {
        color:#333333;
        font-style:normal;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        float:right;
        margin: 0.4em 0 0.25em 0;
        padding:0;
        font-size: 0.7em !important;
}

Remember to download X Library. View source on the example to get the JavaScript code. [Note: you may need to make a small adjustment to the code, depending on where your xlib is located.]

Looking Ahead

• I’d like to figure out a way to place the knockouts more in the middle of the paragraph instead of flush with the top. (Feel free to post your suggestions in the comments section.)
• It’s possible that this could be made to work with more of the older browsers, but it currently works on what most people use.
• I bet this code could be tweaked without much effort to do something similar for images, moving them into a floated box with captions derived from the alt text and/or meta tags.
• Maybe this can be hacked into a WordPress plug-in (feel free to use the code to do this if you want—for any open source system).

That’s it. Enjoy.

* Tested on Safari, Firefox, IE4,5,6, Netscape 4.7/Mac, and IE for Mac OS X. [back to text]

This article is copyright ©2004 by Isaac Csandl. All Rights Reserved. Code portions (the CSS and JavaScript parts written by me) are free to use as you wish as long as you do not claim authorship. Feel free to inquire about reposting/printing this article.

• articles , web stuff
• Comments(18)