Dialogue

From DPWiki
Jump to navigation Jump to search

This is an HTML example for post-processors. It shows a way of formatting Drama when the speakers' names are to the left of uniformly-indented dialogue. The method uses a Definition List (<dl> <dt> <dd>) and some css.

Disclaimer: This method hasn't been tried [by me] with a full-blown Drama or Metrical Drama project, and I have no idea whether or not it would be a feasible or acceptable way of doing an entire Play.


This image of the original text was part of a chapter sub-heading:

Dl-dialogue.png


First, let's just format the four lines of actual dialogue:

CSS FOR DIALOGUE

.in4    {padding-left: 4em;}
.smcap  {font-variant: small-caps;}
dl      {margin: .5em auto .5em auto;}
dt      {float: left; clear: left; text-align: left; padding-top: .5em;}
dd      {padding-left: 7em; text-indent: -2em; text-align: left;}
dd.iq   {padding-left: 6.6em;}
dt+dd   {padding-top: 0.5em;}

Without the "float," the speakers' names will be on lines of their own, rather than on dialogue lines. The first css "dd" moves the dialogue to the right of the speakers' names and indents wrapped lines. The second one adjusts for the quotation mark on the first dialogue line and the third adds some white space between speakers.

HTML STEP 1

<dl>
  <dt><span class="smcap">Barnardine.</span></dt>
    <dd class="iq">"I have been drinking hard all night;</dd>
    <dd>I will not consent to die this day, that's certain.</dd>
  <dt><span class="smcap">Duke.</span></dt>
    <dd>O, sir, you must: and therefore I beseech you,</dd>
    <dd>Look forward on the journey you shall go."</dd>
</dl>


It's easy to add the poetry above the dialogue so that it lines up: just mark it as dialogue, with &nbsp; as a placeholder for the non-existent speaker's name:

HTML STEP 2

<dl>
  <dt>&nbsp;</dt>
    <dd><span class="in4">"What need I fear of thee?</span></dd>
    <dd>But yet I'll make assurance doubly sure,</dd>
    <dd>And take a bond of fate: thou shalt not live,</dd>
    <dd>That I may tell pale-hearted fear it lies,</dd>
    <dd>And sleep in spite of thunder."</dd>
  <dt><span class="smcap">Barnardine.</span></dt>
    <dd class="iq">"I have been drinking hard all night;</dd>
    <dd>I will not consent to die this day, that's certain.</dd>
  <dt><span class="smcap">Duke.</span></dt>
    <dd>O, sir, you must: and therefore I beseech you,</dd>
    <dd>Look forward on the journey you shall go."</dd>
</dl>


Many normal poems in this project had attribution lines, and those poems were centered, so it was easy to center this dialog and add the attribution by using the same css (mostly taken from Best Practices; "stanza" isn't used in this example). Reducing the poem's max-width allows the attribution to extend into the poem's right-margin without going off-screen:

CSS FOR POEMS

.poem-container {text-align: center; font-size: 98%;}
.poem           {display: inline-block; text-align: left; margin-left: 0; max-width: 95%;}
.poem .stanza   {padding: 0.5em 0;}
.poem .attrib   {margin-right: -5%; text-align: right;}

so that the final HTML looked like this:

FINAL HTML

<div class="poem-container"><div class="poem">
<dl>
  <dt>&nbsp;</dt>
    <dd><span class="in4">"What need I fear of thee?</span></dd>
    <dd>But yet I'll make assurance doubly sure,</dd>
    <dd>And take a bond of fate: thou shalt not live,</dd>
    <dd>That I may tell pale-hearted fear it lies,</dd>
    <dd>And sleep in spite of thunder."</dd>
  <dt><span class="smcap">Barnardine.</span></dt>
    <dd class="iq">"I have been drinking hard all night;</dd>
    <dd>I will not consent to die this day, that's certain.</dd>
  <dt><span class="smcap">Duke.</span></dt>
    <dd>O, sir, you must: and therefore I beseech you,</dd>
    <dd>Look forward on the journey you shall go."</dd>
</dl>
  <div class="attrib"><span class="smcap">Shakspere.</span></div>
</div></div>


One more thing: ePub. Add this to the @media handheld section of the css:

CSS FOR @MEDIA HANDHELD

  .poem-container {text-align: left; margin-left: 5%;}
  .poem           {display: block; max-width: 100%; text-align: left;}
  .poem           {width: 30em;}
  dt              {float: left; clear: left; text-align: left;}

When this Wiki entry was written (April, 2014), ePub didn't handle centering or inline-blocks reliably, so instead of futilely trying to center the poem-container, this just indents it a bit, uses a plain old "block" for the poem, and instead of trying to push the attribution past the right side of the container, just indents it within the container.

Also, ebookmaker removes "float" from the main css, even though many mobile formats now support it, so the "dt" statement is repeated to reinstate the float.