Accessibility recommendations for things like a Table of Contents frequently suggest use of <ul> rather than <table>, presumably because these are easier to navigate. It can be argued that it should be a table because it is a "Table of Contents", and does have columns with meanings, often 3 columns: chapter number, chapter title, page number. It can also be argued that its purpose is to provide a list of links the reader can use to navigate to a specific chapter, and for that purpose, a hyperlinked list something like the following would be sufficient:
1. The Stormy Night
2. The Aftermath
3. The Conclusion
However, unlike a generic webpage, DP/PG are trying to preserve an old printed book, so many PPers want to preserve the ToC more faithfully.
A possible compromise would be to use display:grid. Using this, it is fairly easy to use <ul>, with each "row" an <li> element, and each "cell" a <span>, and have it displayed in a grid format, matching the original fairly closely. See example code in this HTML file. Here's are relevant snippets of CSS and HTML:
.autotoclist {list-style: none; padding: 0;}
.autotoclist a {display: grid; grid-template-columns: 6em 1fr 4em; gap: 1em;}
.tocnum {text-align: right;}
.tocpage {text-align: right;}
.toctitle {text-indent: -1em; margin-left: 1em;}
<nav data-epub-type="toc" aria-labelledby="toc-heading" style="margin:auto; max-width: 30em;">
<h2 id="toc-heading">Contents</h2>
<ul class="autotoclist">
<li><a href="#Chapter_1">
<span class="tocnum">Chapter 1</span>
<span class="toctitle">The first chapter which has a very long title that will wrap</span>
<span class="tocpage">1</span>
</a></li>
<li><a href="#Chapter_2">
<span class="tocnum">Chapter 22</span>
<span class="toctitle">The second chapter</span>
<span class="tocpage">73</span>
</a></li>
</ul>
</nav>
Issues to resolve:
display:grid & associated CSS are not currently at REC status, although widely supported across browsers, and (if converted to epub using Calibre) displays OK in Calibre. PG would need to agree to make this CSS an exception to the "REC-only" rule, like certain uses of flexbox.- Ebookmaker (including the EPUB validation process) would need to accept
display:grid and related CSS
Points to note:
- If the e-reader (e.g. ADE) does not support
display:grid, it falls back gracefully to a simple list.
- Left/center/right alignment is supported for each column, e.g. right-align page numbers
- Hanging indents (commonly used for chapter title in ToCs) are supported
Useful files (in case the cache has been cleared)
Accessibility recommendations for things like a Table of Contents frequently suggest use of
<ul>rather than<table>, presumably because these are easier to navigate. It can be argued that it should be a table because it is a "Table of Contents", and does have columns with meanings, often 3 columns: chapter number, chapter title, page number. It can also be argued that its purpose is to provide a list of links the reader can use to navigate to a specific chapter, and for that purpose, a hyperlinked list something like the following would be sufficient:However, unlike a generic webpage, DP/PG are trying to preserve an old printed book, so many PPers want to preserve the ToC more faithfully.
A possible compromise would be to use
display:grid. Using this, it is fairly easy to use<ul>, with each "row" an<li>element, and each "cell" a<span>, and have it displayed in a grid format, matching the original fairly closely. See example code in this HTML file. Here's are relevant snippets of CSS and HTML:Issues to resolve:
display:grid& associated CSS are not currently at REC status, although widely supported across browsers, and (if converted to epub using Calibre) displays OK in Calibre. PG would need to agree to make this CSS an exception to the "REC-only" rule, like certain uses of flexbox.display:gridand related CSSPoints to note:
display:grid, it falls back gracefully to a simple list.Useful files (in case the cache has been cleared)