Theme support for automatic numbering of tables/figures

Theming
1

I just stumbled across a very clever, very clean way to provide automatic numbering for figures/tables/HTML elements: https://tympanus.net/codrops/2013/05/02/automatic-figure-numbering-with-css-counters/. I think this might be especially valuable for textbooks and other kinds of standardized publications, where having numbered ‘figures’ or ‘tables’ might be desirable. Has anyone implemented in a Pressbooks theme or interested in trying to add (either as default behavior or through a theme option)?

2

Hi @SteelWagstaff, we use CSS counters for chapter numbering in PDF outputs (possibly for other things but definitely there). So this could certainly be a useful technique for other elements too. The problem is that EPUB/MOBI have (at best) incomplete support for CSS counters so this solution would only work on web/in PDF.

Definitely worth exploring though!

If you’d like to open an issue for this that would be a good place to start further discussion on how to implement.

3

Done: https://github.com/pressbooks/ideas/issues/114

4

Hi!

Just curious if this feature can be used and how would one do so?

5

I implemented a version of this in a test book at the request of one of my authors. Since the feature hasn’t been implemented yet I thought I’d share here in case anyone else is trying to do this! Thank you Steel for linking that blog post it was extremely helpful! I’m sure there are better ways to do this but this is what I could figure out in a few hours (with the help of someone who knows more JavaScript than me).

In the custom web styles I added:

#page {
  counter-reset: figures chapters;
}
figcaption {
  counter-increment: figures; /* count the number of fig captions */
  font-style: italic;
}

figcaption::before {
  content: 'Figure ' counter(chapters)'.' counter(figures) '. '; /* display the figure number */
}

Then in the html editor at the top of every chapter I added a JavaScript snippet (if you don’t do this the figure numbers will all be 0.1, 0.2, etc. ie you will not be able to display chapter numbers). There is probably a better way to grab the chapter numbers that doesn’t involve adding code to every chapter.

<script>  
// First, get the string value of the chapter number from the text content of the Header > Span element.  
let chapterNumberText = document.getElementsByClassName('entry-title')[0].querySelector('span').textContent;  
// Then, convert that String to a numerical value for use in the CSS counter.  
let chapterNumber = Number(chapterNumberText);  
// Finally, set initialize the `figures` and `chapters` counters to 0 and [chapterNumber], respectively, within the div element with ID `#page`.  
document.querySelector('#page').style.setProperty('counter-reset', `figures chapters ${chapterNumber}`);  
</script>

EDIT to add limitations of this method:

  1. This solution doesn’t work for export formats.
  2. Figures must have captions to be numbered.
  3. Potential accessibility concerns. Based on my research, screen readers will read the figure numbers even though they are not real text (see this article on the accessibility of ::before and ::after), but I am not an accessible technology specialist.
  4. It could break or contain bugs I don’t know about