Change style of Figure and Table labels

[brentthorne]

A template that I am working on requires the figure and table labels to be formatted different from the default. I tried looking around to see if this has been resolved before but I haven't had any luck yet.

Default:

Figure 1: A caption for the figure. Table 1: A caption for the table.

Here is what I would like to have:

Figure 1. A caption for the figure. Table 1. A caption for the table.

I'm sure there is a simple way to do this that I have missed but I figured you guys would know best!

Thanks again.

[RLesur]

Unfortunately, bookdown does not yet offer a support for this kind of styling, see the related issue in the bookdown project https://github.com/rstudio/bookdown/issues/251.

However, it seems to be feasible for now using JavaScript. In order to synchronize with Paged.js, the most reliable way is to use a Paged.js handler. I think the following one should do the trick:

Paged.registerHandlers(class extends Paged.Handler {
  constructor(chunker, polisher, caller) {
    super(chunker, polisher, caller);
    const styles = `
      table > caption > span:first-child, .fig-call {
        font-weight: bold;
      }
    `;
    polisher.insert(styles);
  }
  beforeParsed(content) {
    // In the table captions, replace the columns with dots
    const tableCalls = content.querySelectorAll('table > caption > span:first-child');
    for (let el of tableCalls) {
      el.innerText = el.innerText.replace(':', '.');
    }
    // In the figure captions, split the string and build a new HTML content
    const figureCaptions = content.querySelectorAll('p.caption');
    for (let el of figureCaptions) {
      var splittedCaptionText = el.innerText.split(/:(.+)/, 2);
      el.innerHTML = '<span class="fig-call">' +
                     splittedCaptionText[0] +
                     '.</span>' +
                     splittedCaptionText[1];
    }
  }
});