Showing off, finally

In the coming days, I'll answer Naila's follow-up question on how I come up with ideas, continue the car saga, and bring an ugly critique to your attention. For now, however, I want to share a CSS discovery that took me an hour to figure out.

I've never been happy with the script pages CSS code that I use here. It relies on lists and that's a kludge. I had to do the same sort of thing as I create pages of excerpts from Alex's upcoming book on TV writing.

The key is the lack of space between the character name slug (centered, all caps) and the dialogue that follows (margins, left-justified).

I struggled for a while with <br> tags and span tags. Finally, I had a real eureka moment.

These are the styles I designed:

.pages {
font-family:Courier, "Courier New", monospace;
font-size:smaller;
margin-left:28pt;
margin-right:28pt;
}

.char {
margin-bottom:0;
text-align:center;
}

.dial {
text-align:left;
margin-top:0;
margin-left:62pt;
margin-right:62pt;
}

The left and right margins can vary in size and units. The magic is in the margin-bottom declaration of the character slug (class="char") and the margin-top declaration of the dialogue (class="dial") style. If either of these declarations doesn't equal zero, the magic does not happen.

Now, here's what the code looks like in action:

<div class="pages">
<p class="char">JACK</p>
<p class="dial">Hey, I called the other night...</p>
<p>Oh, my God. He knows! Jill tries to cover:</p>
<p class="char">JILL</p>
<p class="dial">Yeah, I accidentally kicked the plug out. I'm such a klutz.</p>
</div>

That's elegant, if I may say so myself. If only I could solve story problems as gracefully.

(I changed the name of this post by adding the "finally". Blogger has been misbehaving and munching posts instead of accepting legitimate HTML for the < and > symbols. Bad Blogger!)