For some new coding articles I’ve been working on, I’m currently experimenting with a hybrid presentation, because I encountered two serious problems with a pla

For some new coding articles I’ve been working on, I’m currently experimenting with a hybrid presentation, because I encountered two serious problems with a plain text representation. One was that small devices are awful at handling them. On a phone screen held in portrait orientation, even relatively short lines of code may be too wide to fit. Requiring constant horizontal scrolling is not pleasant or efficient for the reader. If you rotate the phone to landscape instead, the scaling and text resizing behaviour in mobile browsers can be surprising and not at all helpful. The other problem was that in some cases I don’t just want to show plain code, I want to show some sort of annotation overlaid on top of it that illustrates the idea I’m discussing in the article. Once you go beyond simple things like line numbers or basic highlighting, you start to need an image for this. My original thought was to have an SVG overlaid on plain text code, but you can’t control the underlying text well enough to align them reliably, not least because of the first issue above. So then I moved to using an SVG for everything, code and annotations alike. This guarantees everything is aligned correctly, and you can also guarantee the whole thing fits and scales sensibly on small screens and in different orientations using the usual CSS for images. You can even have the text partially selectable, though anything produced in a graphics package is unlikely to faithfully reproduce white space used for indentation and the like. I’d like to investigate whether it’s possible to have fully-selectable listing text that copies and pastes correctly using a hand-crafted SVG, but this approach might prove to be prohibitively time-consuming even if it’s possible. I’d also like to know whether assistive technologies like screen readers would then handle the text correctly. For now, I have settled on using SVGs for listings but also including a link to a plain text source file and somewhat detailed alt text describing the annotations. The longdesc attribute for an img element might have been a better way to do this, but it has been deprecated so browser support is in doubt. If anyone else has been experimenting with presenting illustrated code listings on the web, or has found a solution to mobile browsers doing strange things with listing formatting after device orientation changes, I’d be very interested to know about it.