CHAPTER 19 ■ CALLOUTS AND QUOTES
Inline Block Quote
Problem You want to create a block quote inside a paragraph.
You cannot use
because it cannot be embedded in a paragraph since it is a
block element. You should not use theelement, for the reasons cited in the discussion
of the Inline Quote design pattern.
Solution You can embed the block quote in instead of
or
. You can use display:block on the span and all child elements to display them as
blocks. This is the key ingredient of this design pattern. Once all the elements are displayed
as blocks, the rest of the rules work like the Block Quote design pattern.
Pattern^
HTML ^
QUOTE
MORE QUOTE
CITATION
CSS
.blockquote { display:block;
width:+VALUE; margin:+VALUE;
position:relative; left:±VALUE%;
padding-top:+VALUE; padding-left:+VALUE;
background:url("FILE.EXT") no-repeat top left; }
.blockquote span { display:block;
padding-bottom:+VALUE; padding-right:+VALUE;
background:url("FILE.EXT") no-repeat bottom right; }
.blockquote cite { display:block; }
Location This pattern works in any inline context.
Tips You can insert line breaks to simulate separate paragraphs within the quote.
It is better to usefor block quotes because search engines and document
processors understand the meaning of. Search engines give greater
importance to content inand .
Related to Center Callout, Block Quote, Inline Quote; Display, Block Box (Chapter 4); Width (Chapter
5); Margin, Padding, Background (Chapter 6); Relative (Chapter 7); Offset Relative (Chapter
8); Blocked (Chapter 11)