There exists in CSS a selector called ::selected, whose purpose – in those browsers which support it – is to allow a web page to specify the style that is to be used to mark the parts of the page that are selected by the user (by, for example, dragging the cursor across a block of text). The idea was that if you’re on a site which uses an orange-coloured theme for everything else, that you could have perhaps white-on-tangerine text when you select content on the site. Simple!
I decided that this didn’t go far enough, and decided to write a program to allow the embedding of (hidden until selected) images within the text of a web page, by setting the ::selected style of each individual letter. Put simply, this means that you can make a single-file web page with no dependency on images or Javascript which appears to contain only text: but when the text is selected, an image appears!
The program that generates these pages is written in Ruby, and leverages the RMagick library to read in the pixel colours of the image you’d like to convert. You can use anything you like as the source text: I’ve been using Microsoft EULAs and books of the Bible for it, mostly, because both can easily be copy-pasted from all over the Internet. My program automatically performs basic posterisation on the image, first, in order to reduce the number of colours in the image, which significantly reduces the file size. Each additional colour used in the image adds an average of 167 bytes to the size of the file, which doesn’t sound like a lot until you compare the difference between an image with 140 colours and an image with 20000 (clue: it’s over 3Mb), and this is also significant when you understand the rendering implications: enough colours in an image and it’s likely to consistently crash web browsers.
Naturally, these new features don’t work in Microsoft Internet Explorer yet, but you ought to be used to that.
So: go try it out for yourself, and – if you like it – you can download the source code and have a play.
0 comments
Comments are closed.