webgiss / niolesk

Edit diagrams from textual descriptions! : A kroki interface.
https://niolesk.top
MIT License
87 stars 10 forks source link

Excalidraw diagrams, preview: text not rendered in virgil font #44

Open deining opened 1 year ago

deining commented 1 year ago

By default, Excalidraw diagrams are rendered in Virgil font, this font is defined inside the SVG returned by kroki service:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161.4166717529297 45" width="161.4166717529297" height="45">
  <!-- svg-source:excalidraw -->

  <defs>
    <style class="style-fonts">
      @font-face {
        font-family: "Virgil";
        src: url("https://unpkg.com/@excalidraw/excalidraw@0.15.3/dist/excalidraw-assets/Virgil.woff2");
      }
      @font-face {
        font-family: "Cascadia";
        src: url("https://unpkg.com/@excalidraw/excalidraw@0.15.3/dist/excalidraw-assets/Cascadia.woff2");
      }
    </style>
  </defs>

In the right preview pane, text inside Excalidraw diagrams is not rendered in Virgil Font.

Excalidraw source of a diagram that reveals the deficiency:

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "Yg0DY0CKfYkWhRoWGWAdX",
      "type": "text",
      "x": 755,
      "y": 291,
      "width": 141.4166717529297,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "roundness": null,
      "seed": 930373583,
      "version": 43,
      "versionNonce": 593511215,
      "isDeleted": false,
      "boundElements": null,
      "updated": 1699117840578,
      "link": null,
      "locked": false,
      "text": "Niolesk is great!",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "top",
      "baseline": 18,
      "containerId": null,
      "originalText": "Niolesk is great!",
      "lineHeight": 1.25
    }
  ],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}
gissehel commented 1 year ago

Hello,

Indeed, I confirm the issue. It seems to be due to the fact that the font is an external resource, and for security reasons, the external resources are not loaded when used as an img tag.

There seems to be a workaround which is to use an object tag to embed the svg. But it has some downsides I'm currently struggling with...