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.
