Tufte, marginnote, MathJax align

[analytic-bias]

Description

I'm using the Tufte-style book, and I wish to be able to put marginnotes onto equation lines in an align environment, vertically aligning to each line.

If I'm only writing LaTeX then I can do something like this, but with Pandoc (targeting to MathJax + HTML and LaTeX -> PDF simultaneously) it seems to be quite hard.

What I thought might be possible is, as in the title of this question, to have multiple equation(-like) environments, each corresponding to a line in the original align environment, that are still aligning to each other horizontally, but, as they're now separate environments, can be handled correctly by Pandoc and Quarto.

Or perhaps is there a way to hack into MathJax's code (perhaps by a Pandoc filter) to implement something similar?

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

What's the extension has to do with what you want?

If you use HTML/LaTeX code, there is no obvious reason Pandoc/Quarto will complain.
Take a look at MathJax documentation.
Also you could use CSS to handle MathJax alignment.

Take a look at the conditional contents feature in Quarto documentation.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[analytic-bias]

Solved it (with an ad-hoc hack); see below. Thanks a lot!

[analytic-bias]

Solve it (very ad-hoc though...)!

Here are the step:

1. Put the following into a alignmargin.js.

function lookupclassmath(e) {
  if (e.classList.contains('math')) { return e } else { return lookupclassmath(e.parentElement) }
}

const almar = document.getElementsByClassName("almar")
const alref = document.getElementsByClassName("alref")

window.MathJax = {
  startup : {
    pageReady : () => {
      return MathJax.startup.defaultPageReady().then(() => {  
        Array.from(almar).forEach((m, i) => {
          const r = Array.from(alref).filter(e => e.id != '').find(e => e.id.match('\\d')[0] == m.id.match('\\d')[0])
          m.style.top = (r.getBoundingClientRect().top - lookupclassmath(r).getBoundingClientRect().top) + 'px'
        });
      })
    }
  }
}

2. Include that file.

---
include-in-header:
  text: |
    <script src="alignmargin.js"></script>
---

3. Put this CSS into your document.

<style>
  .almar {
    position: relative; /* or 'relative' depending on your layout */
  }
</style>

4. Put this snippet into the align environment, at the line where you want to use as the reference.

\class{alref}{\cssId{alref1}{}}

5. Use the following to define your margin note to be aligned.

[margin note]{#almar1 .aside .almar}

6. Repeat with alref2, almar2, etc. [TODO: figure out a way to automate this by an "inline" margin note macro like the TeX example above, perhaps with a Pandoc filter]

Note also that you will have to manually add vertical spacing inside the align environment when necessary, contrary to the LaTeX solution above.

Works like this (ignore the content):

[analytic-bias]

@GuillaumeDehaene:

I'll add this to my equation annotation filter, if you don't mind.

Not at all; go ahead! Hope you can work out something more streamlined than mine. Also, these are the codes I used when using tufte-handout in case you want to target TeX as well:

\def\mathnote#1{%
  \tag*{\rlap{\hspace\marginparsep{\parbox[t]{\marginparwidth}{\footnotesize#1}}}}%
}
\def\mathnotes#1{%
  \tag*{\rlap{\hspace\marginparsep\smash{\parbox[t]{\marginparwidth}{\footnotesize#1}}}}%
}
\def\mathnoteps#1{%
  \tag*{\rlap{\hspace\marginparsep{\parbox[t]{\marginparwidth}{\footnotesize#1}}}}%
}

[mcanouil]

@analytic-bias Could you share an actual complete and small working example? Providing small snippets won't help much future readers as they will have to figure out by themselves where to put those snippets.
You can use and update the partial one I made above.

[analytic-bias]

@mcanouil here you go (I changed it a little bit so that it supports multiple margin notes):

---
format:
  html:
    include-in-header:
      text: |
        <script type="text/javascript">
        function lookupclassmath(e) {
          if (e.classList.contains('math')) { return e } else { return lookupclassmath(e.parentElement) }
        }

        const almar = document.getElementsByClassName("almar")
        const alref = document.getElementsByClassName("alref")

        window.MathJax = {
          startup : {
            pageReady : () => {
              return MathJax.startup.defaultPageReady().then(() => {  
                Array.from(almar).forEach((m, i) => {
                  m.parentElement.style.position = 'relative'
                  m.style.position = 'absolute'
                  const r = Array.from(alref).filter(e => e.id != '').find(e => e.id.match('\\d+')[0] == m.id.match('\\d+')[0])
                  m.style.top = (r.getBoundingClientRect().top - lookupclassmath(r).getBoundingClientRect().top) + 'px'
                });
              })
            }
          }
        }
        </script>
---

::: {}
$$
\begin{aligned}
1+1&=2\\
1+1&=2\class{alref}{\cssId{alref1}{}}\\
2+2&=4\\
2+2&\neq 5 \class{alref}{\cssId{alref2}{}}\\
1+1&=2\\
\end{aligned}
$$
[true]{#almar1 .aside .almar}
[false]{#almar2 .aside .almar}
:::

Effect:

[analytic-bias]

@GuillaumeDehaene Actually here's something you might want to try: when the screen width is small, the responsive UI automatically merges the columns, so in that case there could be an option that once turned on in source code will automatically switch to your hover/click interaction.

Also see the above updated code.

[GuillaumeDehaene]

This is suprisingly annoying, at least on my computer.

I had to modify the example code to make the alignment really good (aligning the top of the aside element, which might not be the right way to align text to math: I need to play around more)

I had to force the element style in the asides to margin-top and padding-top 0

• The margin-top is set in the CSS and I had to turn it off. I'm surprised, but it affects the position, even with position: absolute
• I think some JS script is dynamically modifying the margin-top. I haven't dug around to figure out what or why
  it's very annoying because it means that if the mathjax script runs before it, the margin-top gets set to an incorrect non-0 value

Here is my current version

---
format:
  html:
    include-in-header:
      text: |
        <script type="text/javascript">
        function lookupclassmath(e) {
          if (e.classList.contains('math')) { return e } else { return lookupclassmath(e.parentElement) }
        }

        const almar = document.getElementsByClassName("almar");
        const alref = document.getElementsByClassName("alref");

        window.MathJax = {
          startup : {
            pageReady : () => {
              return MathJax.startup.defaultPageReady().then(async () => {
                await new Promise(r => setTimeout(r, 1000));
                console.log("Sleep's over. Game time");
                Array.from(almar).forEach((m, i) => {
                  m.parentElement.style.position = 'relative'
                  m.style.position = 'absolute'
                  const r = Array.from(alref).filter(e => e.id != '').find(e => e.id.match('\\d+')[0] == m.id.match('\\d+')[0])
                  m.style.top = (r.getBoundingClientRect().top - lookupclassmath(r).getBoundingClientRect().top) + 'px';
                  // m.style.top = (r.offsetTop) + 'px';
                  m.style.marginTop = 0;
                  m.style.paddingTop = 0;
                });
              })
            }
          }
        }
        </script>
        <style type="text/css">
        .almar {
          position: absolute;
        }
        </style>
---

# Title

::: {}
$$
\begin{aligned}
1+1&=2\\
1+1&=2 + \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots + 0
\class{alref}{\cssId{alref1}{}}\\
2+2&=4\\
2+2&\neq 5 + \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots + 0
\class{alref}{\cssId{alref2}{}}\\
1+1&=2  + \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots \dots + 0
\class{alref}{\cssId{alref3}{}}
\end{aligned}
$$
[As per eq.1]{#almar1 .aside .almar }
[Obviously]{#almar2 .aside .almar}
[Amazingly]{#almar3 .aside .almar}
:::