vlmantova / bookml

bookdown flavoured GitBook port for LaTeXML
https://vlmantova.github.io/bookml/
GNU General Public License v3.0
15 stars 1 forks source link

Image issues #24

Open rzach opened 1 month ago

rzach commented 1 month ago

I updated bookml to 10.1 and I'm getting weird behavior with images in my book. I'm guessing it's related to the image scaling changes in 0.8.0. Images are generated with \tikzpicture. With and without bmlimage:

Screenshot From 2024-10-20 17-00-17

Screenshot From 2024-10-20 16-58-55

I had avoided bmlimage because I don't want the fonts inside images to be Computer Modern but rather the same as the surrounding font (note the A, C, and D. The new scaling breaks this. I could live with bmlimage but is there a way to keep the fonts straight?

With bmlimage I also get these Inkscape warnings:

- post-processing Graphics index.html 2 to process
** (org.inkscape.Inkscape:74332): WARNING **: 16:59:45.708: Failed to find resource file 'inkex.py'. Looked in:
    /home/zach/.config/inkscape/extensions/inkex.py
    /usr/share/inkscape/extensions/inkex.py

** (org.inkscape.Inkscape:74332): WARNING **: 16:59:45.708: Failed to find resource file 'simplepath.py'. Looked in:
    /home/zach/.config/inkscape/extensions/simplepath.py
    /usr/share/inkscape/extensions/simplepath.py

** (org.inkscape.Inkscape:74332): WARNING **: 16:59:45.708: Failed to find resource file 'simplestyle.py'. Looked in:
    /home/zach/.config/inkscape/extensions/simplestyle.py
    /usr/share/inkscape/extensions/simplestyle.py
rzach commented 1 month ago

Source code:

\documentclass{article}

\usepackage{bookml/bookml}
\bmlImageEnvironment{tikzpicture}
\usepackage{tikz}

\usetikzlibrary{arrows,positioning,shapes} 
\tikzset{phantom_shape/.style={thick, fill=none, minimum width=30pt, minimum height=30pt}, % TB: renders the shape invisible
grey_shape/.style={thick, fill=black!20, draw, minimum width=30pt, minimum height=30pt}, % TB: renders a light grey shape with a black outline
white_shape/.style={thick, fill=none, draw, minimum width=30pt, minimum height=30pt} % TB: renders a white shape with a black outline
}

\begin{document}
\begin{tikzpicture}
  \node (atom1) at (0,2) {$1$};
  \node (atom2) at (2,2) {$2$};
  \node (atom3) at (2,0) {$3$};
  \node (atom4) at (0,0) {$4$};
  \draw[->, thick] (atom1)--(atom2);
  \draw[->, thick] (atom2)--(atom3);
  \draw[->, thick] (atom3)--(atom4);
  \draw[->, thick] (atom4)--(atom1);
  \draw[->, thick] (atom1) -- (atom3);
\end{tikzpicture}
\bmlDescription{This is a test}

\begin{tikzpicture}
    \node[circle, grey_shape] (cat1) {A};
    \node[right=10pt of cat1, diamond, phantom_shape] (cat2)  { } ;
    \node[right=10pt of cat2, circle, white_shape] (cat3)  {C} ;
    \node[right=10pt of cat3, white_shape] (cat4)  {D};
\end{tikzpicture}
\bmlDescription{There are three shapes: the first shape is a grey circle labelled A, some empty space, the second shape is a white circle labelled C, and the fourth a white square labelled D.}
\end{document}
xworld21 commented 1 month ago

I cannot reproduce it here with the 'official' Docker image (TeX Live 2021 final + LaTeXML 0.8.8 + BookML 0.10.1). I get image Not perfect, but not as bad as your example.

Could you please check running plain latexml/latexmlpost and without importing the bookml package? Does that improve things?

rzach commented 1 month ago

Ok, latexml actually produces the same (broken) output. No idea what changed; it's possible that it's a problem in TikZ itself (I updated to TeXLive 2024).

I'll just use bmlimage. Is there a way to make it use the same fonts in images as in the surrounding text? (I'm guessing it's because bookml.sty.ltxml calls dvisvgm with the --no-fonts option, i.e., text is converted to paths.)

xworld21 commented 1 month ago

it's possible that it's a problem in TikZ itself (I updated to TeXLive 2024).

Could you please report it to LaTeXML? It sounds indeed like TikZ has changed something recently. They don't test TeX Live 2024 regularly, nor TikZ, so I am sure they would like to know.

Is there a way to make it use the same fonts in images as in the surrounding text?

No, or at least not in a reliable way. I'll keep the issue open while I test a few ideas (and also while the upstream bug is still there), but I am not optimistic about it. External SVGs do not interact nicely with the CSS of the outer document.

rzach commented 1 month ago

Actually I lied: I ran it through just latexmlc but I forgot that I was loading bookml.sty. With bookml.sty the output is: Screenshot From 2024-10-24 10-14-33

while with just latexml.sty it is: Screenshot From 2024-10-24 10-11-24

So bookml.sty.ltxml seems to be doing something to cause this.

xworld21 commented 1 month ago

Firefox bug! It looks like Firefox is positioning some SVG elements, including <foreignObject>, before applying the CSS zoom property. Then you try to rescale via zoom, as BookML does, and everything ends up in the wrong place. And I see all sorts of rendering glitches when modifying the code in the inspector. Nasty. I'll figure out a way to report this upstream.

xworld21 commented 1 month ago

I have disabled SVG scaling in Firefox. Unfortunately, images will look very odd when changing font size, but still much closer to the intended look. I believe Firefox will fix it soon, though (https://bugzilla.mozilla.org/show_bug.cgi?id=1927186).