Click here to see the “how this was made” feature
I wrote this piece by hand and photographed the pages. After that, I wanted to make the text copy-pasteable. So I put the images into one SVG file with a text overlay:

The font (Barlow Condensed – Italic Condensed) and the line height roughly match my handwriting’s dimensions. For spacing, the idea was that I’d add spacing characters that’ll be removed in Javascript during the copy-paste event that fires on the webpage.
I used ` (backtick) characters for narrow spaces that’ll be fully removed, and multiple spaces between words where I planned to collapse them into just 1 space. The hyperlinks are made using Inkscape’s Create Anchor functionality.
After exporting the SVG file, it required some post-processing:
- Embedding the font using
<style> - Replacing the ` characters with Six-per-em Space characters so the backticks don’t show up when selected
- Replacing the linked local image filepaths with full URLs
Finally, the SVG is fully added as an <svg> element into the HTML file. I couldn’t trigger on-copy Javascript events if I embedded it as an <object>.