
Original Sidney Paget illustration from The Man with the Twisted Lip
I made a website from the 1892 Sherlock Holmes collection The Adventures of Sherlock Holmes. 12 stories, some of which you may well recognise, originally published in serial form in The Strand magazine.
Iâm not a huge Holmes fan, but these stories provided a few minutesâ Victorian pleasure. It can be fun reading Doyleâs character between the lines; protestant, conservative, anti-royalist, a streak perhaps of non-conformism, some romanticism. They have generated some excellent pastiches and adaptations: the best probably being Anthony Burgessâ Murder to Music, along with some of the Cumberbatch and Freeman BBC episodes.
So, bearing in mind my slightly meh attitude to the books, and the fact you can easily download them for free, why do this?
HTML is the best format for online books
What I mean is: I like the idea of navigating to a website and starting to read. You donât need a new device or software; just your browser and a phone, tablet or PC (assuming the textâs been responsively styled). Pick up your reading at any time from another device.
The Sherlock Holmes stories seemed just right for this. Theyâre short (most can be read in 15-30 minutes), not too high brow and are freely available in pretty decent HTML on Gutenberg. Victorian readers would have bought the magazine every month; in a better world, you could possibly see modern readers subscribing via RSS, and reading each new episode in their RSS software (another advantage: HTML is infinitely portable). An attentive reader could also start (cross)referencing via the magic of hyperlinks to create all sorts of interesting rabbit holes.
The technical challenge
Behind the scenes Iâm using my normal technical stack: Jekyll, Tachyons, Github and Netlify. The stories are broken down into a chapters collection, which can be used to automatically generate a table of contents, and to split the stories into separate pages. Disappointingly, I discovered only the first story, A Scandal in Bohemia, is divided into chapters, so this wasnât really necessary, and reading is actually easier if you donât split the text up into separate pages. Who knew â scrolling is better on a screen than flipping, although this may not apply if you were HTMLifyimg War and Peace.
(The table of contents did mean I got to use my favourite HTML elements, details
and summary
: semantic and accessible toggable content in pure HTML, Iâve no idea why these arenât all over the internet.)
You can bookmark your place in the text by clicking on the #
sign that appears when you hover over a paragraph. Unfortunately, the (excellent) anchor.js doesnât work particularly well on mobile; so much so Iâve decided to hide (as in display:none
) anchors on narrow screens. I may take Dmitry Fadeyevâs approach and add a bookmark toggle to the page so that anchors are either visible or not, regardless of the device. If you are reading across devices youâll also need to use a cloud bookmarking service (Firefox has one baked in). This isnât perfect, but itâs keeping it no-login-required pure âşď¸.
(Note to self: this could be a good time to look into some sort of AWS integration for generating bookmarks on the fly.)
Iâve also been using a very simple âframeworkâ I made a few months back. Jekyll Tachyons creates a basic Jekyll site complete with the Tachyons framework. Most interestingly, you can choose to place styles in the document head
or in a separate stylesheet, and pick and choose the Tachyons modules it loads. Iâm also using it on this site.
There are lots of possibilities here. I could index the text with Algolia to make it searchable and somehow categorised. If only I had the time to look into the potential of plain HTML and text.