Text labels in plots are offset towards the bottom

[glts]

This problem is apparent in all plots generated by Huri (see eg the Huri example worksheet). All text labels are a bit below where they should be, by about the height of a character. The effect is especially ugly with labels in scatter plots, where the label text is outside the label.

It seems that the generated SVG is fine. But there is an additional <pre> element around the <svg> element: when I remove the wrapping <pre> via browser dev tools, the offset disappears.

Perhaps this can be fixed with a CSS adjustment? So far I didn’t find out how.

[glts]

I investigated a little and found the cause of this issue.

• The transformation of the raw SVG in huri.plot/mangle-ids adds newlines around the contents of the label text elements. Labels are thus changed from <text>label</text> to <text>\nlabel\n</text>.
• The Gorilla REPL CSS includes the rule div.output pre { white-space: pre-wrap; }. This rule applies to the rendered SVG elements and causes the whitespace around the label text to be wrapped.

So, the culprit seems to be mangle-ids. It should not change the label element content.

One possible solution is to use data.xml instead of clojure.xml. Today, the SVG parsing and emitting is done through clojure.xml. Unfortunately, clojure.xml has an extremely limited idea of XML. It is not sufficient here. With data.xml (an additional dependency) the problem goes away.