The play’s the thing

Image for The play’s the thing
Image for The play’s the thing
Image for The play’s the thing
Image for The play’s the thing

Marking up a Shakespeare play

An assignment for my students will be to create an eBook from a Shakespeare play. I thought I should go through some options of how a play could be marked-up with HTML5 and styled with CSS.

The texts of all of Shakespeare's plays are in the public domain and available from the Project Gutenberg web site as well as some other locations. The quality of these texts is variable.

I have tried various ways to use appropriate HTML, and it was not my intention to reproduce anything like the the First Folio that you see here, but rather make it clear which character is speaking which lines.


The first issue is to take the text and use various search and replace techniques to add the mark up. My first inclination was to take the character names and tag them in a block element, so that they would potentially, be on a separate line. This is the first decision, because as you can see, even with the First Folio, the character names (abbreviated) are on the same line as the first line of the speech. If you wanted to stick to this arrangement, then wrap the character name in a <span> tag.


Most downloadable texts that you will find, have the character names in UPPERCASE. I don't think this is good practice, since you have no option for changing this style. I used a simple grep search pattern in BBedit to change to titlecase like this:


replace with


Of course it makes sense to do a bit more to this while we are about it so replacing with this is more sensible:

</p>\r<p class="character \L\1\2">\u\1\L\2</p>\r<p>

I won't detail the explanation here but essentially we are taking the character name, changing to titlecase and wrapping in a paragraph with a class name 'character' as well as the class name of the character (in lowercase). This will enable us to style the characters separately.

The result of this is to have the markup as in this example:

<p class="character bottom">Bottom</p>
<p>First, good Peter Quince, say what the play treats on; then
read the names of the actors; and so grow to a point.


Using grep in BBedit is immensely powerful and really required if you don't want to do a lot of hand editing. Of course, the objective of all of this is to build an eBook, so we may be able to use the grep that is built into InDesign.

The Markup

You can see 2 possible methods of markup then (there may be more possibilities); in the first case I use paragraphs and some span tags. With this technique, it is difficult to indicate the current character beyond the first paragraph. In the second method I have used a <table> and provide separate columns for the character name and the lines spoken. 

Although purists may regard a table as a semantically incorrect (is this data?), this method seems to be the better of the two.

A third option would be to use <div> tags and then float the spoken lines to the right. This is a possibility but using grep to markup will be more difficult and floating requires explicit widths.

CSS position could be used, but since I am targeting eBook devices, 'position' is not always supported.

Download the 2 versions and view the markup:

Version 1 with paragraphs

Version 2 with a table

Posted on 18 Jul around 11am


Commenting is not available in this channel entry.