Classic Typography Effects In CSS: Pull-quote With Generated Quote Marks

A pull quote is typically used in articles to draw attention to a particular phrase, topic, or fact. Pull quotes (also sometimes referred to as lift-out or call-out quotes) are usually set in a font is that larger and more visible than paragraph text; body copy is typically wrapped around the quote.

When it comes to creating a pull quote on a web page, our first question, as always, is one of semantics: what markup makes the most sense for the content?

<blockquote> is a block tag that is purpose-built for containing quotations. (<q> could be used, but is typically reserved for inline quotations within a paragraph). <blockquote> has the requirement that some form of markup be used inside of it: i.e. we can’t just insert raw content inside the element. It is common to use a paragraph:

1. <blockquote><p>A lie can travel half way around the world
2. while the truth is putting on its shoes.</p></blockquote>

By itself, <blockquote> doesn’t do much, merely pushing the text in from the left and right, which is why many people who don’t know what they are doing use it to indent text.

As I mentioned, <blockquote> is a block tag, meaning that it can be floated. Assuming that <blockquote> was always used for the purpose of creating pull quotes in your site, and that those pull quotes would always have the same appearance, we could use the following CSS to customize their appearance:

1. blockquote { float: right; width: 12em; margin-left: 2em; }

This is a good start, but we also want to customize the appearance of text inside the pull quote, more specifically, that of the paragraph:

1. blockquote p { font-family: “Monotype Corsiva”, “Apple Chancery”,
2. “URW Chancery L”, cursive; font-size: 200%; }

The concept of generated content can be slippery to grasp, primarily because it is outside the central purpose of CSS.

Our pull quote lacks quote marks. There are several ways of inserting them: we could use HTML entities, add markup such as <q>; create the appropriate characters in a word processor such as Microsoft Word and cut-and-paste them into the body copy, etc. But let’s pretend for a moment that we always want opening and closing quotes around paragraphs in a pull quote, and that we have many pull quotes to add quotation marks to our pullquotes.

It is at this point that the ability of CSS to produce generated content becomes useful. The concept of generated content can be a slippery one to grasp, primarily because it is outside the central purpose of CSS. That central purpose is one that I have emphasized repeatedly: CSS is about the appearance of content, and HTML markup provides meaning for that content.

Under normal conditions, content is always entered by the user, designer, or editor. However, let’s consider a simple example: let’s say that every time we created a paragraph anywhere on any page in our website, we wanted to begin it with the words “Once upon a time” in red, followed by an ellipsis (…).

That is an awful lot of repeated typing for every paragraph, with many possibilities for incorrect entries and mistakes. At that stage we could argue that “Once upon a time… “ becomes part of the consistent appearance of every paragraph: decorative content. To achieve that, we have the pseudo-class selector :before

1. p:before { content: (“Once upon a time… “); color: red; }

content can be set to anything: a keyword, a string of characters, an HTML entity, an image (using the url syntax we used with background-image), a counter, even a sound.

For our example, we want every paragraph in our pull quote to be preceded by an open quote mark:

1. blockquote p:before { content: open-quote; }

And a close-quote at the end:

1. blockquote p:after { content: close-quote; }

You can use generated content for many things: a good example would be a navigational list in which the dividers between list-items was a diagonal slash (/) rather than the vertical side-border we used in a previous example.

The concept of generated content - content that remains consistent across pages – is an important one to understand, especially when we turn to its uses in PHP, in the form of server-side includes.