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:

1. 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.

2. 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.

3. 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

4. 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>
            

   The left/top/width/height attributes 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.

   Unfortunately, the mix-blend-mode trick 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 filter attribute, but it’s unwieldy.

5. 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).

6. 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.

7. Publish! Nothing fancy here, just rsync the directory to the Scaleway instance that hosts this blog.