#screenplay tutorial

Some time back I posted a tutorial for how to format CSS and HTML for a screenplay on AO3, but since then I have improved upon it and I wish to now share with you all the (hopefully somewhat better) new version.

I previously had a significant problem with the spacing of certain elements, which would end up breaking the formatting. So recently I spent two days studying and trying code after code until I got it right.

Note that though this formatting makes the screenplay look authentic enough on a computer monitor or on mobile in landscape mode, it does not (in my experience) tend to show up well in portrait mode. This version is at least readable in portrait mode, however, whereas the old version was not. Still, you might like to make an author’s note mentioning that readers in portrait mode may need to use the “hide creator’s style” button, which will take away the formatting:

Okay, let's get to work! First you are going to have to create a new AO3 work skin. Name it whatever you like, then insert this code:

#workskin p { font-family: "Courier Prime", Courier, monospace; text-align: justify; text-justify: inter-word; }

#workskin p { margin-left: 5%; }

#workskin p { margin-right: 15%; }

#workskin .indented { padding-left: 15%; padding-right: 25%; text-align: justify; text-justify: inter-word; }

#workskin .par { display: block; padding-left: 15%; padding-right: 25%; }

#workskin .character { display: block; padding-left: 25%; }

You can adjust things like the margin and padding percentages to fit your own style, of course!

Now comes the fun part. After you have written your script, make a new draft using your screenplay skin. Then get onto the HTML editor.

The SHOT, SCENE HEADING, and ACTION elements will be left alone. The only tagging necessary for them is < p > (close up the < and >, of course... Tumblr is giving me a hard time about showing it as it really should be) for paragraph transitions. But do be sure to use the < p > tag, or it will break the formatting.

Next are the CHARACTER, PARENTHETICAL, and DIALOGUE elements... which are a bit more involved.

Before blocks of character/parenthetical/dialogue, you need to put the following tag (with closed up < & >): < div class="indented" align="left" > . Note that if there is more than one Character involved with no action breaks in between (in other words, if there is a conversation going on), you do not need to put the tag between each character, just before the first one. Like so:

And be sure to close it back up after the blocks of conversation with < /div >

Next up is CHARACTER, which, as you can see above, is tagged: < p >< span class="character" > CHARACTER NAME< /span >

Notice that there are no line breaks between the < /span > and the dialogue. Due to the nature of < span > if you try to put a line break in there it will turn it into a paragraph break, which doesn't work well for the screenwriting thing. I am sure there is a workaround, but that's what I got for the time being!

Now we come to PARENTHETICALS, which are the bits of action within dialogue:

To tag those, once again do not make a line break, but simply insert this: < span class="par" > then close it after inserting the parenthetical with < /span >

It might be easier to simply visualize, but note that as a personal preference I tend to italicize my parenthetical elements with < em >... you don't have to, that's just my style:

And that is basically it! If you would rather just look at the code than to try and figure out what I was trying to explain (I am not sure I did a good job of that!), here is a basic visual:

This:

Should get you this:

Or something similar, anyway. It may vary on your screen. If you would like to see a live example of how it will look on your monitor or with your device, you can click below to get to a small fic I have formatted this way (it isn't the story sampled above, however, since that is a WIP I have not posted anywhere yet!)