svgling
svgling copied to clipboard
Stability of svgling.html across browsers and mathjax renderers
There are a bunch of combinations that aren't working great, this issue is to track them.
Safari issues with SVG sizing. Safari is handling scaling of SVGs with keepAspectRatio="none"
differently than other browsers (I want to say it's wrong, but I'm not really sure). What seems to happen is that if you set a height and leave width as auto
, then it provides a default size for the svg that uses the width that you'd get if you just stuck it in a div without scaling. Other browsers seem to use the width that would keep the aspect ratio. Ideally I guess I'd want to use intrinsic sizing or something, but I don't know how to get this to work.
nbconvert outputs. Like many similar issues I've had in the Lambda Notebook, MathJax responsive linebreaking is really unreliable in nbconvert outputs.
CommonHTML whitespace bugs. In the CommonHTML renderer, nodes consisting of a multiline MathJax output where the linebreaks are done by MathJax insert width:100%
in some of the contained spans. This impacts auto sizing of the containing node and adds some whitespace. For node labels in particular, the result is that their positioning is off. This only comes up for nbviewer outputs since CommonHTML is not even available for interactive Jupyter yet, but given that it's been by far the best renderer for nbconvert outputs, I will need to deal with this at some point.
This bug seems to only impact multiline nodes done via MathJax - so single MathJax lines are fine, and multiline nodes with mathjax where the linebreak is inserted manually via html somehow seem fine (though I haven't done a lot of this yet). I should investigate the possibility that this CommonHTML behavior is a MathJax bug? It doesn't happen in any other renderer.
I found a partial fix by using intrinsic sizing, but this is a bit variable/beta across browsers and in particular didn't handle nodes that mixed regular text and mathjax, so I decided it wasn't reliable enough to use. This potential fix works by adding the following style to the containing div in svgling.html.html_text_wrap
:
"width: -webkit-min-content;width: -moz-min-content;width: min-content;"
Needs triage (it's been 6 years).