demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

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

css / typography

Estimated reading time: 3 minutes, 24 seconds

A pullquote is typically used in articles to draw attention to a particular phrase, topic, or fact. Pullquotes (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.

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

When it comes to creating a pullquote 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).

In XHTML <blockquote> has the requirement that some form of markup be used immediately inside of it: i.e. we can’t just insert raw content inside the element. It is common to 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 on web pages.

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 pullquotes in your site, and that those pull quotes would always have the same appearance, we could use the following to customize their appearance:

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:

blockquote p { font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive; font-size: 200%; }

Our pullquote lacks quote marks. There are several ways of inserting them:

  • Via HTML entities
  • Add markup such as <q>
  • Creating the appropriate characters in a word processor and cut-and-pasting them into the body copy

Let’s pretend for a moment that we always want opening and closing quotes around paragraphs in a pull quote: 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 scope of CSS. That central purpose is one that I have emphasized repeatedly: CSS is about the appearance of content, and markup provides meaning for that content. Generated content draws something of a fuzzy line between the two.

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

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

The content attribute can be set to almost 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:

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 , in the form of server-side includes. Play with the code for the pullquote example on CodePen

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.