Aligned chapter numbers in a TOC

[democrite]

Hello,

I have an HTML TOC that looks something like this:

I. – Title
II. – Title
III. – Title
IV. – Title
…

I'm trying to get the chapter numbers aligned by the endash as well as having the chapter title left aligned, if it wraps, after the endash. I have the chapter numbers in a span:

<div class="sgc-toc-level-2">
  <a href=""><span class="num">XXXVII. – </span> Title</a>
</div>

.num { width:5.5em; text-align:right; float:left; padding-right:.5em }

It looks ok in ADE yet in iBooks, the chapter title wraps and begins at the left margin. A hanging indent doesn't seem to work.

[GrannyGrump]

You might try an Ordered List with Roman Numerals.
http://www.w3schools.com/html/html_lists.asp

I don't know if iBooks will honor that, but maybe worth a try.

[democrite]

I had briefly considered that, though if I have multiple sections, each with a set of chapters, the number of chapters differ and I don't think alignment by the endash or chapter title would work between sections. A table is another idea though I'm trying to stay away from that.

[Jellby]

I wouldn't advise using lists, ordered or unordered, styling options are limited in ePub2 and support is sloppy.

It might be possible to use some combination of left margin for the titles, and relative positioning for the numbers (maybe with width:0 or display:inline-block). But it seems alignment is wrong. This works in the browser, though, and doesn't use non-ePub2 CSS:

https://jsfiddle.net/jm2j8kmn/

[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/

[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

[Jellby]

How does ADE handle page breaking in tables?

[RbnJrg]

Originally Posted by Jellby

How does ADE handle page breaking in tables?

Perfectly fine; at least, in ADE 3.0 or upper. Watch the following screenshots:

[democrite]

Thanks for all the code RbnJrg. I had considered a table and it might have taken me a few minutes of regex to setup though I was avoiding it. I have used tables in the past for lists when there wasn't other options, like if I wanted right-aligned section #'s for instance. I vaguely recall long ago I had trouble with minor appearance issues but maybe that was long ago and recent times I've tried it worked well. I wasn't sure if a cell with a paragraph set to page-break-after:avoid, would work, though it would have been quick to test. I was just staying away from tables for some reason, maybe the more complicated code, or merely than adding one or two spans was more elegant.