Semantically Correct Knockout Quotes
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
alttext and/ormetatags. - 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.
Fun with CSS Some nifty CSS techniques floated across my radar screen today: Semantically Correct Knockout Quotes. I’ve been looking (not very hard, I admit) for a slick way to do this for a while now. Also, note Dave Shea’s suggestion of using a cite tag rather …
Bookmarks: October 26 Jarhoo Search jar files and fully qualified java class names. Learning the (Linux) Shell A straightforward tutorial on shell commands in Linux. Lacing Methods Yes, I really do need this many ways to tie my shoes. Clearing Floats: The FnE…
Dave Shea’s suggestion to use
citein the script-generated attribution is a good one. It’s good practice to give semantic meaning all the time, and I was being lax about it inside the script-generated box. Anyway, I’ll update the article and JS code soon with that.Just to clarify things, the reason I went with
metaas a way to add attribution is to accommodate cases where you want the attribution to appear only in the box created for the knockout, but you don’t want it in your document (in the middle of the paragraph from which you are non-intrusively pulling out the quote). Usingmetahere is a way to place the attribution info “outside” of the document. Look at the Lord Somerville quote in the example to see what I mean. His name is there, but it doesn’t already appear in the right place. We’d have to rewrite Darwin to fix that!This type of example had me stumped for a bit and then I thought… what if JavaScript can read the
contentattribute from ametatag? It turns out it can… and there is no reason not to make up your ownmetatags. Of course in cases where the attribution is already in the right place in the document, you can skip the wholemetathing.I’d love to hear any ideas people have about a different or better way to do it, suggestions, criticism, etc. Please post ‘em if ya got ‘em.
Slick… I have been using some similar techniques, but never though about using a custom meta-tag for extra data inclusion in such a way. It’s a novel concept that could open up other uses as well. Good work
links for 2004-10-27 RoadWired CORDZ multi-connection survival tool cool retractable CAT-5 cable with adapters in the housing to convert to RJ-11, crossover RJ-45, and extension RJ-45 (categories: gadgets network wishlist) Semantically Correct Knockout Quotes cool way to …
Arg. It killed it. But basically what i was trying to say was that you missed the = in the span class=”skip”
@Adrian:
Thanks very much for pointing that out, I fixed it in the article.
What about using a title attribute on the span for attribution? It’s easier to put in metadata alongside your content, rather than pushing it to the top of the page. Atleast, that’s my humble opinion.
@Aankhen: That’s an interesting idea. My only hesitation is that I don’t know what non-visual browers like JAWS would do with that title attribute (I suspect it would read it to the user and it would sound like a bizarre typo). Anybody out there know?
You’re right, I believe a screenreader might read out the
titleattribute. However, one thing you could is to remove thetitleattribute in the script, so that any screenreader which works on top of a JavaScript-enabled browser won’t exhibit bizzare behaviour.Or is that just too hacky? I dunno, that’s the way Simon Willison’s blockquotes script works.
Aankhen,
Assuming screenreaders do read the
titleto the user, then if a screenreader botches the script that tries to remove thetitleattribute, it’s going to fail badly. If it’s in ametatag, at least we know it’s not going to cause a weird experience for screenreader users. Also, knockout quotes (at least the way this technique handles them) are an “off to the side” kind of content, so it makes semantic sense to put the attribution for them in ametatag.OK, that’s getting too deep into semantics for this late hour. I’m going to give it some more thought when I’m awake. Also, I’ll look for Simon’s script, it sounds interesting.
Thanks again for your thoughts on this.
ARGH! This is the third time I’m writing out the full comment, because of that authorisation code… the first time, I forgot to fill it out; the second time, it seems that the image was cached, so I had the wrong authorisation code. Right, I’ll try it one last time.
But wouldn’t a screenreader start reading only after the browser renders the full page? I’m not an expert on screenreaders, so this is just a stupid assumption.
Now there’s a good point which I hadn’t considered. Ah, what can I say? I’m just a sucker for
titles.Take a look at Dunstan Orchard’s modified version of Simon’s script.
What the heck? It swallowed up my comment. :-S
P.S. — A preview feature would be really useful.
Sorry about the troubles with the comment form. I had to put in that code thingy because I was just buried in comment spam, every few days I’d get blasted with about 200 of them. But even if you get past that, certain words will still land you in the moderation queue.
Ah, I see. No harm done. Some notification would be appreciated, though.
In case anybody cares, I’m working on a version of this that uses MochiKit instead of xlib. I’ll post it when ready.
Here’s another approach using CSS and the :before pseudo-element to generate the content of the quote: CSS Pull Quotes
[…] 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. […]