[RbnJrg]

Originally Posted by AlexBell

Thanks very much to you both. You've give me a lot to think about and practice on.

Just to clear up a point I expressed poorly: I very much want in all the ebooks I do that the same css and markup work well in all size readers. Obviously a long line of text will break on a six inch Sony T3 when it doesn't on an iPad. I want to use the same css and markup for both.

Hmmm, use a table. The method I posted will work for ereaders based on RMSDK (ADE) and WebKit but won't work on old Kindle devices (K1/K2/KDX). So, use a table but even simpler than the posted by Turtle. For example:

1. In your .xhtml file:

  <table>
    <tbody>
      <tr>
        <td>
          <span class="lb">1<span class="sc">ST</span>&nbsp;C<span class="sc">ITIZEN</span></span>
        </td>

        <td>
          Sir, there's a hurry in the veins of youth 
          That makes a vice of virtue by excess.
        </td>
      </tr>

      <tr>
        <td>
          2<span class="sc">ND</span>&nbsp;C<span class="sc">ITIZEN</span>
        </td>

        <td>
          What if the coolness of our tardier veins
          Be loss of virtue?
        </td>
      </tr>

      <tr>
        <td>
          <span class="lb">1<span class="sc">ST</span>&nbsp;C<span class="sc">ITIZEN</span></span>
        </td>

        <td>
          All things cool with time— The sun itself, they say, till heat shall find           A general level, nowhere in excess.
        </td>
      </tr>

      <tr>
        <td>
          2<span class="sc">ND</span>&nbsp;C<span class="sc">ITIZEN</span>
        </td>

        <td>
          'Tis a poor climax, to my weaker thought,
          That future middlingness.
        </td>
      </tr>
    </tbody>
  </table>

2. And in your .css file:

table {
    width: 90%;
    margin: 2em 5%;
    border-collapse: collapse;
    font-size: 0.9em;
}

td {
    vertical-align: top;
    padding: 5px 10px;
    font-family: serif;
}

.sc {
    font-size: 0.7em;
}

.lb {
    background-color: lightblue;
}

Aclarations:

1. Don't give a width to columns, just give a width to the table. Of that way, the column width will be given by the text inside the cell.

2. In the first column, use a non-break-space to separate "1st/2nd" of "Citizen" (of that way the width of the first column will be always optimal).

3. Don't use the property "text-transform: smallcaps;"; instead, use "fake" smallcaps.

4. Of course, you can play with the width of the table, margins (for the table), paddings and font-size. Remember that margin-left and margin-right are linked with the width of the table (you can't have a table with a width of 90% of the screen and margin-left/right of 15% each).

I attach an epub so you can understand the things better than with my words.

Regards
Rubén