Dec 17 2009
Classic Typography Effects In CSS: Pull quote With Generated Quote Marks
0 commentsA pull quote is typically used in magazine 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.
First, as always, our primary question is one of semantics: what markup makes the most sense for our content? <blockquote> is a block tag that is purpose-built for containing quotations. (<q> could be used, but is typically reserved for inline quotations, such as inside a paragraph). <blockquote> has
the requirement that some form of markup be used inside of it – we can’t simply insert raw content – so we will use a paragraph:
<blockquote><p>A lie can travel half way around the world 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. (But we know better now, right?) <blockquote> is a block tag, meaning that it can be floated. Assuming that <blockquote> was always used for the purpose of creating pull quotes, and that those pull quotes would always have
the same appearance, we could use the following CSS to start to customise their appearance:
blockquote { float: right; width: 12em; margin-left: 2em; }
That’s a good start, but we also want to customise the appearance of text inside, more specifically, that of the paragraph:
blockquote p { font-family: “Monotype Corsiva”, “Apple Chancery”, “URW Chancery L”, cursive; font-size: 200%; }
Altogether, the result isn’t bad: we have to remember that a <blockquote> goes between paragraphs, rather than within them.
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, and more. 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.
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 again and again: CSS is about the appearance of content, and that XHTML markup provides meaning for that content, but content itself is always entered by the user / designer.
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 typing, 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. To achieve that, we have the pseudo-class :before
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 when I introduced 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:
blockquote p:before { content: open-quote; }
And a close-quote at the end:
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.
Suggested further work:
Ensure that paragraph text wraps around the pull quote. Style the first letter of the pull quote differently from other characters. Place a quotation source or citation immediately beneath the pull quote, marked up appropriately, styled in a different font and size. Place a bar above and below the pull quote. Replace this bar with a decorative cartouche, rosette, or other decorative element.
You must be signed up and logged in to leave a comment. Doing so only takes a moment.
