CHAPTER 19 ■ CALLOUTS AND QUOTESLeft Floating Callout
Problem You want to remove content from the flow and display it prominently to the reader on the
left side.
In general terms, you want to pull content out of the flow to emphasize it.
Solution A callout is removed from the normal flow and styled to make its content stand out to the
user. It usually has a larger font, margins, borders, and background around the outside to
set it apart from surrounding content. Callouts can include all kinds of content, such as
quotes, key phrases, attention getters, and so on.
You can assign an inline element to the callout class. You can use float:left to float the
callout to the left. You can use padding to put distance between the callout’s content and its
border. You can use position:relative to position the callout so you can move it. You can
use top to move the callout up or down. You can use margin-left to move the callout to the
right. You can use margin-right to put distance between the callout’s right border and
external text. You can use margin-top and margin-bottom to put distance between the
callout’s top and bottom borders and external text.
Pattern^
HTML
CSS .callout { float:left; position:relative;^
width:+VALUE;
padding:+VALUE;
margin-top:+VALUE; margin-bottom:+VALUE;
margin-left:±VALUE; margin-right:+VALUE;
top:±VALUE; }
Location This pattern works on any element.
Limitations If you left-float any other elements close to where the callout is floated, they may stack next
to each other. This would likely detract from the callout effect. Floats tend to bring out bugs
in browsers.
Tips A callout should be positioned in the text where it makes sense if it were read as part of the
text. A screen reader will read it where it occurs, and a browser that does not support
absolute positioning will display it inline where it occurs. I recommend placing the callout’s
markup immediately after the text it is quoting. Screen readers will read it twice, which
emphasizes the callout aurally through repetition just like it is emphasized visually.
Related to Right Floating Callout, Center Callout; Floated Box (Chapter 4); Width (Chapter 5); Margin,
Padding (Chapter 6); Float and Clear, Relative Float (Chapter 7); Offset Float (Chapter 8)