New CSS template for screenplay formatting

UPDATE (2/26/09): This is an early draft of what would later become Scrippets. Check out that site for more up-to-date information. And you’ll notice that I ultimately did go back to using paragraph tags, rather than list items.

One frustrating part of discussing scripts on the internet is that the formatting is always wrong. Changing the typeface to monospace (such as Courier or Monaco) helps a little, but the indentations are still wonky.

Beginning with yesterday’s post, I’m using a new CSS style template I created to handle screenplay markup on the site. If you know know about CSS, it’s the way modern web pages are built, separating content from formatting. The rest of this post gets kind of technical, so you may want to bail out now.

Okay, geeks who are still with me:

Doing screenplay in CSS seems pretty straightforward. The base class (Screenplay) would handle the width of the virtual page, and make everything 12pt Courier. The individual elements would be .sceneheader, .action, .character, .dialogue, .parenthetical, and .transition.

My first instinct was to handle the elements with paragraph styles, like this:

<p class="sceneheader">INT. BOB'S DINER – NIGHT</p>

Unfortunately, paragraphs carry with them a bunch of problems. First, they’re the bread-and-butter of blogging programs like WordPress, so odds of choking the interpreter seem pretty high. And in order to use them, I would have to wrap them in <div> tags, which is another potential boondoggle.

So instead, I decided to define a new class of unordered list for the container class, and define each of the elements as list items. One issue that quickly comes up is line spacing. For screenplays, you need one blank line after a line of action or dialogue, but none after a character name.

In markup, this looks like this:

<code>
<ul class="screenbox">
<li class="sceneheader">EXT. FOREST / ELSEWHERE – DAY</li>
<li class="action">Susan is on a cell-phone call. She smiles at Melissa, who walks by with two cups of coffee.</li>
<li class="character">SUSAN (V.O.)</li>
<li class="dialogue">Right now, this is probably our top pilot. But things change.</li>
</ul>
</code>

Here’s the CSS code that does the job:

.screenbox {
    list-style: none;
    width: 420px;
    background: #eee;
    border: 1px solid #333;
    padding: 5px 14px;

}

.screenbox li { font: 12px/14px Courier, fixed; }

.sceneheader, .action, .character { padding-top: 1.5ex; }

.action { padding-right: 5%; }

.character { margin-left: 40%; }

.dialogue { margin-left: 25%; padding-right: 25%; }

.parenthetical { margin-left: 32%; padding-right: 30%; }

/* special case: dialogue followed by a parenthetical; the extra line needs to be suppressed */

.dialogue + .parenthetical { padding-bottom: 0; }

.transition { padding-top: 3ex; margin-left: 65%; padding-bottom: 1.5ex; }

I used a fixed width for the .screenbox (420 px), but the formatting looks okay for anywhere between 300 and 700 pixels. Everything else is handled by percentages for horizontal spacing, and ex heights for vertical spacing.

You’ll notice that .sceneheader is really no different than .action. I defined it so that if at some later date I decided to tweak it (for instance, adding scene numbers), the markup would already be there.

As always, anyone is welcome to use and modify this template as they see fit.