Epub3 TOC

[kso]

Although I learned more about ebooks on my frequent visits to this site than from a few (very fast aging) books there appears to an annoying gap in what I know about toc creation.

I'm currently working on an epub 3 book requiring an htmltoc and sequentially numbered chapters that won't want to play nicely.

Firstly, if the nav toc requires an OL to be standards compliant (validation), why on earth does it not print the chapter numbers (in the nav toc). An Ordered List seems to well suited for such a task.

Secondly, as I also need an html toc for this book (don't ask), and some chapter headlines are somewhat long, it totally messes up the display of the html toc even on medium size devices and not just on phones.

I've made up a dummy html toc as follows, and I also include the css code. Entries 2.2, 3 and 4 in the toc are sticking out like sore thumbs that are crying out to be amputated, but after spending hours on this I'm at a loss.

<ol class="eiiitoc">
  <li class="eiiixm">Frontmatter: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li class="eiiixm">Frontmatter too: Nulla at odio nibh.</li>
  <li class="eiiimm">Chapter One</li>
  <li class="eiiimm">Chapter Longer Two.
    <ol class="eiiitoc">
      <li class="eiiimm">Chapter Two.One Morbi sit amet dignissim purus.</li>
      <li class="eiiimm">Chapter Two.Two Nulla at odio nibh. Morbi mattis consequat justo, interdum fringilla risus condimentum eget. Nam scelerisque augue ac orci hendrerit, eu sodales est tempor.</li>
      <li class="eiiimm">Chapter Two.Three Vivamus risus ex, porttitor sit amet pellentesque ac, auctor in leo.</li>
    </ol>
  </li>
  <li class="eiiimm">Chapter Three Fusce viverra, odio at aliquam iaculis, purus elit maximus mauris, finibus convallis felis lectus eget eros.
    <ol class="eiiitoc">
      <li class="eiiimm">Chapter Three.One Suspendisse in suscipit libero, id tempus sapien.</li>
      <li class="eiiimm">Chapter Three.Two Suspendisse facilisis massa sed malesuada vulputate.
        <ol class="eiiitoc">
          <li class="eiiimm">Chapter Three.Two.One Quisque rutrum ut nisi vel posuere.</li>
          <li class="eiiimm">Chapter Three.Two.Two Nunc est leo, congue sed turpis at, pulvinar laoreet sapien.</li>
        </ol>
      </li>
    </ol>
  </li>
  <li class="eiiimm">Chapter Four Aliquam velit ante, tincidunt ac ullamcorper eu, efficitur sed velit. Maecenas pellentesque tortor arcu, eget aliquet elit egestas nec.</li>
  <li class="eiiixm">Backmatter Curabitur ut ligula in lectus suscipit cursus eget vel lectus. </li>
  <li class="eiiixm">Backmatter Aenean sed dui et sem pellentesque semper et eget lorem.</li>
  <li class="eiiixm">Backmatter Praesent et nibh cursus, porta neque in, pretium neque.</li>
</ol>

And the relevant CSS:

ol.eiiitoc {
	list-style-position: outside;
	counter-reset: item;
	margin:0;
}
ol.eiiitoc li {
	display:block;
}
ol.eiiitoc.stnewchap {
	margin:.382rem 0;
}
ol.eiiitoc li.eiiimm:before {
	display:inline-block;
 	content: counters(item, ".") " ";
	counter-increment: item;
	width:3rem;
}
ol.eiiitoc li.eiiixm {
	list-style-type: none;
}
ol.eiiitoc li.eiiixm:before {
	display:inline-block;
 	content: " ";
	width:3rem;
}

I use

.eiiimm

for mainmatter chapters and

.eiiixm

for chapters in the front or appendix of the book.
I know I could ask for the chapter titles to be trimmed to make the htmltoc fit on a phone's screen, but if there IS a way to get the display of the HTML toc fixed, that'd be the preferred route.

Here's what it looks like in a narrow browser window:

edit: clarified last paragraph

klaus