tufte icon indicating copy to clipboard operation
tufte copied to clipboard

Published 20 hours ago • verified publisher icon rstudio

`marginfigure` can't handle certain Markdown and LaTeX

Open lrdegeest opened this issue 4 years ago • 5 comments

according to https://rstudio.github.io/tufte/, marginfigure can handle any Markdown syntax:

If you need to write anything in Markdown syntax, please use the marginfigure block described previously.

But if you try to place a blockquote in the margin:

```{marginfigure}
> "If it weren't for my lawyer, I'd still be in prison. It went a lot faster with two people digging."
>
> `r tufte::quote_footer('--- Joe Martin')`

nothing appears. I guess R interprets the "" as comments.

I also found issues with LaTeX equations, like:

```{marginfigure}
$$
\begin{aligned}
H_0 &: \beta = 0 \\
H_A &: \beta \neq 0 \\
\end{aligned}
$$

where the alignment on "&" gets messed up.

lrdegeest avatar Apr 08 '20 03:04 lrdegeest

The documentation said that marginfigure could only handle some simple Markdown syntax: https://rstudio.github.io/tufte/#arbitrary-margin-content

For the sake of portability between LaTeX and HTML, you should keep the margin content as simple as possible (syntax-wise) in the marginefigure blocks. You may use simple Markdown syntax like **bold** and _italic_ text, but please refrain from using footnotes, citations, or block-level elements (e.g. blockquotes and lists) there.

Blockquotes won't work. Sorry.

yihui avatar May 07 '20 21:05 yihui

Ok thanks. Documentation was a bit confusing.

lrdegeest avatar May 07 '20 21:05 lrdegeest

+1 for bullet points, lists, and tables in the margin

aminadibi avatar Jun 09 '20 14:06 aminadibi

@cderv With fenced Divs, this might be much easier now and we should be able to put anything inside marginfigure. I definitely don't like my hack: https://github.com/rstudio/tufte/blob/2e5d53f637a16557447f153f47b0da1cdc73f41e/R/handout.R#L55-L58

yihui avatar Sep 30 '20 03:09 yihui

Ok so I started to look into this to make this works with Lua filter. Some notes from my investigation (for tomorrow-me mainly)

The idea is to be able to write this

::: marginfigure
We know from _the second fundamental theorem of calculus_ that for $x$ in $[a, b]$:
$$\frac{d}{dx}\left( \int_{a}^{x} f(u)\,du\right)=f(x).$$

> with some complex markdown

and R inline `r 1+1`

and block
```{r}
2+2
```
:::

to generate the correct syntax in Latex and HTML.

I started to look at HTML.

One thing is Pandoc will always create a <p> tag for any text in a div. This is not the case with the block engine.

That means Pandoc will render the above as

<div class="marginfigure">
<p>We know from <em>the second fundamental theorem of calculus</em> that for <span class="math inline"><span class="MathJax_Preview" style="color: inherit;"></span><span class="MathJax" id="MathJax-Element-4-Frame" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;><mi>x</mi></math>" role="presentation" style="position: relative;"><nobr aria-hidden="true"><span class="math" id="MathJax-Span-42" style="width: 0.726em; display: inline-block;"><span style="display: inline-block; position: relative; width: 0.571em; height: 0px; font-size: 125%;"><span style="position: absolute; clip: rect(1.615em, 1000.52em, 2.297em, -1000em); top: -2.171em; left: 0em;"><span class="mrow" id="MathJax-Span-43"><span class="mi" id="MathJax-Span-44" style="font-family: MathJax_Math-italic;">x</span></span><span style="display: inline-block; width: 0px; height: 2.171em;"></span></span></span><span style="display: inline-block; overflow: hidden; vertical-align: -0.061em; border-left: 0px solid; width: 0px; height: 0.661em;"></span></span></nobr><span class="MJX_Assistive_MathML" role="presentation"><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>x</mi></math></span></span><script type="math/tex" id="MathJax-Element-4">x</script></span> in <span class="math inline"><span class="MathJax_Preview" style="color: inherit;"></span><span class="MathJax" id="MathJax-Element-5-Frame" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;><mo stretchy=&quot;false&quot;>[</mo><mi>a</mi><mo>,</mo><mi>b</mi><mo stretchy=&quot;false&quot;>]</mo></math>" role="presentation" style="position: relative;"><nobr aria-hidden="true"><span class="math" id="MathJax-Span-45" style="width: 2.44em; display: inline-block;"><span style="display: inline-block; position: relative; width: 1.943em; height: 0px; font-size: 125%;"><span style="position: absolute; clip: rect(1.345em, 1001.82em, 2.574em, -1000em); top: -2.21em; left: 0em;"><span class="mrow" id="MathJax-Span-46"><span class="mo" id="MathJax-Span-47" style="font-family: MathJax_Main;">[</span><span class="mi" id="MathJax-Span-48" style="font-family: MathJax_Math-italic;">a</span><span class="mo" id="MathJax-Span-49" style="font-family: MathJax_Main;">,</span><span class="mi" id="MathJax-Span-50" style="font-family: MathJax_Math-italic; padding-left: 0.167em;">b</span><span class="mo" id="MathJax-Span-51" style="font-family: MathJax_Main;">]</span></span><span style="display: inline-block; width: 0px; height: 2.21em;"></span></span></span><span style="display: inline-block; overflow: hidden; vertical-align: -0.36em; border-left: 0px solid; width: 0px; height: 1.345em;"></span></span></nobr><span class="MJX_Assistive_MathML" role="presentation"><math xmlns="http://www.w3.org/1998/Math/MathML"><mo stretchy="false">[</mo><mi>a</mi><mo>,</mo><mi>b</mi><mo stretchy="false">]</mo></math></span></span><script type="math/tex" id="MathJax-Element-5">[a, b]</script></span>: <span class="math display"><span class="MathJax_Preview" style="color: inherit;"></span><div class="MathJax_Display" style="text-align: center;"><span class="MathJax" id="MathJax-Element-6-Frame" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mfrac><mi>d</mi><mrow><mi>d</mi><mi>x</mi></mrow></mfrac><mrow><mo>(</mo><msubsup><mo>&amp;#x222B;</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mi>a</mi></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mi>x</mi></mrow></msubsup><mi>f</mi><mo stretchy=&quot;false&quot;>(</mo><mi>u</mi><mo stretchy=&quot;false&quot;>)</mo><mspace width=&quot;thinmathspace&quot; /><mi>d</mi><mi>u</mi><mo>)</mo></mrow><mo>=</mo><mi>f</mi><mo stretchy=&quot;false&quot;>(</mo><mi>x</mi><mo stretchy=&quot;false&quot;>)</mo><mo>.</mo></math>" role="presentation" style="text-align: center; position: relative;"><nobr aria-hidden="true"><span class="math" id="MathJax-Span-52" style="width: 14.211em; display: inline-block;"><span style="display: inline-block; position: relative; width: 11.352em; height: 0px; font-size: 125%;"><span style="position: absolute; clip: rect(1.827em, 1011.27em, 4.454em, -1000em); top: -3.39em; left: 0em;"><span class="mrow" id="MathJax-Span-53"><span class="mfrac" id="MathJax-Span-54"><span style="display: inline-block; position: relative; width: 1.215em; height: 0px; margin-right: 0.12em; margin-left: 0.12em;"><span style="position: absolute; clip: rect(3.192em, 1000.52em, 4.124em, -1000em); top: -4.677em; left: 50%; margin-left: -0.262em;"><span class="mi" id="MathJax-Span-55" style="font-family: MathJax_Math-italic;">d<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span style="display: inline-block; width: 0px; height: 4em;"></span></span><span style="position: absolute; clip: rect(3.192em, 1001.04em, 4.125em, -1000em); top: -3.314em; left: 50%; margin-left: -0.547em;"><span class="mrow" id="MathJax-Span-56"><span class="mi" id="MathJax-Span-57" style="font-family: MathJax_Math-italic;">d<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mi" id="MathJax-Span-58" style="font-family: MathJax_Math-italic;">x</span></span><span style="display: inline-block; width: 0px; height: 4em;"></span></span><span style="position: absolute; clip: rect(0.892em, 1001.22em, 1.181em, -1000em); top: -1.287em; left: 0em;"><span style="display: inline-block; overflow: hidden; vertical-align: 0em; border-top: 1.6px solid; width: 1.215em; height: 0px;"></span><span style="display: inline-block; width: 0px; height: 1.067em;"></span></span></span></span><span class="mrow" id="MathJax-Span-59"><span class="mo" id="MathJax-Span-60" style="vertical-align: 0em;"><span style="font-family: MathJax_Size3;">(</span></span><span class="msubsup" id="MathJax-Span-61"><span style="display: inline-block; position: relative; width: 1.59em; height: 0px;"><span style="position: absolute; clip: rect(2.525em, 1000.94em, 4.975em, -1000em); top: -4em; left: 0em;"><span class="mo" id="MathJax-Span-62" style="font-family: MathJax_Size2; vertical-align: 0.001em;">∫<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.388em;"></span></span><span style="display: inline-block; width: 0px; height: 4em;"></span></span><span style="position: absolute; clip: rect(3.573em, 1000.48em, 4.122em, -1000em); top: -5.088em; left: 1.11em;"><span class="texatom" id="MathJax-Span-63"><span class="mrow" id="MathJax-Span-64"><span class="mi" id="MathJax-Span-65" style="font-size: 70.7%; font-family: MathJax_Math-italic;">x</span></span></span><span style="display: inline-block; width: 0px; height: 4em;"></span></span><span style="position: absolute; clip: rect(3.574em, 1000.45em, 4.121em, -1000em); top: -3.104em; left: 0.556em;"><span class="texatom" id="MathJax-Span-66"><span class="mrow" id="MathJax-Span-67"><span class="mi" id="MathJax-Span-68" style="font-size: 70.7%; font-family: MathJax_Math-italic;">a</span></span></span><span style="display: inline-block; width: 0px; height: 4em;"></span></span></span></span><span class="mi" id="MathJax-Span-69" style="font-family: MathJax_Math-italic; padding-left: 0.167em;">f<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.06em;"></span></span><span class="mo" id="MathJax-Span-70" style="font-family: MathJax_Main;">(</span><span class="mi" id="MathJax-Span-71" style="font-family: MathJax_Math-italic;">u</span><span class="mo" id="MathJax-Span-72" style="font-family: MathJax_Main;">)</span><span class="mspace" id="MathJax-Span-73" style="height: 0em; vertical-align: 0em; width: 0.167em; display: inline-block; overflow: hidden;"></span><span class="mi" id="MathJax-Span-74" style="font-family: MathJax_Math-italic;">d<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mi" id="MathJax-Span-75" style="font-family: MathJax_Math-italic;">u</span><span class="mo" id="MathJax-Span-76" style="vertical-align: 0em;"><span style="font-family: MathJax_Size3;">)</span></span></span><span class="mo" id="MathJax-Span-77" style="font-family: MathJax_Main; padding-left: 0.278em;">=</span><span class="mi" id="MathJax-Span-78" style="font-family: MathJax_Math-italic; padding-left: 0.278em;">f<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.06em;"></span></span><span class="mo" id="MathJax-Span-79" style="font-family: MathJax_Main;">(</span><span class="mi" id="MathJax-Span-80" style="font-family: MathJax_Math-italic;">x</span><span class="mo" id="MathJax-Span-81" style="font-family: MathJax_Main;">)</span><span class="mo" id="MathJax-Span-82" style="font-family: MathJax_Main;">.</span></span><span style="display: inline-block; width: 0px; height: 3.39em;"></span></span></span><span style="display: inline-block; overflow: hidden; vertical-align: -1.234em; border-left: 0px solid; width: 0px; height: 3.094em;"></span></span></nobr><span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mfrac><mi>d</mi><mrow><mi>d</mi><mi>x</mi></mrow></mfrac><mrow><mo>(</mo><msubsup><mo>∫</mo><mrow class="MJX-TeXAtom-ORD"><mi>a</mi></mrow><mrow class="MJX-TeXAtom-ORD"><mi>x</mi></mrow></msubsup><mi>f</mi><mo stretchy="false">(</mo><mi>u</mi><mo stretchy="false">)</mo><mspace width="thinmathspace"></mspace><mi>d</mi><mi>u</mi><mo>)</mo></mrow><mo>=</mo><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>.</mo></math></span></span></div><script type="math/tex; mode=display" id="MathJax-Element-6">\frac{d}{dx}\left( \int_{a}^{x} f(u)\,du\right)=f(x).</script></span></p>
<blockquote>
<p>with some complex markdown</p>
</blockquote>
<p>and R inline 2</p>
<p>and block</p>
<pre class="r"><code class="hljs"><span class="hljs-number">2</span>+<span class="hljs-number">2</span></code></pre>
<pre><code class="hljs">## [1] 4</code></pre>
</div>

Currently, we have in the HTML after the engine transformation for an example in the template, a structure like this

<p>
<label>...</label>
<input>...</input>
<span class="marginnote">
<span>
We know from 
<em>the first fundamental theorem of calculus</em>
 that for 
<!-- add follow other blocks content : text without tags, spans, ems, strongs, ... -->
</span>
</span>
</p>

The current CSS know how to format this span of class marginnote.

Two solutions:

  • We try to recreate the current structure with Lua filter. This means a lot of transformation to remove the div and the <p>. From my tests, it is not easy and I am not really sure this would allow to have all markdown content inside the margin.
  • Keep a structure close the pandoc fenced div generated one and adding what missing nodes, then adapt the CSS so that it displays correctly. Currently it don't works for a <div> instead of <p> and <p> instead of strings without nodes.

I'll keep on going with the second solution - on the Lua side it is simpler but I did not yet try to adjust the CSS.

cderv avatar Oct 01 '20 16:10 cderv