New CSS template for screenplay formatting
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.
Articles
October 21st, 2004 at 7:35 am
Thanks, John. I’ve been meaning to do this very thing, but you (thankfully) beat me to it
October 21st, 2004 at 3:53 pm
Textile enables you to write your style in shortcuts:
http://www.textism.com/tools/textile/
Also, what makes you choose a list style? Wouldn’t it be easier with a class selector for the box as well as the individual styles.
In any case, wonderful work, and a pleasure to study.
Thank you.
October 21st, 2004 at 4:31 pm
Thanks, Tom. I’ll admit I never gave Textile much thought, because I’m so enamored with Markdown. (I like how Markdown keeps the text relatively pure.) But Textile is certainly adept at applying CSS styles, which is what I need to do. I might try it out.
The individual .styles could be applied to something other than list items, but for the reasons I listed, I found list items worked well. That’s also a trend-du-jour in markup, using lists to the job of things that would otherwise be divs. Lists feel more like XML.
October 22nd, 2004 at 8:46 am
Hey John, great work on the CSS template! I agree with your choice to use list items rather than divs - I think it makes for cleaner code. If you get enough people to look at this, you might even set a new standard for Internet script formatting. Keep up the great work!
January 30th, 2005 at 6:04 am
This is really great, I’m using it on my own blog now. Just one thing I’d like to mention… my blog has White text in it’s main tags so text didn’t show up very well in the box. I added Black text to the code in this section, like so:
.screenbox li {
font: 12px/14px Courier, fixed;
color: #000;
Just in case anyone couldn’t work out why their own blogs were making the txt funny colours :o)
January 30th, 2005 at 12:14 pm
Good idea, FunkyPink. You can never guarantee what people will have set for their defaults.
February 21st, 2005 at 8:53 am
John…I’m really digging this. Your balance of science and art are refreshing…I have a question for you though that’s a BIT rudimentary:
Copy and paste your CSS into it’s own .css document, then do I just put that in my “THEMES” folder (I’m using 1.5 Strayhorn)? And while posting, and if I want to jump from the text of my entry to a sample of a screenplay, do I just invoke the new style sheet to do so? What’s the code for that?
I’m definitely a a newbie here, but am eager to learn!
Likewise, I think Markdown is amazing–I haven’t played with Textile.
And if you’re up to the upgrade, SpamKarma is working SWIMMINGLY well for my guarddog.
February 22nd, 2005 at 6:21 am
Hi John,
Have you checked out Celtx, an open source screenwritng and breakdown application? Scripts written with the application are styled with CSS, as is the script file created by the export feature.
Celtx
Cheers,
Steve Pick
May 7th, 2005 at 1:32 pm
Did you know Steve Pick means hard penis in norwegian?
August 5th, 2005 at 3:55 pm
Hi, I am trying to incorporate your screenplay template CSS style into my blog but it is not working right. Warren at Screenwriting Life says you and he use WordPress to create your blog? Could that be the problem? I am using the free Blogger.com (blogspot host.) I don’t think it likes me overriding the custom coding. Any ideas? All I want is a base post and I can keep copying/paste it in new entries, and just type over them. What I want to do is make my entire blog entry in script format.
September 28th, 2005 at 8:05 am
Rene –
You never actually linked to the relevant css style sheet. In your markup, you only have:
Here’s what you need to do:
If your eyes are glazing over at any point during this process, the technique may be a little bit beyond where’s you’re at right now. Doing a little research on CSS would probably have up and running.
September 29th, 2005 at 5:48 pm
Thanks for your response. I did incorporate screenwriting css in flicker.css.
I’ll try the import method and let you know how it fares.
October 2nd, 2005 at 7:12 am
Thank you SO much. I have always had difficulty typing up a script because it takes me forever to set up each seperate line. At the moment I have a school project to do a CSI episode on the duel between Alexander Hamilton and Aaron Burr. Obviously I have to have a script to work off of, so this is really a great tool. Again, thanks so much.
October 20th, 2005 at 12:21 am
[...] I’ve gotten several questions recently about how I display script pages in screenplay format on the site. I’d love to say that I created a very cool CSS template that does this, but I didn’t. John August did. Yeah, THAT John August. As if penning two blockbusters this year wasn’t enough. Head over to this post on his site to see how it all works! tags: blogs, screenwriting [...]
December 13th, 2005 at 1:30 pm
[...] There you have it. Now go toss up your own page on your blog, and leave a link to it in my comments section if you like (it may take awhile to show up, as I have to moderate comments with links). You can use John’s encoding technique, or you can just do a screenshot and crop the .jpg. [...]
December 14th, 2005 at 9:22 pm
Hi. If you want to use the CSS style sheet in blogger.com:
Just go into your template and directly underneath where it says:
copy Mr August’s .screenbox coding.
Then, when you write a post, go to the ‘edit html’ tab, paste in your page’s text, then use the markup on every element.
When you preview it, it won’t look right but once published it works.
December 18th, 2005 at 7:56 pm
[...] (It also forms a nice simian theme in combination with the previous post. Because we all know monkeys are cool. Although not as cool as pirates. Also, I apologise for the awful formatting. I couldn’t get John August’s style sheets to work in Blogsome.) INT. ZIM’S LAB - NIGHT [...]
December 20th, 2005 at 9:36 am
I had done something with this code on my blog and encountered a problem, that I then solved, and then left as is. Someone else (after I answered his question as to how to solve the same problem on his blog) suggested I post it here in the comments. And I thought, “Oh yeah, I guess I should, shouldn’t I?” So…
In Blogger, I was using the CSS code and then finding that there was an extra line stuck between each element of the screenplay. So there would be a blank line, for example, between the Character Slug and the Dialogue. Don’t ask me why this works, but try this:
Instead of entering each line beginning with the {li} tag and ending with the {/li} one (I’m using curly brackets instead of angled ones in here so it doesn’t format my comments like a list), bump the closing tag to the start of the next line. So it looks like this:
{li class=”sceneheader”}INT. OFFICE - DAY
{/li}{li class=”action”}JOEL (34) sits at his desk, typing a comment on John August’s blog.
{/li}{li class=”character”}JOEL
{/li}{li class=”dialogue”}I hope this helps some people…
etc.
February 4th, 2006 at 10:52 pm
[...] It occurred to me while I was customizing John August’s CSS screenplay templates for use on my site that I could “hide” text by making it the same color as the background, and then provide a way to “reveal” the text using my choice of either the :hover or :active pseudo-classes. This could potentially be useful in hiding spoiler information. [...]
February 23rd, 2006 at 10:52 am
I’m due for a blog redesign next month, and I’ve been wondering how I can incorporate screenplay snippets. This goes right to my designer!
March 1st, 2006 at 2:47 am
[...] …at least i feel that way. I tried to implement John August’s css screenplay formatting into my blog and after some trial and error… [...]
March 19th, 2006 at 10:15 pm
I came up with a variation, that goes back to using paragraph tags.
http://101squadron.com/2006/03/showing-off-finally.html
April 12th, 2006 at 4:17 pm
[...] Thanks to John August! Tags: css, john august, template, code [...]
April 14th, 2006 at 12:14 pm
I wanted to quibble with the use of lists in this context — “I know it works in practice, but what about in theory?” — but this W3C article helped me to relax:
http://www.w3.org/QA/Tips/unordered-lists
Even accepting lists, though, I have one nitpick. In the particular case of screenplays, shouldn’t we be using ordered lists rather than unordered ones? The former implies a sequence of events that the latter does not. Checking against:
http://www.w3.org/TR/html401/struct/lists.html
it seems clear to me that screenplays are much more like recipes than shopping lists.
Either way, thank you very much for this work (and the entire site).
October 5th, 2006 at 1:12 pm
Hi there. The CSS code works great on my site, with one important exception: it won’t hide the bullets in front of Character names or dialogue! I’ve got the list-style: none; designation in place, but regardless of what I do my site’s default bullets keep appearing.
Anyone encounter this before? Any help would be appreciated.
October 7th, 2006 at 3:36 pm
Can someone please give me step-by-step way to get this working in blogger. Assume (correctly) that I’m an idiot.
Thanks.
October 7th, 2006 at 4:16 pm
I guess I should be more specific:
Exactly where in the template do I paste John’s .css file?
How does doing this effect regular posting?
Note: I use Safari, so I don’t get an ‘Edit HTML’ tab in blogger.
Thanks
October 24th, 2006 at 9:00 am
Never mind… I pasted it into a style thing and it worked.
When you type the script into your blog, do you have to add the codes to every line like in the EXT. FOREST example above?
November 1st, 2006 at 1:43 pm
Been looking for something like this for a while now - it looks really simple and effective! Just wondering whether things would look right when it’s printed - I don’t think the margins et al are correct, has anyone come up with solution for this?
November 1st, 2006 at 1:52 pm
[...] I found JonhAugust.com whilst searching for formatting information and I discovered he has made a CSS file which can format your website to look like a script. The blog itself is very informative and shows some interesting insight into the thinking and previous history of someone who has been working in Hollywood for a number of years. It makes interesting reading and there is also a handy ‘Ask me a question’ link whereby you can get some advice from an experienced scriptwriter. Related Articles [...]
December 29th, 2006 at 10:04 am
[...] As always, I enjoy using web based software for doing just about anything. I checked out PlotBot and ScriptBuddy. Then I headed over to checkout John August’s Sreenplay CSS. Ultimately, I see hope within PlotBot. PlotBot faces issues however with: [...]
January 2nd, 2007 at 3:53 pm
[...] I will be using John August’s screenplay css, with the minor manbyte edit, and going from there. [...]
April 25th, 2007 at 8:14 pm
[...] Celtx adds(thank-you to beautifulSoup) , and display it in nicely formatted HTML via CSS (thanks to John August for some of his ideas). I wanted to be able to offer a way for readers to comment on the [...]
June 14th, 2007 at 8:20 am
[...] been examining the New CSS template for screenplay formatting at johnaugust.com, and it looks really cool — but more geared for presentation than for [...]
September 12th, 2007 at 8:34 pm
Do you see an advanatge in using CSS over LaTeX?