Pullquotes or callouts in Drupal

Posted 10 January 2010 - 10:27pm by David Thrale

This is an example of a pull quote or call-out.

— Author's name goes here.

I am in the middle of moving Thrale.com from a traditional static HTML/CSS & PHP website to a database driven content management system using the fantastic Drupal.

One of several challenges I am tackling is how to transfer pull quotes (or call-outs) from the static site into Drupal. Inevitably a straight transfer didn't work very well in Firefox and even worse in IE.

I searched the web for inspiration and found that the best pull quote method involves using jQuery to manage the process and that this cleverly does not require a duplicate instance of the quoted text to be included in your mark-up. Unlike many jQuery tools,, this hasn't been been migrated to a Drupal module yet, and alas I don't have the skills to do this myself, nor the time to maintain a module.

Equally disappointing, there are no Drupal modules for pull quotes that I could find. My search took me to some really useful sites that have some good examples of pull quotes and the mark-up and CSS to make them work.

This was when I realised the problem - the mark up for many of the pull-quote designs differ considerably. This is contrary to the principles of modern websites - a world where you should be able to completely change the site design without touching mark-up - just by changing CSS. One update changes many - all - pages.

The problem with different mark-up is that a change of design then would require changing mark-up on hundreds / thousands of pages. Indeed, I am already faced with the task of changing the mark-up on many pages. If I have to do this, I want to do it in such a way that I do not have to do this again.

So, I thought I would try to develop consistent mark-up to achieve this. I realise that in doing so the mark-up will not encompass all possible designs. However, as I don't want to change mark-up, I am willing sacrifice a unlimited design flexibility.

However, I must warn that I am no CSS expert. I have no idea if my work breaks any standards or best practice. It may not work on all browsers - I have tested on the latest IE, Firefox, Safari and Chrome. If you can point out any possible improvements or issues, please add your comments below.

Below is the mark-up which produces a quote and author's name and details:

<div class="pullquote"><p class="quotation">Lorem ipsum dolor sit amet, consec tetuer adi piscing eilt.</p><p class="author">— Author's details here.</p></div>

Also below are a few examples of CSS and the different results achieved with no change to the mark-up. In many cases, the designs illustrated are taken - with thanks - from other sites1, but are adapted by me to test my golden rule of a single method for page mark-up and only changing design using CSS.

I have been a little surprised that, as far as I can see, that this problematic issue of varying mark-up has not previously been identified and tackled by the web community. I hope that my amateur contribution is helpful.

I'd love to hear:

your thoughts on the issue;
any comments you may have on my HTML mark-up;
any suggestions for improving my CSS;
any CSS that achieves nicer pull-quote design using my suggested static HTML mark-up; and
if you use any of the mark-up / CSS combinations here - a link to you site.

Thanks.