Semantic Pullquotes

"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;
}

Filed Under...

• web
• development
• css
• pullquote
• sementic