Spacing and fonts in TikZ nodes

[c-minz]

White spaces and text (fonts and sizes) in TikZ nodes are not translated all correctly. The issues are described below the example tex and its outputs.

Here is a tex-file to test various nodes in TikZ:

\documentclass[12pt]{article}
\usepackage{tikz}

\begin{document}
\begin{tikzpicture}[every node/.style={inner sep=0pt, fill=white}]
    \draw[step=1cm, black!20, thin] (0, 0) grid (8, 5);
    \node[text=black!20, font=\footnotesize] at (0, 0) [below right]
        {All nodes have \verb$inner sep=0pt$.};

    \node[draw=pink, yshift=1em] at (4, 3)
        {y-shifted by 1em};
    \node[draw=red, align=center] at (3, 2) [below=1ex]
        {Align and forced\\line break};
    \node[draw=blue] (8-ball) at (8, 2) [left=0.5cm]
        {\thinspace\tikz[baseline=-0.5ex]\node[fill=black, text=white, font=\bfseries, circle, minimum size=2em] at (0, 0) {8};\thinspace};
    \node[draw=orange] (maths spacing) at (2, 4) [above right=10pt]
        {spacing in maths \_$\thinspace \mathrm{e}^{\pi \; \mathrm{i}} = -1 \,$\_};
    \node[draw=green, font=\tiny] at (2, 1) [below=1em]
        {A tiny and somewhat longer text};
\end{tikzpicture}
\end{document}

Output

Output of pdflatex (TeX Live 2025 on Kubuntu 24.04) --- rescaled to 150%, cropped:

Output of bin/latexmlc (run on my local fork, up-to-date on 14.01.2026) --- rescaled to 200%, cropped:
Render on Opera v126.0.5750.37 (with the settings: Font-size: 16, Standard font: Liberation Serif, Mathematical font: Latin Modern Math):

Render on Firefox v147.0 (with the settings: Font-size: 16, Default font: Noto Serif):

Issues

Missing white spaces

The node (8-ball) is supposed to have a \thinspace before and after the sub-TikZ. This seems to be recognized when computing the width of the node (blue frame is wider than tall), but the white spaces are not included in the output. The same happens with the mathematical expression in node (maths spacing), which should have white space at the beginning and end of the inline-math. Note that the white space \; between the pi and the i symbols is rendered correctly (perhaps up to some white space sizing #2241).

Font-styles

When computing the size of the nodes (all text node in the example), it seems that a fixed font-family and font-size is used (as in LaTeX), but the font is not fixed in the SVG-output, so the node size and text size do not match. The relative font causes problems with the browser and default settings. I believe for such TikZ graphics, it is necessary to fix an available font, even though it is hard to do this platform and browser independent. I don't have a good suggestion to solve the font selection, but perhaps fixing the font size to the one used in the tex-file (here 12pt) could already improve the output.

Reduced font-size and node width

There seems to be also an incorrectly computed width for resized text, see the green node with the tiny text, for example. I believe that is the same as #2695.

[xworld21]

When computing the size of the nodes (all text node in the example), it seems that a fixed font-family and font-size is used (as in LaTeX), but the font is not fixed in the SVG-output, so the node size and text size do not match. The relative font causes problems with the browser and default settings. I believe for such TikZ graphics, it is necessary to fix an available font, even though it is hard to do this platform and browser independent. I don't have a good suggestion to solve the font selection, but perhaps fixing the font size to the one used in the tex-file (here 12pt) could already improve the output.

Two comments:

• BookML includes a partial workaround for sizing mismatches (simplifying the matter, images are scaled with zoom: according to the root font size). That requires coordination between setting the :root font size and the zoom factor, so LaTeXML should probably avoid those tricks. However, LaTeXML could emit most/all sizes in rem units, which would achieve the same result without tricks. This also require LaTeXML handling the 10pt, 11pt, 12pt, etc options in order to have the correct root font size (support font sizes provided by the class #2377).
• I suggested before that the content of foreignObject should be centred with flex, or better centred horizontally and aligned to the desired baseline (it requires the new text-box-trim properties), so that the size of the foreignObject becomes completely irrelevant. This can be customised in CSS using the information in --ltx-fo-(width|height|depth), and I'll probably integrate it in BookML after v0.9 is out. There are gotchas (e.g. one should disable text wrapping, but only for horizontal boxes...).