Beast-Blog.com
Writing Dialogue/Dialog on the Web

Is the dialogue (dialog) class semantic? Is it proper? I don’t know, but it’ll look right when writing dialogue on the web. Stories and other works are well served with a dialogue style paragraph. It’s ubiquitous in written works and literature throughout the print world so it serves the reader well to carry this style over to the web. According to William Strunk of Strunk and White’s The Elements of Style fame — which is arguably the authority on proper writing, a paragraph is a “unit of composition,” but when writing dialogue, it’s each unto its own, so to speak.

“In dialogue, each speech, even if only one word, is usually a paragraph by itself; that is, a new paragraph begins with each change of speaker.” The Elements of Style
Fourth Edition, Page 16, 4th Paragraph

How would that look on the web? Let’s see:

Pretty spaced out isn’t it? If books were written like that printing costs would go through the roof, especially those with a lot of dialogue. Many trees would needlessly die. In books the “paragraphs” of dialogue contain no spaces — padding or margin — above or below. These are dense paragraphs to save space and add to the readability.

So let’s take that to the web, being sure to add indentation to better mark the beginning of each new dialogue unit or paragraph. Like this:

So how was this done? Well aside from the cool box I used this mark-up:

<p class="dialog">"Time is running out; the end is near," shouted the doomsayer.</p>
<p class="dialog">"Don't be a fool, old man," the businessman replied.</p>
<p class="dialog">"But I have heard the prophets speaking of---" the doomsayer began.</p>
<p class="dialog">"Ah, shut up, profits are what I know best! What manner of fool are you out here on the street being a prognosticator of Armageddon? Are you an idiot? Get a job," the businessman scolded, cutting the old man off.</p>
<p class="dialog">"But..." the doomsayer said, then stopped.</p>

And I used this CSS:

p.dialog {
  text-indent : 20px;
  margin : 0;
  padding : 0;
}

This is a fine solution if writing a few lines of dialogue now and then, but if writing a lot of the stuff, it’d be better to containerize it, like so:

<div class="dialog">
 <p>"Time is running out; the end is near," shouted the doomsayer.</p>
 <p>"Don't be a fool, old man," the businessman replied.</p>
 <p>"But I have heard the prophets speaking of---" the doomsayer began.</p>
 <p>"Ah, shut up, profits are what I know best! What manner of fool are you out here on the street being a prognosticator of Armageddon? Are you an idiot? Get a job," the businessman scolded, cutting the old man off.</p>
 <p>"But..." the doomsayer said then, stopped.</p>
</div>

Then add some CSS to style the paragraphs within the .dialog-classed container. Like so:

div.dialog p {
  text-indent : 20px;
  margin : 0;
  padding : 0;
}

It’s a simple solution. Spacing the bodies of dialogue will still be separate from your regular paragraphs because those paragraphs will still offer their default margin and padding. If you have your paragraphs styled differently from the default removing this normal spacing, just be sure to add some margin-top and margin-bottom to the dialog container. Like this:

div.dialog {
  margin : 10px 0 10px 0;  /* Top, Right, Bottom, Left */
}

If styles are unsupported, the user will get the spaced out paragraphs or units, but it will still be proper.

“Happy writing,” Mike said.

Filed under Beast Ramblings, Do It CSS Style —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

How to Write Content for the Web »

Blah, blah, blah… »

Great News for Rotten Smellers »