CSS Cookbook/Drama

Drama

Drama has a peculiar format that causes the proofers and the post-proofer extra work. If you have not done a play or looked closely at a play-script here is a nicely formatted example. The following are some of the special problems that drama presents:

Headings: Even a book with a single play will usually have a Preface or Notes section. Hence the Title of the first or only play is equivalent to a Chapter in a normal book, and should be marked <h2>. That pushes the title of each Act down to <h3>. Scene titles, if used, are now <h4>. All three levels can be styled to resemble the same titles as printed in the original book.

Dialogue: Dialog is basically a series of paragraphs. You can use a <p class="dialog">, with that class styled to set the margins and leading needed. Or, if dialog is the overwhelming majority of the work, you could style the default paragraph for dialog, and specify a classname for every other paragraph.

Poetic dialog (Shakespeare, etc.) is poetry. Some even has marginal line numbers. When the lines are long and the browser window is narrow, you want the browser to indent a folded line under the start of the line. These things are handled using the techniques for poetry: Mark each uninterrupted stretch of dialog as a poem, and each speech within it as a stanza.

Stage Directions Between Speeches: Stage directions on a separate line, e.g.

Enter Amanita, carrying a letter

are best treated as a special class of <p>, styled to resemble the original, which is typically italicized and centered.

Stage Directions Embedded in the Line: Some plays have directions in brackets or parens, (aside to Jeremy) embedded in the line. The proofers will have marked them for italics as required. In post-proofing you need to ensure consistent punctuation, especially checking for consistent use of small-caps when the original book used small-caps for character names, and check that the brackets or parens are not italicized.

Stage Directions At Line's End: Abbreviated stage directions are sometimes aligned to the right margin, often set off with a left-bracket. The simplest way to handle this is with absolute positioning: [They fight. Hopefully the lines of dialog are short enough that the right-aligned stage direction will not overlap on the text. If it might, enclose it in a paragraph of its own.

(Note in the example book linked above, these end-of-line directions have been moved onto their own lines and indented by a consistent amount under the dialogue.)

Character names: At the head of a speech, a character name is set off in some way: italicized, boldened, small-cap'd, underlined. Within italicized stage directions, names are printed roman. The proofers should have marked them to match the original text; you need to ensure that they are consistently marked.

Semantic Markup

The structure of a drama text is so regular, the markup so stereotyped, that you can consider using regular expressions to create semantic markup around different elements.

Semantic markup is simply markup that delimits meaningful elements (such as character names) with class names that reflect their meaning not simply their format. For example, once you know that all character names are consistently marked for appearance, perhaps with <i>...</i>, you can probably figure out a regular expression that selects every character name at the head of a speech, and converts it to a span with a classname, like <span class="speaker">...</span>. In a similar way, you could change all in-line stage directions to <span class="direction">...</span> (with embedded <span class="character">...</span> for characters' names).

A character name or stage direction styled with a span and a class name would look identical to one styled with explicit italics or bold. So why bother? The advantages of semantic markup are two. First, you could then change the format of every instance of a marked element (and only them) with a single edit. Want to reduce the font size of all character names? One change in the CSS. Second, a hypothetical scholar, some time in the future, would bless your name because she could do automated textual analysis based on your classnames.

Hemistichia

A problem that arises more often in verse drama and dramatic verse, but that can come up on any poetry, is the vertical break between metric feet. Here is an example from a play by Byron; first the ASCII etext:

    _Sar_. Why let it come then unexpectedly,
    'Midst joy and gentleness, and mirth and love;
    So let me fall like the plucked rose!--far better
    Thus than be withered.

    _Myr_.                 Then thou wilt not yield,
    Even for the sake of all that ever stirred
    A monarch into action, to forego
    A trifling revel.

    _Sar_.            No.

    _Myr_.               Then yield for _mine_;
    For my sake!

    _Sar_.      Thine, my Myrrha!

    _Myr_.                      'Tis the first
    Boon which I ever asked Assyria's king.

The poetic form is iambic pentameter. Byron is working under a self-imposed formal requirement that every line must contain precisely five feet. However, as an almost-modern dramatist, he strives to give his actors flexible, believable dialog. His solution is to split formal lines across speeches, sometimes down to single syllables.

In the original book, the typesetters dutifully spaced the text as shown here, and the proofers with fair consistency echoed it. (It needed tedious polishing by the PPer, too.)

The technical term for this typographical form is probably hemistich (sounds like "hemi-stick", meaning "half-line"). Hemistichs are easy to create in ASCII; you just hold down the spacebar until the text lines up. But how to do it in HTML?

One way would be convert all runs of spaces into runs of the same number of &nbsp; symbols. This could be done automatically with a regular expression replacement, but, first, it makes a horribly ugly file of HTML; second, if the user copies the text, the extra spaces are copied; and third, there is no reliable relationship between the blanks in a monospaced font and an indent in a proportional font. In the following example, the first speech by Myrrha is indented with 17 &nbsp;, equal to the spaces in the ASCII above, but it doesn't line up.

Sar. Why let it come then unexpectedly,
'Midst joy and gentleness, and mirth and love;
So let me fall like the plucked rose!—far better
Thus than be withered.

Myr.                 Then thou wilt not yield,
Even for the sake of all that ever stirred
A monarch into action, to forego
A trifling revel.

Sar. No.

Myr. Then yield for mine;
For my sake!

Sar. Thine, my Myrrha!

Myr. 'Tis the first
Boon which I ever asked Assyria's king.

The remaining hemistichs are indented by the insertion of small transparent sofa-pillows. These virtual sofa-pillows are coded like: <span class="s8"> </span>. The class is defined so: .poem .s8 {display:inline-block; margin-left:4em;}