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:
Code:
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: ")";
}