Pullquotes in Hemingway

Pullquotes are really cool, amirite? They’re good for readability, of course, but they also just give you warm fuzzies every time you look back over your blog posts… or maybe that’s just me? At any rate, they’re not particularly hard to implement, either: Google returns hundreds of tutorials on how to make them. But at the bottom of it, most of these tutorials are pretty generic. If you’ve got a large swath of text, then you could easily use any of them to add a gussied-up blockquote to your post page.

if you’re using Hemingway — or one of its variants — then you might find that solution less than ideal.If you check out a single post page on a Hemingway-themed blog (say, this one), you’ll see that horizontal space is at a premium. This is by design, of course, since lines of about eighty characters are the most readable.

To crowd the main content column with an arbitrary pullquote, then, would impair legibility and hurt the neat geometry that I’ve got going on. Jamming pullquotes therein would be especially unconscionable when we consider all the wide-open whitespace we’ve got to the left, just waiting to be filled with beautiful typography. It is here, in fact, that we’ll be placing our pullquotes. My goal is to mimic the look of the info box that rides in the left column ("#secondary," for those of you who have familiarized yourselves with Hemingway’s CSS), but you can style your left-column pullquotes however you’d like using my model.

So, how does this work? Well, since you’ll be defining the content and vertical position of these pullquotes in the contents of the post itself, you can’t very well escape the #primary div (that’s the one that appears in the right column) to place your quote in #secondary directly. So to make do, we’ll have to cheat a little bit. Our pullquotes will remain logically embedded in #primary, but the browser will render them as if they were right there in the left column where we want them.

First up, the trick to doing so. Toward the top of your style.css file (located in ../wp-content/themes/hemingway/, by default), you should see a section of style code that matches the following:

.inside{
      width:80%;
      min-width:65em;
      max-width:85em;
      margin:0 auto;
}


If your stylesheet is commented like mine is, you’ll see a note about this class that it determines the width for the main content areas across the entire page. It’s powerful stuff, indeed, and it carries out this feat by containing all the other blocks inside it. This is the property of .inside that interests us. You’ll want to take modify this class as follows:

.inside{
      position: relative;
      width:80%;
      min-width:65em;
      max-width:85em;
      margin:0 auto;
}

This new line assigns the .inside class a position besides the default value ("static"). Why do we bother doing that? It’s not because we care particularly how the class itself is positioned (actually, the only reason I’m telling you to set it to "relative" is because the other option, "absolute," breaks the layout).  Instead, what we care about is using .inside as a reference. According to the CSS spec, an absolute-positioned block is takes an absolute position with regard to its containing block, and the containing block is any parent with a block-level, normal-flow position. In plain English, this little hack ensures that our pullquotes take their marching orders from the right source.

With that out of the way, you can style your pullquotes any way you’d like using the selector #primary .inside .pullquote. Just add it in somewhere in style.css For reference, here’s how I gussy mine up (as of this writing):

#primary .inside .pullquote {
     position: absolute;
     left: 0;
     width: 30%;
     padding: .5em 0;
     border-top: 1px solid #CCC;
     border-bottom: 1px solid #CCC;
     font-size: 1.8em;
}

For those who are still following my explanation above, you can see that the "position: absolute" tells the pullquote div to pay attention to where the .inside div is located, and "left: 0" tells it to sidle up zero pixels from .inside’s left wall — in other words, right there in the left column. Meanwhile, "width: 30%" mirrors the width of the post info div that we’re emulating, although this (and everything below) can be configured to your liking. Far be it from me to try to unduly influence your pullquotes’ appearance, but I will say that if you don’t like my style you could do worse than Mandarin Design’s "Feelin’ Groovy" tutorial.

At any rate, now that you’ve got your quotes styled, you may still be wondering how to use them. Fortunately, this is the easiest part. First, start writing a new post or edit one you’d like to add a pullquote to. Next, find an area where you’d like the quote to appear. Since our CSS doesn’t specify a vertical position for the pullquote, it will appear at the same part of the post that you position it in, just positioned to the left of the post itself. So if you want a quote to appear at the level of your third paragraph down, just get ready to add the markup there. The markup?

<div class="pullquote">The quoted text goes here.</div>

Note that if you’re quoting text from the post itself, that text will have to appear twice; once in the post and once in the quote. Wrapping the desired text in these div tags without duplicating it outside the tags will whisk your quotation off into the left column without a trace left behind in the main body.

Finally, a note on display: because Hemingway excerpts (or, more technically correctly, displays a teaser from) your posts on its front page, and since this tutorial targets a column that only exists when a single post is displayed, I can’t guess what would happen if one of your pullquotes ever made it up onto index.php. Your best bet is to use pullquotes exclusively after the <!–more–> tag to ensure that they only appear where they’re wanted.

Got all that? Now go nuts, and have the nicest Hemingway blog on the block!