Kid Radd Compatibility Tweaks
When Dan Miller originally wrote Kid Radd in 2002, the Internet was a much simpler, and slower, place. Most people accessed the Web through a dial-up connection.
Instead of serving monolithic, precomposed images as most webcomics do, Dan had the rather clever idea of building the comic straight in the browser using HTML to lay out and scale tiny GIF images to form the full panels.
But as technology has marched on during the past ten years, the comic began to get left behind. It started breaking in sometimes subtle, sometimes not-so-subtle ways in various browsers.
The latest Webkit browsers don't display anything at all any more.
So, for anyone interested, here are the details of the tweaks I've made to the comic to get it (mostly) back up to speed for 2013-era browsers.
Frame-based Viewer - While it was probably a good idea at the time, it doesn't work at all in modern Webkit. I ripped out the frame-based comic viewer, so now each comic's HTML page is viewed directly. A bit of CSS and Javascript shows and hides each panel to emulate the old behavior.
Music - Thankfully (depending on your point of view), MIDI music has fallen out of favor these days. All MIDI music has been convered to OGG/MP3 and embedded using the HTML5 <audio> tag. I suppose this is a bit against the minimalistic spirit of the original comic (the OGGs are 50 times the file size of the MIDIs!). Oh well.
Image Scaling - Newer browsers helpfully interpolate images when scaling them. When tiny sprites are upscaled, they become horribly blurry. A CSS tweak was all it took to fix Firefox and IE. For Chrome (and other Webkits), I wrote a script to create pre-scaled versions of images in every required size. Javascript swaps out the orignals with the pre-scaled versions. As of 2015, Chrome finally supports scaling images properly, so now the prescaled images are only used when I detect they're needed.
Image Pre-loading - Some strips pre-load images that are used in later panels. The old Javascripty way of doing this doesn't work so well any more, so I removed the Javascript part and just made the preload off-screen.
Keyboard Navigation - This is just a straight-up enhancement on my part. The left and right arrow keys can now be used to navigate the comic.
Zoom - Another enhancement, since most people don't have 1024x768 monitors any more. (I suppose you could just use your browser's zoom feature instead.)
Hopefully these fixes will keep the comic readable for at least a few more years. :)
- Brad Greco
| |
