How to Post Your WriterDuet Script on WordPress

WriterDuet is an amazing and (for many uses) FREE script writing suite. We use it to write the scripts for our audiodrama, Parasitecology, with extended scene notes for foley and ambience, that later serve as transcripts for each episode. It even allows for multiple export formats, including PDF, Rich Text Format, and HTML. Okay, it’s got an HTML export, why am I even bothering writing this post then?

Because while WriterDuet’s HTML export is pretty cool on its own as a standalone page, it’s a little more difficult to incorporate into your existing website pages, using your site’s design.

Here’s an example, with the raw view of the HTML page generated by WriterDuet.

Looks pretty good, and pretty much exactly like it does inside WriterDuet. Courier font, proper indentation for Character names, Dialog, Scene Notes, etc. Even has a cool little control that lets you change the font for readability — something I would need to clean up if I’m being consistent with my site design, but still — pretty cool. Okay, so what if I cut and paste from that browser window into a new post on my WordPress site. Let’s preview it, shall we?

Uhn. Note that I’m using a “classic” WP editor block here (trust me, in this case it will look worse with the new Gutenberg style blocks). Well, some of the bits are ok, such as the all caps for character names, act text, scene locations, etc. But I’ve lost almost all of the other formatting, such as centering and indentation. That’s because the generated HTML is relying on stylesheets specified in the full HTML page, declared in a section that doesn’t get copy and pasted in.

To correct that, we need to add the CSS that makes the screenplay look good into our WordPress site so everytime we post one the styling gets applied automatically. We start by going to the WordPress admin interface and going to the Appearance > Edit CSS/Additional CSS section. This is place where an administrator can add additional CSS that doesn’t require going into the WordPress theme and manipulating files. Here’s ours – it already has a few lines in it; yours might have more, or be blank.

Then we add some of the CSS styling from the WriterDuet export. In this case, we need some of the font declarations (but not all, since we’re not offering additional options), as well as the styling for the script container and screenplay line type classes, though not some of the ones for the elements we’re deleting (such as the font selector at the top of the page).

Also, while it’s not terribly likely you have many HTML elements with a class name of, say, “Dialog” on your site, you probably do have horizontal rules that your designer would have a fit if you messed up the margins on, so I’ve also narrowed the specificity of those styles to those within the script container which your screenplay text will have surrounding it if you cut and paste the whole thing. To save time, I’ve edited the CSS down to what you need below.

#script {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 615px;
        font-size: 12pt;
        line-height: 12pt;
        font-family: "Courier Prime", "Courier New", monospace;
        word-wrap: break-word;
    }
    
    @media screen and (max-width: 615px) {
        #script {
            margin-left: 0;
            margin-right: 0;
        }
    }
    
    #script .bold_sluglines .Slugline { font-weight: bold; }
    
    #script .Action, #script .Slugline, #script .Shot, #script .Act, #script .Transition, #script .Text, #script .Character, #script .Paren, #script .Dialog {
        white-space: pre-wrap;
    }
	
    
    #script .Slugline, #script .Shot, #script .Act, #script .Transition, #script .Character  { text-transform: uppercase; }
    #script .Act { text-align: center; text-decoration: underline; }

    #script .Action, #script .Text, #script .Act, #script .Slugline, #script .Shot, #script .Transition { margin-top: 1em; max-width: 615px; width: 100%; }
    #script .Character { margin-top: 1em; max-width: 385px; }
    #script .Slugline, .Shot { margin-top: 2em; }
    #script .Transition { text-align: right; }
    #script .Paren { margin-left: 15%; max-width: 245px; }
    #script .Dialog { max-width: 355px; }

    #script .Character { margin-left: 34%; }
    #script .Paren { margin-left: 23.5%; margin-right: 15%; }
    #script .Dialog { margin-left: 17%; margin-right: 10%; }

    #script .Clear { clear: both; }
    #script .Dual { float: left; width: 48%; }
    #script .Left { padding-right: 2%; }
    #script .Right { padding-right: 2%; }
    
    #script .Dual .Character { margin-left: 0; text-align: center; }
    #script .Dual .Paren { margin-left: 9%; margin-right: 9%; }
    #script .Dual .Dialog { margin-left: 0; margin-right: 0; }
    
    #script .page_num {
        text-align: right;
        height: 0px;
        top: -12px;
        position: relative;
    }
    
    #script hr {
        margin: 28px 0px 28px 0px;
    }
    

We take that bit above, paste it below any other CSS declarations already in the custom CSS section, and hit publish. Now, we just cut that little font selector at the top of the imported text in the WordPress post and preview the page again…

And that looks like our screenplay. Cool! If we want to get fancy, we can edit those styles and use the fonts on our website as well, but for now we’ve got a well-formatted and readable solution.