HYPERLINKS IN HANDWRITING
(or, How this blog is written)
I’ve written and published a few posts already; so, to maintain momentum and for future reference, I figured I might as well document the process. Here are the steps I follow:
Think about what I want to say. While this is an essential part of any writing, it's perhaps even more important when writing by hand; for the simple reason that the medium offers very limited editing capability as compared to a text editor. I’m using a reMarkable 2 which allows for erasure, but for major revisions I still have to go through multiple drafts, each written from scratch. I quite like that. Posts hitherto have not been edited, or only slightly; on this blog, I want to thoughtfully embrace imperfection.
Write! I use the medium-stroked fineliner tool. Before I start, I enable the "lined-small-with-margin" template, which helps prevent skew of the handwriting (it is important later on). When done, I switch back to blank background.
Prepare the images. With the reMarkable companion app, I download the blog document to my Mac as a PDF. I then use ImageMagick to produce PNGs:
$ convert -density 600 blog.pdf blog.png
This gives me one PNG per page (600dpi, 8bpp). The resolution is a bit high, leading to quite fat images (~400 KB per page), but they look crisp – particularly on retina displays. I’ll continue experimenting with optimizing the images. pngquant helps somewhat, but not much.
Anyway, I then manually crop the images, leaving tiny margins, and when it's a multi-page post I combine the images into one:
$ convert -append blog*.png new-post.png
HTML-ize and add links. There's no static site generator – the HTMLs are written manually (dare I say “by hand”?) They’re really simple: an
<img>element with the post content, a few others for the header and navigation, and some
<meta>tags. Oh, yeah, and links.
Here’s how they’re done: the post container
<article>is positioned relatively, and the
<a>s under it are styled as
position: absolute;so they overlap the image, being blue rectangles on top of it. But they also have
mix-blend-mode: screen;making the text underneath visible and coloured. An example:
<article class="post"> <img src="post.png"> <a style="left: 60%; top: 40%; width: 15%; height: 5%;" href="https://target.url"></a> </article>
left/top/width/heightattributes need to be percentages, not pixels, since the images can be resized to cater for different screen sizes. I generate them by uploading the image to pixspy.com, making a selection, and evaluating a simple JS snippet in the browser console that produces the desired CSS.
mix-blend-modetrick doesn’t work in the more WCAG-friendly case where the
<img>is a direct child of
<a>, as in the navigation links. For those, I’m using the
filterattribute, but it’s unwieldy.
Prepare a transcript. Did you know that macOS’s Preview automatically OCRs handwriting? I discovered it by accident, and it greatly speeds up the process. I just need to correct the errors (stemming from my poor penmanship).
Update the index. This is a bit tedious since I need to re-generate all links as above (I want the pasts to be listed reverse-chronologically, newest first). Fortunately, reMarkable supports cut-and-paste, so I don't have to rewrite everything each time.
Publish! Nothing fancy here, just rsync the directory to the Scaleway instance that hosts this blog.