Correctly Aligning Text Within a Table

[ghostyjack]

I hope someone can give me some clues on how to do this as I've been tearing my hair out trying to figure it out.

I've got quite a few plays in epub form but the formatting seems to have gone astray.

All the text is in the form of tables so as to properly separate the speaker from what is spoken.

e.g.

<table>
    <tr>
      <td>person 1:</td>

      <td>"Blah, Blah, etc, etc, and so on."</td>
    </tr>
</table>

Now this seems to appear fine if the spoken text is quite short, but if they are saying alot and the text wraps on the screen, then the first cell seems to becomes centred in a vertical alignment.

What I want is for the first cell to have the text at the top of the cell so as to make it easier to see where the speaker starts.

e.g.

Person: "Blah, blah, blah,
             blah, blah, blah,
             blah."

and not

             "Blah, blah, blah,
Person: blah, blah, blah,
             blah."

I'm sure it would be possible to play around with this so solve this for a single device, but I'm going to reading them on device with different screen sizes. i.e. PRS-600, Desktop PC with a 17" screen, Laptop PC with a 15" screen.

So what I'm looking for is a solution that is screen/resolution independant.

Any help would be most appreciated.

[Jellby]

You want to use "vertical-align: top" or similar, I guess.

But please avoid using tables when not absolutely necessary, they are a sure source of problems and headaches. In your case, it could probably be enough to use hanging indents (a left margin for the paragraph and negative indent for the first line).

[Worldwalker]

Caveat: I don't know jack about the innards of an epub, other than that it's built of XHTML and CSS. What I am, however, is a website designer, and the crazy kind who hand-codes everything at that, so I can sort out your code problems. At least, I can in the context of them being a web page; I don't know whether my answers are appropriate for your situation.

As Jellby said, you want to avoid tables if humanly possible. They were never meant for text formatting, and do an abysmal job of it. However, I haven't had enough caffeine yet today to try to explain any of the more appropriate alternatives, so I'll just give you a quick-and-dirty fix for what you have.

Add the following code to your stylesheet:

.person	{ vertical-align: text-top; }

And change your table code as follows:

<td class="person">person 1:</td>

That will fix the alignment problems. As far as the rest, learning some more HTML and CSS would probably help you there. My favorite reference website is www.w3schools.com. I believe O'Reilly is currently having a two-for-the-price-of-one sale on ebooks, and they have many fine reference and tutorial books which might be of assistance.

[ghostyjack]

Thanks guys for you help.

I'll try the vertical align option for now while I have a play with the indents.