When writing a very long article with lots of text and only few or no pictures to enlighten the story, the reader’s interest must be captured somehow to read the whole text. Sometimes the caption itself does not lure enough, so there must be something else to draw the reader’s attention. Placing a call-out box in the middle of the text, like the one below, usually captures the reader to find out the rest of the story. Creating such a call-out box with markup language is relatively easy and there are many techniques to get the desired effect. Some people use tables and others use background images.

In modern web publishing the content should always be separated from the design or layout. This means having the effective text separated from any markup that renders the visible layout. The content may be used for many other purposes and that’s why the design is not always desired to be brought with the stream. The intended visible layout should be provided according to the device capabilities currently displaying the content. Web publishing uses cascading stylesheets to acquire this. Stylesheets have all the information on how to lay out the content with various browsers of other devices, like mobile palm tops.

This article shows how to create a simple call-out box using plain markup language and cascading stylesheets. To get this working I have used only simple styling properties from the CSS level 1. This should ensure working samples even in older browsers not fully supporting the CSS level 2 properties. These sample code snippets show two different layouts of the simple call-out box: one displays the content inside a portrait frame and the other has its content inside a horizontal frame. Of course there are unlimited number of different layouts for call-out boxes and my article is only trying to give you an idea what you can do with stylesheets.

Let’s get started

My simple call-out box is based on three objects. First, there is a background object that forms the visible frame (see picture 1). This object also sets the width of the box and stands for a container for the other objects inside. The box is created using div tag, which creates a block level markup element. When setting the background color of an object it’s usually a good idea to define the foreground color as well. In fact, if you try to validate your CSS, you may get a warning if one of the properties is missing, so these two are usually defined as a pair. I have set the width of the framing object in pixels, but one can have whatever allowed unit. Below is the stylesheet code for the background object.

The next phase is to create an effect of open top and bottom ends. If you look at the final box in picture 4 you’ll see the open endings. To gain this effect I use another box inside the background object. This box is also created with a div tag and is classified as portrait. I set the width of the opening using the left and right margin of the portrait box (see picture 2). In this example the margin is set to 30 pixels each. The inner box does not have background color, which makes it inherit the color from its ancestor, or putting this simple: the underlying background color shows through. The final step in this phase is to define the endings. Using the top and bottom border properties one gets the effect of an opening at both ends. My sample has 10 pixels wide top and bottom borders with white color, or whatever color the page background would be. Below is the stylesheet code for the inner box.

The third object in my stack is the actual text paragraph. The text block resides on the top of the stack and originally inside the inner box created in the previous phase. Now that the inner box is narrower than the underlying background object we need wider text paragraph to get the effect of a white box. I have widened the text block using negative margins. Although negative margins are allowed they may not render correctly in all browsers and this is considered as an implementation-specific limit. A quick test with major browsers shows, however, that negative margins are handled correctly. The top and bottom border width is now 10 pixels and to keep this width on the left and right I have used 20 pixels negative margin. The overall margin of the inner box is 30 pixels on both sides, so this leaves 10 pixels to show through from the background object (see picture 3). Below is the stylesheet code for the text paragraph.

Our call-out box is ready for the text (see picture 4). The text in a call-out is usually one sentence, just enough to tell the reader the essentials and still keeping it short enough to read it at a glance. I have set the width of the box explicitly, which adjusts the box height automatically with longer and shorter texts. Below are some styling properties to display the text block neatly.

The basic approach of this article is to show how to separate the content from its layout. Using the stylesheets you can change the colors and border widths in one place, without touching the markup at all. Rendering the page in a browser becomes quicker as the browser caches the stylesheet and reads only simple tags in the page markup. Next pages loaded in the browser from the same domain needs not reloading the stylesheet information as it’s already in the browsers cache.

How about horizontal box

To make a horizontal call-out box, like one on the right, is almost as simple as the portrait one. Building up the box starts from the background object like in the previous example (see picture 5). Inside this box I have placed another box which has 10 pixels margin on the left and right. To make an effect of a framing border I have 10 pixels wide top and bottom border with the background color. Top and bottom padding is set to 20 pixels to keep the text block height smaller than the inner box (see picture 6).

These stylesheet properties set up the inner box for the horizontal call-out.

Next, the paragraph block is placed on the top of the stack (see picture 7). Again, I have used negative margins on the left and right to get the effect of an opening on both sides. This time I have used 10 pixels negative margin which stretches the text block sideways overlapping the underlying box. Finally, the call-out box is now ready for the text (see picture 8).

These stylesheet properties set up the text block for the horizontal call-out.

Using the box

Placing the call-out box in the right place in the text is perhaps the most important step in the publishing process. Below is sample markup to show how to use the call-out box. See also the sample call-out boxes around on this article page. The first one draws a portrait box and the other renders a horizontal one.

Final words

You should be careful when playing with margins and padding as browsers may render these values differently. What comes out correctly in one browser does not guarantee the same results with some other browser. Therefore you should only use basic CSS properties with acceptable values and keep everything as simple as possible. Now, you are ready to make an attention to your readers.