How do I use siunitx-like commands to format quantities?

[mlincett]

Description

New to Quarto here (also new to pandoc). I would like to use macros in siunitx style to format quantities and units of measure. These are supported by pandoc, but not by MathJax.

I understand I could load LaTeX packages in the PDF engine but this would not apply to HTML.

Is there no current way of achieving native formatting for quantities and units in Quarto?

---
title: "Astronomy formular"
---

## AB magnitude

$$m_\text{AB} \approx -2.5 \log_{10} \left(\frac{f_{\nu}}{\qty{3631}{Jy}}\right)$$

Note: \qty{}{} used to be \SI{}{}.

[mcanouil]

If none of the equation engine supports it (MathJax, KaTeX, etc.), there is nothing we can do.
But di you look at physics which is supported in MathJax and Katex?

• Is it possible to use latex package in html without change any setting? #1620

[mlincett]

Unfortunately physics does not provide, as far as I know, functionality to format quantities and units (the \qty command has a different usage in the two packages).

Support for such macros is also unavailable in KaTeX so I take note there is no viable solution as of now.

Thank you for clarifying.

[mcanouil]

MathJax and KaTeX are not the only JS libraries, so you might be able to find/use another with what you need, but since they are the major ones I would not put my expectations too high.

[baptiste]

I used siunitx in the past, but recently I've found that I don't need the full functionality, and since it's not supported by Mathjax I decided to go for a poor man's version of it with just two or three basic macros:

\newcommand{\unit}[1]{\,\mathrm{#1}}
\newcommand{\degC}{^\circ{\mathrm C}}
\newcommand{\tothe}[1]{\times 10^{#1}}

These will work fine with the quarto-pandoc-mathjax toolchain, not just for LaTeX but also Html etc.

## Testing units

-   $100\degC$
-   $3\tothe{5}\unit{km/s}$ or $3\tothe{5}\unit{km\,s^{-1}}$
-   $6\unit{N m^2 kg^{-2}}$ or $6\unit{N m^2/kg^2}$
-   $10\unit{kHz} = 1\unit{s^{-4}}$
-   $\sin(x)\unit{m}$
-   $16\unit{µW/m\,K}$ is different from $16\unit{µW/mK}$

[ericpace]

Thank you for the tip. I'm just starting out with Quarto: where exactly do you place the \newcommands? I'm trying to generate a Quarto Book (so my YAML is in _quarto.yml) to HTML and PDF. Thanks!

[baptiste]

I forget what's worked for me (let alone what works now and maybe didn't back then), but here's a discussion: #2845

[mcaruel]

In case the goal Is to create a pdf, you can add \usepackage{sinunitx} to the preamble. A solution could be to create a lua filter that could pre-process the syntax \qty{742}{\per\second} for instance and simplify it so that it can be correctly displayed in the html output. The problem is that I don't know how to program such a filter 😅

[iangow]

Thanks. I copied \usepackage{sinunitx} without looking closely (should be \usepackage{siunitx}).

[amael-ls]

I actually ran into the same problem recently. As suggested by @mcaruel a solution could be to develop a Lua filter. I am learning Quarto, Pandoc, and Lua at the same time so it might take some time to develop, but I started such a filter for the siunitx package. So far it can handle the \num command only...

I will try to develop a bit more every day, especially for the \qty command but it will take a long time! The project can be found here

[solarchemist]

Recently stumbled upon this MathJax v3 implementation of siunitx v3 by @limefrogyank. It is simple, works beautifully and is well-documented.

To use it, I copied siunitx.js from its repo to my Quarto project and then made Quarto add it to the published site by setting resources: [ "path/to/siunitx.js" ] in the project dict. I also added the following to the top-level YAML:

format:
  html:
    html-math-method:
      method: mathjax
      url: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
    include-in-header:
      text: |
        <script>
        window.MathJax = {
          loader: {
            load: ['[custom]/siunitx.js', '[tex]/html'],
            paths: { custom: './path/to/' }
          },
          tex: {
            packages: { '[+]': ['siunitx', 'html'] },
            siunitx: {
              'per-mode': 'power'
            }
          }
        };
        </script>

And that should let you use siunitx v3 commands in Quarto :-)
Of course unless you put the siunitx macros inside dollar signs they will simply be ignored by pandoc in the HTML output, but that's a small price to pay for maintaining a single source that produces both PDF and HTML while still letting me use siunitx.

• https://github.com/limefrogyank/siunitx-pcc

[mcanouil]

@sjdh Please provide a complete and small reproducible document. Providing a snippet of code out of document context cannot be useful to help you. (check your code as clearly the last one is not valid)
Also, you might want to look the demo from the repository with the plugin.

[mcanouil]

Reading https://github.com/limefrogyank/siunitx-pcc lead to:

Input

Output

--- title: "Quarto Playground" format: html: html-math-method: mathjax include-in-header: text: | <script> window.MathJax = { loader: { load: ['[custom]/siunitx.js', '[tex]/html', '[tex]/gensymb'], paths: { custom: './' } }, tex: { packages: { '[+]': ['siunitx', 'html', 'gensymb'] }, siunitx: { 'per-mode': 'power' } } }; </script> --- - $\unit{kg.m.s^{-1}}$ - $\unit{\micro\meter}$ - $\unit{\um}$ - $\unit{\joule\per\mole\per\kelvin}$

[sjdh]

Thanks @mcanouil with your example I got it to work.

Here are all the details for anyone interested.

Self-contained project with siunitx unit support

Directory structure:

.
├── assets
│   └── siunitx.js
├── _quarto.yml
└── units.qmd

Download siunitx.js here

_quarto.yml

project:
  title: "Units"
  output-dir: "reports"
  resources: 
    - "./assets/siunitx.js"

units.qmd

---
title: "Quarto Playground"
format:
  html:
    html-math-method: mathjax
    include-in-header:
      text: |
        <script>
        window.MathJax = {
          loader: {
            load: ['[custom]/siunitx.js', '[tex]/html', '[tex]/gensymb'],
            paths: { custom: './assets/' }
          },
          tex: {
            packages: { '[+]': ['siunitx', 'html', 'gensymb'] },
            siunitx: {
              'per-mode': 'power'
            }
          }
        };
        </script>
---

- $\unit{kg.m.s^{-1}}$
- $\unit{\micro\meter}$
- $\unit{\um}$
- $\unit{\joule\per\mole\per\kelvin}$

Preview command

quarto preview units.qmd

Result

[solarchemist]

Please note that using per-mode=power appears to run into problems if you use \qtyrange with fractional units (admittedly an edge case). So you might be safer setting per-mode=fraction or per-mode=symbol in this kind of example code, lest others unwittingly run into the same problem (I have no idea how hard it might be to fix).

[solarchemist]

Please note that using per-mode=power appears to run into problems if you use \qtyrange with fractional units [...]

Revisiting this comment to note that the problem with per-mode=power has been resolved in siunitx-pcc.