Character names in a re-fowable Shakespeare Play

Image for Character names in a re-fowable Shakespeare Play

A Midsummer Night's Dream first folio

Image for Character names in a re-fowable Shakespeare Play
Image for Character names in a re-fowable Shakespeare Play

Get the colours into the swatch first

Image for Character names in a re-fowable Shakespeare Play

You can organise all of the exporting tagging together

Image for Character names in a re-fowable Shakespeare Play

InDesign page with the character names left aligned and offset by negative baseline shift

Image for Character names in a re-fowable Shakespeare Play

In Adobe digital editions, the baseline shift is ignored.

Image for Character names in a re-fowable Shakespeare Play

This is how it should look

Image for Character names in a re-fowable Shakespeare Play

Editing all character styles export tags together

Image for Character names in a re-fowable Shakespeare Play

Adding your edited CSS file to the exported ePUB file

When building a Shakespeare play as a re-flowable ePUB3, one important design choice will be the display of the character names in relation to the words they speak.

In published works of the play this varies a lot and you can see here how the play was presented in the first folio.

The real issue for us is to try to achieve the arrangment of elements using InDesign, so that a print version may be possible as well as an eBook version from the same file. So what are the options?


In an earlier post I discussed the way that we can markup the play with HTML, but InDesign may produce different HTML markup inside the ePUB. We can use various possible methods with InDesign to achieve our goal.

Using Paragraph Styles for Play Character names

Our original text may have character names in the same line as the first words that they speak - thus:

Theseus Now, fair Hippolyta, our nuptial hour
Draws on apace; four happy days bring in

This needs to be changed to:

Now, fair Hippolyta, our nuptial hour
Draws on apace; four happy days bring in...

Now we must decide is if we want to have a unique style for each of the different characters. In other words, is it enough to provide the same appearance for all names or are we looking to give different colours to each name (Theseus being brown, Helena blue etc)? There may be other long term benefits to having characters in different styles (and thus different markup), because we could even have small images built into the style.

In this example, I am going to presume that we need each character in the play as a different colour.

So for each named character we need to create a new colour in our InDesign swatch. Then we need a paragraph style for each character name. Remember to use the 'Export tagging' pane to provide the p tag with a class name. Note: you can do this to all styles simultaneously in the 'Edit All export tags' window - see image here.

To achieve the appearance that you see in this screen shot from InDesign, I have used a negative baseline shift available under the Advanced Character options.

You will observe in the next image that this does not give us the result in Adobe Digital Editions. In fact if we observe the CSS for the character 'Theseus', there is nothing that will achieve this positioning.

Changing the CSS in the ePUB file

In the styling language of CSS, there are 2 ways to move an element outside of the normal flow; with position or with float. Only some devices / reader will support position, so we must use float.

The CSS for thesius will need some modification so essentially we add


and to line up the name we need to make sure that the margin-top is zero.

Our verseline CSS also needs to have a zero top margin.

Oops! We have a problem

Yes, in order to separate the different spoken verses we had a top margin on the character element name. This is no longer possible if we want the name to line-up with the first line of their speech. All of our verses and floating character names follow on without space. What to do?

CSS has a very powerful feature known as the adjacent sibling selector, so we can use this ask that a verseline that follows a character element can have a top margin, thus provide a space above. Here is how we write this into our CSS file:

p.theseus+p.verseline {

theseus will also need that same top margin as well as the float:

p.theseus {

But hang on. Do I need to do this for all character names? Sorry, but with this method you do. In CSS you can create a comma deliminated list and do them all together:

p.mustardseed+p.verseline,p.prologue+p.verseline,p.quince+p.verseline {
p.peaseblossom,p.cobweb,p.moth,p.mustardseed,p.prologue,p.quince {

Wow, that seems like a complication!

There is another way, but back to InDesign we must go!

Using Character Styles for Play Character names

With this method, we will create an individual character style for the names in the play. Remember, in InDesign, character styles are the equivelent of HTML/CSS inline styles, so we will still need a paragraph style for the names, and this will provide the common styles for the names.

First, then we need a paragraph style - call it character, and utilise the negative baseline shift as before. All characters will be styles with this paragraph. Now we need a character style for each person's name in the play - changing only one attribute - the colour. This gives us what we want within InDesign (and thus PDF).

Now make sure we use the 'Export tagging' to give these character styles a span with a class name (the person name). see the image here 'Edit all Export tagging'.

The HTML markup in the ePUB

Here is a sample of the resultant markup:

<p class="character"><span class="theseus">Theseus</span></p>
<p class="verseline">Now, fair Hippolyta, our nuptial hour</p>
<p class="verseline">Draws on apace; four happy days bring in</p>
<p class="verseline">Another moon; but, O, methinks, how slow</p>
<p class="verseline">This old moon wanes! She lingers my desires,</p>
<p class="verseline">Like to a step-dame or a dowager,</p>
<p class="verseline">Long withering out a young man’s revenue.</p>
<p class="character"><span class="hippolyta">Hippolyta</span></p>
<p class="verseline">Four days will quickly steep themselves in night;</p>
<p class="verseline">Four nights will quickly dream away the time;</p>

The resulting CSS in the ePUB

Now, our CSS inside the ePUB can be altered like this:

p.character {


p.character+p.verseline {

This makes editing the CSS much easier.

Back and forth to InDesign after exporting to the ePUB

You may realise, that once you begin to make changes to your ePUB file after exporting from InDesign, then you cannot return to InDesign, to continue the work. Exporting from InDesign will overwrite the ePUB file.

There is a solution to this but with 2 important limitations!

  1. Avoid editing the HTML markup inside the ePUB. Individual XHTML documents should be left alone if possible. You can edit the CSS, though, and then we can re-use this CSS file.
  2. When using InDesign after editing the CSS, do not add more styles.

So, the general rule is; just make changes to the CSS after you have exported from InDesign.

Then you can attach this new CSS file to the subsequent exports from InDesign by adding this new CSS file within the export dialogue 'advanced' pane. See the final image here.

Posted on 14 Mar around 9am


Commenting is not available in this channel entry.