SVG images fall back to a different font when Source Code Pro isn't available on system

[meator]

I am documenting this primarily for myself.

If the Source Code Pro font isn't available (provided by the font-adobe-source-code-pro package on Void Linux), SVG falls back to a different font even though it is available at https://xbps-src-tutorials.github.io/fonts/source-code-pro-v11-all-charsets-500.woff2

The 'Source Code Pro' font face is defined in https://xbps-src-tutorials.github.io/fonts/fonts.css at the bottom:

/* source-code-pro-500 - latin_vietnamese_latin-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  src: url('source-code-pro-v11-all-charsets-500.woff2') format('woff2');
}

This makes sure that text using the Source Code Pro font family is using the font from the correct location. But it isn't regarded when a SVG file is included using <img> (which corresponds to ![description](path) in Markdown).

The SVG files want Source Code Pro, but not the one provided by fonts/fonts.css. This means that when font-adobe-source-code-pro isn't installed, the SVG's will use an ugly fallback font.

Solutions that don't work

Embed fonts into the SVGs

draw.io supports embedding fonts into SVGs:

I have tried to do this in 276dfdd, but I have then realized that it does nothing. It just inflates image's size, but Source Code Pro doesn't get embedded I assume (maybe because it's set as an external font in draw.io; if Source Code Pro could be properly imported to draw.io, embedding fonts could work; this is redundant though, the font is already in https://xbps-src-tutorials.github.io/fonts/source-code-pro-v11-all-charsets-500.woff2). I have reverted this in 760c8ce.

Set the font to https://xbps-src-tutorials.github.io/fonts/source-code-pro-v11-all-charsets-500.woff2 in the SVG

Setting it to a absolute path is wrong. Local deployments of the book and built books from release archives would still reference https://xbps-src-tutorials.github.io/fonts/source-code-pro-v11-all-charsets-500.woff2, which is bad.

The SVGs could somehow reference fonts/source-code-pro-v11-all-charsets-500.woff2 relatively. But that will likely not work. I don't know whether it's even possible.

Editing the SVGs should be avoided. They are generated by draw.io. Editing this generated content would mean that the images would have to be reedited each time they are updated. A script could be made for that. But that adds complexity.

Embed the XML into the HTML

This fixes the font problem. But it makes the image misaligned:

It also overflows the margin (highlighted by the red line on the right). The SVG doesn't respect margins when included verbatim in src/packaging/j4-dmenu-desktop.md

Embed the XML into the HTML, but set width="100%" and height="100%"

This solution consists of modifying the width and height XML parameters of the SVGs.

This is better than the previous solution, but the misalignment presists:

The red line on the right side shows that margins are respected. Resizing the browser works as expected.

This solution requires editing the SVG. As described earlier, I want to avoid this.

Use draw.io's embedding options

draw.io provides several ways to embed its diagrams to web pages. They are described below:

Embed SVG

This does respect margins by default, but misalignment described above still occurs.

For reasons described below, I hesitate to trust any Embed options of draw.io including this one.

Embed HTML

This pulls 3 502 KiB of Javascript hosted at https://viewer.diagrams.net/js/viewer-static.min.js. Having external resources like this would mean that the diagrams won't work offline. People can build and serve this book locally and built book archives are released for offline use, so this isn't desirable.

I could bundle viewer-static.min.js with this book. But that has many disadvantages.

Embed IFrame

This doesn't work offline whatsoever.

Screw SVG, use JPEG or something

draw.io exports of images are pretty low quality. I won't replace SVG by it.

My thoughts

Embedding the SVG directly, if aligned properly, looks like the best option. This has the added bonus of being able to select and copy the text of the diagrams.

The second best option would be to somehow use the Source Code Pro defined in fonts/fonts.css in the SVGs. I don't know how to do that or whether it's possible.

None of these options are good enough so the problem will persist until a solution is found.

[meator]

The following article series is very interesting: https://fasterthanli.me/series/dont-shell-out/part-1

I might get "inspired".

[meator]

Current solution:

go to draw.io -> export to SVG with my preferred settings (no border, transparency, embed images only) -> fire up my text editor -> remove width and height params from the top <svg> tag -> remove the top <defs> tag containing a <style> tag pointing to my web font -> (important!) format the file with xmllint --format file.svg | sponge file.svg -> include the file verbatim in the webpage with special mdBook syntax: {{#include my/file.svg}}

This is very far from perfect, but it works perfectly well if the reader doesn't have Source Code Pro installed on their computer, both when viewing online at https://xbps-src-tutorials.github.io/ and when viewing offline. Text in SVGs is now selectable and copyable, which is an improvement.