Properly exporting latex to HTML from org-mode using dvisvgm / dvipng

Question

I need to export my org notes containing latex to HTML format. Example document :

#+latex_class: article
#+latex_header: \usepackage{chemfig} 
#+latex_header: \usepackage[version=3]{mhchem}
#+latex_compiler: pdflatex
#+options: tex:t
#+date: \today
#+title: something
#+author: me

 $$U_l=\frac{-A}{6}\Bigg[\frac{2}{\alpha^2-4}+\frac{2}{\alpha^2}+\ln{\Big(\frac{\alpha^2-4}{\alpha^2}\Big)}\Bigg]$$

 $$\ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2
 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}$$

 $$\chemfig{C*3(---)}$$

As I am using chemfig and other packages, using mathjax #+options: tex:t (default), won't render them in the HTML page:

Now I have two methods to solve this, either to use dvipng or dvisvgm.

Using dvipng

To use dvipng, I changed mathjax to #+options: tex:dvipng, however as it can be seen, it does not render chemfig (and few other like tikz) properly (instead of 'C', there should have been a cyclopropane molecule) :

Imagemagick also shows the same behaviour. So my first question is : how can I get dvipng to render the correct output?

Using dvisvgm

Next I tried to use dvisvgm using #+options: tex:dvisvgm, and while it renders everything correctly, It also scales the images to almost the full width of the page :

However I can fix this by modifying .org-svg { width: 90%; } to .org-svg { width: auto; } in the HTML source code as mentioned here. So my second question would be : How can I implement this setting for all org files whenever I export to HTML automatically? (as doing it manually each time I export would be tedious).

My third question would be that is it possible to use mathjax for normal math and dvipng/dvisvgm for other packages like packages like chemfig in the HTML output?

Please also suggest if there is another method to achieve this..

Answer 1

Here is my (maybe somewhat hacky) fix. Put this in your config file.

(with-eval-after-load 'ox-html
  (setq org-html-head
        (replace-regexp-in-string
         ".org-svg { width: 90%; }"
         ".org-svg { width: auto; }"
         org-html-style-default)))

---

How did I came up with this? Reading the org-mode manual's section about CSS export, I found out about org-html-style-default. Then doing C-h v org-html-style-default RET, we read the documentation,

The default style specification for exported HTML files. You can use ‘org-html-head’ and ‘org-html-head-extra’ to add to this style. If you don’t want to include this default style, customize ‘org-html-head-include-default-style’.

We see that org-html-style-default is a string and we want to edit a small section of it. Namely, .org-svg { width: 90%; } to .org-svg { width: auto; }.

In order to do that, I thought we could just copy over org-html-style-default to org-html-head and replace the substring .org-svg { width: 90%; } to .org-svg { width: auto; }. Which is exactly what the above given code does.

Now, I am not an expert in elisp so I am not sure if the above way or the function replace-regexp-in-string is the best way of accomplishing what we want. I played around in the scratch buffer a bit to test that it does not change the original string which in our case is org-html-style-default and assigns a new one (org-html-style) after modifying the substring in the original string.