• View
• Edit
• History
• Attach
• Print
• Backlinks

FilmScript

Creating a Style for a Film Script

The Goal of this mini project is enabling the easy markup for a film script within a wiki. This will be based on style sheets and mainly .classes for list items.

A way that might work, is adding list classes to the cascading style sheets and then in your markup to the film script, reference these classes in your tags.

Currently I think a good way to enable this within PmWiki would be to base it off an existing idea written by screenwriter John August. In his blog he developed the screenwriting CSS and .classes which used list items rather than divs or something else. It seems to be an extremely easy way to format a script, especially if the markup could be added to pmwiki.

John August's Blog Entry of CSS Screenwriting

Another resource, in case development of this changes some, is the extension for mediawiki that formats for film scripts.

• mediawiki screenplay extension

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: (pulled directly from John's site)

.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;
}

He 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.

Comments

See discussion at FilmScript-Talk