Pro HTML5 and CSS3 Design Patterns

(avery) #1
C H A P T E R 19

(^)


Callouts and Quotes


This chapter discusses design patterns that create callouts and quotes.
A callout is a key point pulled out of the document to grab a reader’s attention so he or she will read
the document and remember the point after having read it. A callout is repeated twice in a document:
once as part of the body of the document and once again for display as a callout. A callout is displayed
prominently so the reader cannot miss it. Because a callout is extracted from a document’s text, it is
often an inline element, although it could be a block element.
I have grouped callouts and quotes together because they are closely related. Callouts are also
known as pull quotes because they are quotes pulled from the document. There are differences between
pull quotes and quotes. A pull quote (or callout) requires the same text to be repeated twice within a
document, whereas a quote occurs only once. Also, a quote typically includes a citation, whereas a pull
quote does not. Lastly, quotes belong visually and semantically as part of the content, whereas callouts
are visually and semantically set apart from the content and are often moved to the left or right sides or
margins of a document. In the rest of this chapter, I will refer to pull quotes as callouts to avoid
confusing them with regular quotes.

Chapter Outline



  • Left Floating Callout shows how to create a callout and float it to the left.

  • Right Floating Callout shows how to create a callout and float it to the right.

  • Center Callout shows how to create a callout and center it.

  • Left Marginal Callout shows how to create a callout in the left margin using the
    left marginal design pattern.

  • Right Marginal Callout shows how to create a callout in the right margin using
    the right marginal design pattern.

  • Block Quote shows how to create a block quote with a citation that is
    automatically centered and styled with graphical background quotes.

  • Inline Block Quote shows how to render an inline quote as a block quote.

  • Inline Quote shows how to create an inline quote with a citation.

Free download pdf