jump to navigation


How To Do A Print-Style Callout June 21, 2006

Listen to this article (Listen to article)

Callouts are done with a combination with CSS and various elements.

Pick up pretty much any print magazine (remember what those are?) and you’ll probably see two graphic elements in use that are created with text. One is a blockquote, which quotes someone else. The other is a callout, which quotes the article you are reading.

Both elements are used for the same two reasons:

(1) Fill up space to avoid large blank areas on a page.
(2) Break up visual monotony in a long article by adding a touch of graphic element.

Callouts are done with CSS.

The first reason isn’t as relevant for websites as it is for print, but the second is. While blockquotes can be done very easily using the XHTML tag pair <blockquote> </blockquote>, callouts have no predefined tag. You can, however, achieve the same effect using a combination of CSS, a div element, and a paragraph p.

There are two example callouts somewhere on this page. The first example has the text centered. In the second example, the text is left-aligned. While you can have regular text wrap around a callout, it’s difficult to position the callout straddling two columns. (The CSS-3 specification is supposed to have a “columns” feature with which you can make text flow into multiple columns.) You could probably do it using absolute positioning, but then it probably wouldn’t work in all browsers.

The width of all callouts in my examples are controlled via the div’s class CSS code. The div’s CSS also controls the margins and which side to float the whole callout. If you need callouts of different widths, declare different div classes in the CSS and change widths there.

All other callout properties are controlled in the paragraph’s CSS class, including callout border properties, font, font size, etc. Here is the CSS code I used: 

/* Text Callouts */
div.callouts {
  float: right;
  width: 170px;
  margin-left: 10px;
  margin-bottom: 5px;
}
	
p.callout {
  font-family: Verdana, Helvetica, Arial;
  font-size: 1.4em;
  color: #009900;
  margin-left: 10px;
  border-top: 10px solid #bbbbff;
  border-bottom: 5px solid #eeeeff;
  padding-left: 5px;
}

The CSS code should go into your main stylesheet, regardless of which blogging platform you are using. I’ve used Wordpress 1.52, but I can’t see why it shouldn’t work in others such as Movable Type or Textpattern.

Here is some sample XHTML code for the callout. I’ve intentionally inserted line breaks, else the code will not appear properly. You’ll probably want to remove these line breaks when you do your own callouts. 

<div class="callouts">
<p class="callout">
Callouts are done with CSS.</p>
</div>

This code should be inserted in front of the paragraph(s) in your post where you want to place the callout, regardless of whether you are floating right or left.

Note that this isn’t necessarily the only way to do a callout, but for fluidity and flotation, etc., I find this the simplest. CSS is still frustrating because it’s not properly supported in all browsers. So what I see in Firefox 1.5x may not be what you are seeing. Good luck with your own experiment.



Comments»

1. Mark - August 11, 2006

Hey I just wanted to thank you for this. It was just what I was looking for !

2. rdash - August 11, 2006

Hey Mark, glad it helped you. I see you’ve implemented callouts on your site :)

3. Jonathan Maus - September 28, 2006

I put the code in my styles.css file but it didn’t work…so I put the code in my header.php file and it worked like a charm.

Thanks.
(I’m using WP 2.0)

–Jonathan

4. rdash - October 8, 2006

Hi Jonathan. I only tried it with WP 1.52. There may be some code conflicts in WP2.0. Thanks for updating me with your experience.

5. RagnoRosso - October 10, 2007

Hi, Thanks for the article. My main issue is that using this method requires placement of the callout paragraphs within the main body of text. This is absolutely fine for most users who can see the styled layout, but a screen reader for the visually impaired will read out the content in the order it appears in the HTML source code and, chances are, this will sound very odd if the callout content is out of direct context with its pre- and succeeding paragraphs. I realise that I could attempt this with CSS positioning but that throws up problems with browser compatibility and more. Do you have any suggestions for creating this layout without sacrificing accessibility?