How can I reset sidenote numbering at each chapter in tufte-style Bookdown with HTML output?

Question

I am working on converting a tufte-LaTeX book to tufte-Bookdown using the tufte and msmbstyle packages. I have a whole bunch of sidenotes and would like the numbering to restart with each chapter so I don't reach like 400 by the end of the book.

I found this CSS code in the Bookdown GitHub for doing this with regular Bookdown, which uses footnotes/endnotes. However, my attempts to modify the code to work with sidenotes have failed. This is my current CSS addition, which just takes that code and drops in sidenote or sidenote-number (which Inspect Element suggests are the correct tags) where footnote originally was:

/* generate new footnote calls */
.sidenote-number::after {
  content: counter(fn-call);
  position: relative;
  top: -.5em;
  font-size: 85%;
  line-height: 0;
  vertical-align: baseline;
}

/* use a counter for footnotes numbering */
.sidenote ol {
  list-style: none;
  counter-reset: fn-number;
}

.sidenote li {
  counter-increment: fn-number;
}

.sidenote li p:first-child::before {
    content: counter(fn-number) '. ';
    width: 1.5em;
    float: left;
}

This does not work as intended, and instead adds a new counter that numbers each sidenote marker with a counter that resets for each marker, so the in-text marker gets a 1 and the sidenote marker gets a 2.

My CSS skills are not exceptional and I'm not sure of the right next step. How can I get the actual marker to reset?

You can see an example of a page built with tufte/msmbstyle here; sidenote 4 can be found by scrolling down just a bit.

Spoil

Answer 1

I ended up paying someone to solve this. They wrote some JavaScript that will fix it. The following code can be saved as an HTML file, and added to the book with

includes:
  in_header: thishtmlfile.html

in the YAML. Here is the code for the HTML/JS/Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    var element_label= $("label[for *= 'tufte-sn-']");
    var count = $(element_label).length;
    $(element_label).each(function( index ) {
      //console.log( ++index + ": " + $( this ).text() );
      $(this).attr('for','tufte-sn-'+ ++index);
      $(this).text(index);
    });
  });
  $(document).ready(function () {
    var element_input= $("input[id *= 'tufte-sn-']");
    var count = $(element_input).length;
    $(element_input).each(function( index ) {
      //console.log( ++index + ": " + $( this ).text() );
      $(this).attr('id','tufte-sn-'+ ++index);
    }); 
  });
  $(document).ready(function () {
    var element_span= $("span[class *= 'sidenote-number']");
    var count = $(element_span).length;
    $(element_span).each(function( index ) {
      //console.log( ++index + ": " + $( this ).text() );
      $(this).text(++index);
    }); 
  });
</script>

Spoil

Answer 2

My recommendation is that you fix it in Latex file first, and then import/Convert it.

At the beginning/preamble of the document add thse lines, it will to start/reset the sidenote counter at each chapter

% the answer --restarting the footnote at 0
\let\oldchapter\chapter
\def\chapter{%
  \setcounter{footnote}{0}%
  \oldchapter
}

% now your doc
\begin{document}


% would have helped if you pasted some chapters or your book...
% some chapters...
\chapter{First}
\yourtext

Wallsend

I apologize, I probably should have said this directly, but as implied by the CSS tag and failed CSS fix, this relates to HTML Bookdown output, not LaTeX. I haven't tried tufte-Bookdown to PDF output yet, but my experience with documentclass tufte-book in LaTeX directly suggests it already restarts numbering for sidenotes every chapter by default. – Spoil

@Spoil you may have tag for stying but the The title of your question was "How can I reset sidenote numbering at each chapter in tufte-style Bookdown?" – Wallsend

Agreed, I should have mentioned HTML or CSS in the title as well. Sorry about that. I just now changed it. – Spoil