Can't highlight text or ctrl-f in certain figures – inline the relevant svgs?

[csvoss]

Some figures have text that can't be highlighted, nor that can be searched for using ctrl-f in the browser. Chris tells me that the solution to this may be to inline the svgs, for example during the build process. I bet there's a nice way to perform this using svelte directly!

[ludwigschubert]

Jupp, that's right! Our main file is a .ejs — embedded javascript that gets evaluated at build time. Webpack is configured to use a ejs-loader plugin. In the index.ejs file we can then use a weird templating syntax, e.g. for our CSS:

<style id="distill-article-specific-styles">
    <%=require("../static/styles.css") %>
</style>

Will go through and inline SVGs! :-)

[ludwigschubert]

Update on an additional complication: The SVG export converted much of the text to outlines ("paths"). I'll see if I can re-export or redo some of the diagrams. :-)

[ludwigschubert]

I ended up importing most diagrams as PNGs, re-adding important text using HTML+CSS. Final polish TBD across all viewports, though.