• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

John August

  • Arlo Finch
  • Scriptnotes
  • Library
  • Store
  • About

New CSS template for screenplay formatting

October 20, 2004 Formatting, Geek Alert

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.

EXT. FOREST / ELSEWHERE - DAY

Susan is on a cell-phone call. She smiles at Melissa, who walks by with two cups of coffee.

SUSAN (V.O.)

Right now, this is probably our top pilot. But things change.

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.

Related Posts

  1. Using parentheticals
  2. Formatting and software
  3. A character sings a song

Primary Sidebar

Newsletter

Inneresting Logo A Quote-Unquote Newsletter about Writing
Read Now

Explore

Projects

  • Aladdin (1)
  • Arlo Finch (27)
  • Big Fish (87)
  • Charlie (39)
  • Charlie's Angels (16)
  • Chosen (2)
  • Corpse Bride (9)
  • Dead Projects (18)
  • Frankenweenie (10)
  • Go (30)
  • Karateka (4)
  • Monsterpocalypse (3)
  • One Hit Kill (6)
  • Ops (6)
  • Preacher (2)
  • Prince of Persia (13)
  • Shazam (6)
  • Snake People (6)
  • Tarzan (5)
  • The Nines (118)
  • The Remnants (12)
  • The Variant (22)

Apps

  • Bronson (14)
  • FDX Reader (11)
  • Fountain (32)
  • Highland (72)
  • Less IMDb (4)
  • Weekend Read (34)

Recommended Reading

  • First Person (87)
  • Geek Alert (147)
  • WGA (123)
  • Workspace (19)

Screenwriting Q&A

  • Adaptation (66)
  • Directors (90)
  • Education (49)
  • Film Industry (487)
  • Formatting (129)
  • Genres (90)
  • Glossary (6)
  • Pitches (29)
  • Producers (59)
  • Psych 101 (117)
  • Rights and Copyright (96)
  • So-Called Experts (47)
  • Story and Plot (170)
  • Television (164)
  • Treatments (21)
  • Words on the page (238)
  • Writing Process (178)

More screenwriting Q&A at screenwriting.io

© 2023 John August — All Rights Reserved.