Semantics and Style :: Markup for Dialogue

30Dec2006 [webprog]

In an effort to create something as portable as possible, I wrote my latest screenplay in near-plain text (using Markdown Syntax). The aim was to have a document I could easily convert to html and style according to the screenplay formatting guidelines given us by the uni. I ended up cheating somewhat on the semantics, both for my sanity (given the markdown syntax) and because I couldn't find any decent guidelines on marking up dialogue in xhtml1 anyway.

What I ended up with is still somewhat meaningful, so I think I did alright:

• h1 = Scene headings
• h2 = Character (ie, the character speaking)
• h3 = Dialogue description
• h4 = Scene transition
• blockquote = Dialogue
• (and plain text for scene directions)

Both h3 and h4 aren't always used, so it does break the outline a little, but generally works, in that it still makes sense unstyled. More importantly, each element can be targetted easily, so it's easy to write up some css rules that push the elements into the correct locations, even for printing (with the limitation that I can't predict page-breaks properly, so I did have to manually insert a few line-breaks when it came to printing it up).

But it still offends my sensibilities somewhat - using headings for things that aren't headings is just bad. And it'd be good if I could semantically indicate the link between the speaker and the dialogue. So I've been exploring some xhtml1 syntax in an effort to come up with an alternative markup. There are two options that get thrown around:

• Use <blockquote> with a <cite> inside it
• Use <dt> and <dd> (a stretch of the word 'definition', but seems to fit the spirit of the spec)

But both I'm uncomfortable with, mainly because there's no room for directions with either approach. Take an example:

TWITCH
(gruffly)
Your wallet

Using <hN>s as above, it comes out:

<h2>Twitch</h2>
<h3>(gruffly)</h3>
<blockquote>
 Your wallet
</blockquote>

If I encased all that inside a <blockquote>, I could put 'TWITCH' inside a <cite>, but it would be inaccurate, as '(gruffly)' isn't part of the quote, it's just a direction. Same goes if I put 'TWITCH' inside a <dt> and 'Your wallet' inside a <dd>; where would '(gruffly)' go?

I'm currently experimenting with an alternative:

<p><cite>Twitch</cite>
 (gruffly)
 <q>Your wallet</q>
</p>

Or, alternatively, which is especially useful for longer dialogue:

<p><cite>Twitch</cite>
 (gruffly)</p>
<blockquote>
 <p>Your wallet</p>
 <p>Or else</p>
</blockquote>

Both kind-of work. They feel a little better semantically, as I'm now citing the speaker, though it's annoying that xhtml1 has no way of linking a <cite> element to the related quote. (And it'd still be okay to stick an <hN> outside the speaker instead of the <p>, as it is actually a section heading of sorts)

And both can be styled properly, using some simple css:

p cite { display: block; }
p q { display: block; }

The above rules will make the speaker's name and their dialogue display in blocks (ie, on new lines) of their own, leaving the description on a line of its own as well. It's a simple matter of applying the correct margins to each element to get correct screenplay formatting.

There's obviously a tradeoff here though. Unstyled, the dialogue now displays on a single line (though using the <blockquote> element the whole way through will work around that), and browsers apply default styling to each of these elements differently. To get it right, the css will have to be modified to remove all the ugly browser defaults (eg, italics on cite, q or blockquote, and the generated "s :before and :after <q>s in non-IE browsers).

And of course, this syntax can't be mapped back to markdown syntax... I'm going to have to play around with some regex of my own to see if I can't reuse the syntax anyway (eg, replace all instances of <h2> with <p><cite>).

And a final note: using <q> or <blockquote> for dialogue gives me one further option: I can use the @cite attribute and create URIs for each of my speakers - eg, cite="http://wintermute.com.au/scripts/twitch-draft-2/characters/Twitch"

Am going to have to play with this further; I may end up with a combination of the two approaches (perhaps compromising some semantics for practicality); will report back when I come up with something that works (and I do like the idea of URIs for my scripts and characters, so am going to have to include that in the Django rebuild).