[RbnJrg]

Originally Posted by democrite

Thank you Jellby. That looks perfect. ADE didn't like it very much, and iBooks had a slight indent for the title which I might have been able to fix with adjusting the left margin.

A hanging indent did end up working.

div.sgc-toc-level-2 	{ text-indent:0; margin-left:5.5em }
.num 			{ width:5.5em; text-align:right; float:left; padding-right:.5em; margin-left:-6em }

https://jsfiddle.net/znwbre26/2/

Hmmm, what about using a table for that? A two column table with "text-align: right" for the first column and "text-aling: left" for the second column could work. For example this code works fine under ADE:

td {
   text-align: left;
   vertical-align: top;
}

td.first {
   text-align: right !important;
}

and

  <table width="100%" cellspacing="10" cellpadding="0" border="0">
    <tr>
      <td class="first">I.&nbsp;—&nbsp;</td>

      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</td>
    </tr>

    <tr>
      <td class="first">II.&nbsp;—&nbsp;</td>

      <td>Title</td>
    </tr>

    <tr>
      <td class="first">III.&nbsp;—&nbsp;</td>

      <td>Title</td>
    </tr>

    <tr>
      <td class="first">…</td>

      <td>&nbsp;</td>
    </tr>

    <tr>
      <td class="first">XXXVIII&nbsp;—&nbsp;</td>

      <td>Title</td>
    </tr>
  </table>

Here there are two screenshots of ADE (with different font-size):



Below you can check the respective epub.

NOTE: As you can see, I styling "inline" the table; that is because ADE has "issues" with styling tables with code in the .css stylesheet.

Regards
Rubén