plotly / plotly/plotly.js

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

Abierto
#5,096 4 comentarios 0 reacciones 1 asignado Ver en GitHub

@alexshoe ya está trabajando en esto.

Desde el 28/10/2025.

bug P2
Lenguaje dominante
JavaScript
Estrellas
18.3k
Forks
2k
Merge medio
2 d 12 h
PR fusionados (30 d)
28

Descripción

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".

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.