toImage function does not retain fonts that use quotes because of TOBESTRIPPED

[hwalinga]

When you use toImage on a plotly plot the resulting image will not use the font currently on display if that font uses a font that has to be quoted. This is because those fonts are converted from "Open Sans" to TOBESTRIPPEDOpen SansTOBESTRIPPED. I suppose those than have 'to be stripped', but that does not happen as it seems.

You can see this happening in this plot:

https://codepen.io/hwalinga/pen/GRZrBoq

If you watch closely you can indeed see the font is thicker in the below converted image. But you can also inspect the element of the rendered plot and converted plot if you want to see the bug in action:

The title on the rendered plot will be:

<text class="gtitle" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;" x="952" y="50" text-anchor="middle" dy="0em" data-unformatted="Title with different font" data-math="N">Title with different font</text>

The title on the converted plot (which you can inspect with "right click" -> "View Image" and then use your inspect tools.)

<text xmlns="http://www.w3.org/2000/svg" class="gtitle" style="font-family: TOBESTRIPPEDOpen SansTOBESTRIPPED, verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;" x="350" y="50" text-anchor="middle" dy="0em">Title with different font</text>

Not sure if this is maybe because this is a quote within a quote?

Also it seems you were already aware that this was an inappropriate solution to fixing quotation issues as by #1697. I hope with this bug report you will be more urged to implement something more robust soon.

EDIT:

There is a work around for these 'font-family' problems. Most application don't need to have font names with spaces to be quoted. In fact, this is in the CSS just a recommendation. 1 So you can just set the font-family without giving it quotes. It seems to have no bad side effect as I can see. Setting { font: { family: 'Open Sans, verdana, arial, sans-serif' }} in the layout set the same default fonts where it does not bug on "Open Sans".

[archmoj]

@antoinerg as you worked on a similar issue recently, do you think we should close this issue or if we could do better?

[antoinerg]

@antoinerg as you worked on a similar issue recently, do you think we should close this issue or if we could do better?

I think we can close the current issue in favor of #4885 . Unfortunately, fixing the way quotes are managed won't be enough to get custom fonts to render. You can find the reason/explanation why that is in #4885 (comment) .

[hwalinga]

No, this issue is unrelated to using custom fonts or not.

It has to do with the way that plotly handles quotation when creating the SVG. My work around proofs that it works as expected if you omit the quotes. Also, this issue already happens even with the default fonts specified by plotly (because the default font for plotly is Open Sans). So, even if you don't touch fonts at all, Plotly fails to deliver something consistent.

To fix this at least for those people that don't even touch fonts at all, you could simply change this line:

plotly.js/src/plots/layout_attributes.js

Line 26 in 9ffa03d

globalFont.family.dflt = '"Open Sans", verdana, arial, sans-serif';

To a collection of fonts that doesn't use quotes, (just omitting "Open Sans" would be enough, as that isn't a safe font anyway. You might even prepend Arial there, as that is even a safer font to use.

Or instead simply just omit quotes completely in this line! As quotation in font families is only a recommendation and as far as I can see here has no side-effects.