Plays: Table or Description List?

[enuddleyarbl]

I guess this will be a learning experience. For the first time, I'm editing a play (just for tweaking to my tastes):

https://standardebooks.org/ebooks/os...-ideal-husband

Upon editing it, I found it was formatted as a table. I can see the draw of that, but I'd think that a Description List (<dl>) would be a better solution:

https://www.w3schools.com/tags/tag_dl.asp

<dl>
  <dt>CharacterA</dt>
  <dd>I think a Description List makes for a better structure for a play.</dd>
  <dt>CharacterB</dt>
  <dd>Dude!  No way.  Tables are where it's at.</dd>
</dl>

Is there any actual consensus about which is a better way to structure a play? Either way, I guess this gives me a chance to work on one of those methods (I hate tables, but have had almost no experience with description lists). Of course, I wonder if it's even possible to convert (easily) from one structure to the other. But, on the off-chance that I can, does anyone have any particularly good css for the formatting of a play's <dl>, <dt> and <dd>?

[RbnJrg]

Originally Posted by enuddleyarbl

I guess this will be a learning experience. For the first time, I'm editing a play (just for tweaking to my tastes):

https://standardebooks.org/ebooks/os...-ideal-husband

Upon editing it, I found it was formatted as a table. I can see the draw of that, but I'd think that a Description List (<dl>) would be a better solution:

https://www.w3schools.com/tags/tag_dl.asp

<dl>
  <dt>CharacterA</dt>
  <dd>I think a Description List makes for a better structure for a play.</dd>
  <dt>CharacterB</dt>
  <dd>Dude!  No way.  Tables are where it's at.</dd>
</dl>

Is there any actual consensus about which is a better way to structure a play? Either way, I guess this gives me a chance to work on one of those methods (I hate tables, but have had almost no experience with description lists). Of course, I wonder if it's even possible to convert (easily) from one structure to the other. But, on the off-chance that I can, does anyone have any particularly good css for the formatting of a play's <dl>, <dt> and <dd>?

Well, there are more ways to get that structure, specially under epub3. But if you must work under epub2 and you hate tables, then the easiest is to work with <p> tags just as "normal" epubs. Of course, those <p> tags must have styled with the property "display: inline-block". For example:

A) In the .css stylesheet:

p {
    margin-bottom: 0;
}

.colOne {
    display: inline-block;
    width: 30%; /* here you can play with the value */
    padding-right: 3%;
    text-align: right;

/* Edit: I forgot to add this property */

    vertical-align: top; 
}

.colTwo {
    display: inline-block;
    width: 65%; /* here you can play with the value */
    text-align: left;
    margin-bottom: 0.5em; /* here you can play with the value */
}

B) In the .xhtml file:

<p class="colOne">Mr. Smith:</p>

<p class="colTwo">What do you think about this way of structuring a play?</p>

<p class="colOne">Mr. Brown:</p>

<p class="colTwo">I think I could give it a try.</p>

<p class="colOne">CharacterA:</p>

<p class="colTwo">But I think a Description List makes for a better structure for a play.</p>

<p class="colOne">CharacterB:</p>

<p class="colTwo">Dude!  No way.  Tables are where it's at.</p>

I am writing these lines from my smartphone and I can't check how the styles will work but I think they will work fine.

EDIT: It works fine!

[enuddleyarbl]

Thanks for that structure. The result looks almost exactly like what they got with tables. I had a rough start of something like that in my standard css rules and I've incorporated your stuff. Interestingly, unless I messed it up before noticing this, it looks like the table code they used in that book neglected the "vertical-align: top;" bit, too. So, their "persona" names were in the middle of the block and difficult to match to the dialog.

Actually, the table structure for the play wasn't bad at all. The problem I have with tables is that I find it difficult to see what's happening in the editor (in a viewer, it looks fine). Everything gets broken up. But, as a play, it worked fine:

<table class="tablestructure">
<tbody>
...
<tr>
<td class="tabledatacell persona" epub:type="z3998:persona"><abbr>Mrs.</abbr>*Marchmont</td>
<td class="tabledatacell">Going on to the Hartlocks’ tonight, Margaret?</td>
</tr>
...
</tbody>
</table>

So, it's basically clumps of dialog that are easily seen. Plus, as an added benefit, I managed to fix a couple of issues I was having with my standard table structure while I was playing around with it.

I'm also going to try converting part of that play over to a description list and see if it makes any difference to editor readability. But, at a guess, structurally, it will look just about the same as the table. The only difference will probably be in the syntax.

[Quoth]

use <p with suitable CSS.

[enuddleyarbl]

Regular paragraphs with those column widths didn't work vanilla. I had to set up a rudimentary flexbox:

https://www.w3schools.com/css/css3_flexbox.asp

I've tried Description Lists, Tables and Flexboxes, and they each have their pluses and minuses. I think I like the way a description list looks in a viewer best. In the editor, I think I prefer the way the table html looks. But, they're all usable.

EDIT 1: And, structuro-semantically, I guess I'd give the nod to the Flexbox.
EDIT 2: Somehow, I deleted my <span class="person... bit around the character names in the right-hand column. The names are supposed to be smallcapped.

Let's see if I can stick some attachments in here.













My CSS for Play Stuff:

section.playact {
  /*	Play Act Section Styling	*/
  display: block;
}
section.playact div.playline {
  display: flex;
}
section.playact p {
  /* Play Act Paragraph Styling */
  display: block;
  text-indent: 0;
}
section.playact dd.dialog {
  /*	Play Act Dialog Styling for Description List <dl>	*/
  display: block;
  padding-left: 2%;
  text-align: left;
  vertical-align: top;
}
section.playact p.dialog {
  /*	Play Act Dialog Styling for Paragraph <p>	*/
  display: inline-block;
  margin-bottom:	0;
  margin-top:	0;
  padding-left: 2%;
  text-align: left;
  vertical-align:	top;
  width: 65%;
}
section.playact td.dialog {
  /*	Play Act Dialog Styling for Table <td>	*/
  border: 0;
  display: table-cell;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: left;
  vertical-align: top;
}
section.playact dt.person {
  /*	Play Act Person Styling for Description List <dl>	*/
  display: block;
  font-variant: small-caps;
  padding-right: 3%;
  text-align: left;
  vertical-align: top;
}
section.playact p.person {
  /*	Play Act Person Styling for Paragraph <p>	*/
  display: inline-block;
  font-variant: small-caps;
  margin-bottom:	0;
  margin-top:	0;
  padding-right: 3%;
  text-align: right;
  vertical-align:	top;
  width: 30%;
}
section.playact td.person {
  /*	Play Act Person Styling for Table <td>	*/
  border: 0;
  display: table-cell;
  font-variant: small-caps;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 3px;
  padding-top: 2px;
  text-align: left;
  vertical-align: top;
}
section.playact span.person {
  /*	Play Act Person Styling for Span <span>	*/
  display: inline-block;
  margin-top: 0;
  padding-right: 0%;
  font-variant: small-caps;
  vertical-align: top;
}
section.playact .person::after {
  /*	Append Colon and Space After Play Act Person for Anything	*/
  content: ": ";
}
section.playact span.person::after {
  /*	Don't Put Anything After Play Act Person for Span <span>	*/
  content: "";
}
section.playact dd.stage_direction {
  /*	Play Act Stage Direction Styling for Description List <dd>	*/
  display: block;
  font-style: italic;
  padding-left: 2%;
  text-align: left;
  vertical-align: top;
}
section.playact p.stage_direction {
  /*	Play Act Stage Direction Styling for Paragraph <p>	*/
  display: inline-block;
  font-style: italic;
  margin-bottom:	0;
  margin-top:	0;
  padding-left: 2%;
  text-align: left;
  vertical-align: top;
  width: 65%;
}
section.playact td.stage_direction {
  /*	Play Act Stage Direction Styling for Table <td>	*/
  border: 0;
  display: table-cell;
  font-style: italic;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  text-align: left;
  vertical-align: top;
}
section.playact span.stage_direction {
  /*	Play Act Stage Direction Styling for Spans <span>	*/
  display: inline-block;
  font-style: italic;
  padding-left: 0;
  text-align: left;
  vertical-align: top;
}
section.playact .stage_direction::before {
  /*	Prepend Opening Parenthesis Before Play Act Stage Directions	*/
  content: "(";
}
section.playact .stage_direction::after {
  /*	Append Closing Parenthesis After Play Act Stage Directions	*/
  content: ")";
}

[Quoth]

I've loads of plays on ebooks and they just use the same formatting as a novel. The main difference is inversion of first line margin is less than paragraph margin and speaker is in front of dialogue without quotes, like a list but the name is the list name.

Then stage directions are different style.

I think you are over thinking it.

[JSWolf]

I like the second preview with less of a left margin. Also, I think the character names as to who is speaking should be bold. No need for the space between the name and the dialogue. Also, if there are any sort of stage directions, make them sans-serif.

[RbnJrg]

Originally Posted by enuddleyarbl

Regular paragraphs with those column widths didn't work vanilla...

You made a mistake with the first two cols; this is my output with correct styles and layout. As you can see, there is not practically difference with a table.



Watch the epub I attach.

[enuddleyarbl]

The second preview is the Description List (<dl>/<dt>/<dd>) version. The left-margin is set to 0 for the whole book. Assuming you're referring to the left margin of the dialog (not the person), I guess that's a function of <dd>. I haven't looked into what I can do to adjust that.

Regarding character bolding, I was thinking that myself. But, then I wondered if it might be too much bolding since that whole column would be bold. Looking at the one other play I have in my library (and it's formatted as plain old text paragraphs with a leading, bolded character name), that looks fine. So, I'll stick a bold on those styles.

And, you're right about the trailing space on the character name: the padding on the table/dl cells should take care of any required spacing. So, I'll get rid of that.

I avoid setting font-families, but I agree with the sans-serif, too. I'll probably throw that in. It can't hurt.

I also agree that this is a bit of overkill. But, since the book was already formatted as a table, I thought I'd play around with it. A standard paragraph, with hanging indents and the character bolded should suffice.

EDIT: I just wanted to add that I've edited another play for myself today and I've got to agree that simply using suitably formatted paragraphs seems to be the best option. The stuff I was messing about with, above, is way overkill. Heck, even what I've done with a simple paragraph version is overkill. But, let me add in the css codes for that method:

section.playasparagraph {
  /*	Play Act Section as Paragraphs Styling	*/
  display: block;
	padding: 1.5em;
}
section.playasparagraph p {
  /* Play Act as Paragraphs Paragraph Styling */
  display: block;
	text-indent: -1.5em;
}
section.playasparagraph span.person {
  /*	Play Act as Paragraphs Person Styling for Span <span>	*/
	font-weight: bold;
  margin-top: 0;
  font-variant: small-caps;
  vertical-align: top;
}
section.playasparagraph span.stage_direction {
  /*	Play Act as Paragraphs Stage Direction Styling for Spans <span>	*/
	font-family: sans-serif;
  font-style: italic;
  padding-left: 0;
  text-align: left;
  vertical-align: top;
}
section.playasparagraph .stage_direction::before {
  /*	Prepend Opening Parenthesis Before Play Act as Paragraphs Stage Directions	*/
  content: "(";
}
section.playasparagraph .stage_direction::after {
  /*	Append Closing Parenthesis After Play Act Paragraphs Stage Directions	*/
  content: ")";
}

[RbnJrg]

Tables have a drawback for the structure you're looking for. In many readers, the rows of a table do not break, and thus, if the dialogs are long, you can find many blank spaces because one row doesn't fit in the current page. Maybe the epub I attached in my last post where I fix an inaccuracy you made with the first two cols with the layout based in paragraph, it could give you a better aproximation to the ideal solution. Besides, you mentioned flex-boxes; I think that a grid would be better in this case than a flex-box (of course, you will be working under epub3).