"Pullquotes are basically some important text in the content that is repeated on a side with emphasis"
Roger Johansson of the 456 Berea st. recently wrote an article on how to make pullquotes using javascript. Pullquotes are basically some important text in the content that is repeated on a side with emphasis so that people will notice it sooner. This is often seen in magazines. Example to the right...
The method he used is to give the needed text a class, pull out the text using javascript and show it in the side. See original article for more details and code.
Advantages of this method
Avoids redundancy
This approach avoids having to enter the same content twice in the page. If you are using a pullquote, you will already have that text somewhere in the page.
A few problems with this approach
JavaScript is used for structure
JavaScript is used to create the pullquote - basically doing the job that rightfully belongs to (X)HTML. However, this don't really bother me - I am not that much of a purist. This feature also avoids redundancy of the text - which brings me to my next point.
Misses out on SEO advantage
The redundancy in the quote, propably containing some of our target keywords, is a good thing from an SEO point of view. Using this method will eliminate that advantage.
Not semantic
The 'span' tag is free of any semantic meaning - and frowned on in many purist circles. But, as I said earlier, it don't bother me much(I use spans liberally). But in this case, there is an opportunity do this right - using semantic markup is very easy...
<blockquote class="pullquote"><p> ... pullquote ... </p></blockquote>
...if you don't have issues about quoting yourself.
Text can't be changed
You will have to use the text exactly as it appears in the body - you will not be able to make any changes to it. Often you want to make cosmetic changes to the text before you make it a pullquote.
Don't need javascript
If someone who has a good browser(supports CSS) is surfing with Javascript turned off, he will not be able to see the effect.
Purely Semantic Method
A much simpler method of doing this is to just the proper markup to insert the quote and using CSS to position the text wherever you want. You don't really need JavaScript for doing this.
(X)HTML
<blockquote class="pullquote"><p> ... pull quote ... </p></blockquote>
CSS
This code is taken from the original article. Change it to fit your design.
.pullquote {
float:right;
width:10em;
display:block;
margin:0.25em 0.75em 0.25em 1em;
padding:0.5em;
border:3px double #ccc;
border-width:3px 0;
color:#333;
background-color:#f0f0f0;
font:italic 1.3em/1.3 Georgia;
}
.pullquote p {
margin:0;
text-align:center;
}
Read More...
