XKCD example page from 2014-dec-06
Visit https://xkcd.com/
Capture title to clipboard
Right-click image | save image as | xkcd-orig-<title>.png | save
Open GIMP
File | open | xkcd-orig-<title>.png | open
file | save as | xkcd-orig-<title>.xcf | save
print the image
title the image
label the textual elements (“xkcd-<title>-fr01-04” etc)
label point elements (“speech line”)
Co-ords:
For each textual element
determine where the co-ords should go (just tl, tr, bl, br for now)
determine max width of bubble
Get pixel co-ords for textual element and point elements
Erase all textual and speech bubble elements
File | save as | xkcd-notext-<title>.xcf
File | export … | export | export
Close gimp
At www.csi18n.com, mkdir -p ~/csi18n/xkcd/yyyymmdd
scp ~/Worklife/mpsvr.com/csi18n/xkcd-notext-<title>.png al@www.csi18n.com:~/csi18n/xkcd/yyyymmdd
cd ~/csi18n/xkcd/yyyymmdd/
cp ../20141201/index.php . (or whichever is most recent version)
Edit index.html
search/replace previous title with new
IMG SRC to uploaded image
Change attribution
Change date at bottom
change code to handle particular number of elements
handler_X()
if ($el == 'X'
localstorage.setItem
d.innerHTMLs
xkcdShow()
xkcdShowLines()
<div id=”X
Change <div>s after <body> to original text
Change xkcdShow() for BT, TL etc, co-ords and widths
Change xkcdShowLines() for speech lines
hidden image title?
Uncomment hideWhatWasImgTitle
hideWhatWasImgTitle, showWhatWasImgTitle correct element
Correct image-map via http://www.image-maps.com/
These cribs
Edit in word processor
save as html
view as html
cut and paste source html into index.html
Added English text as available translation
For each “undefined”
Click
Offer Another
Add original English
Anonymous
Submit
Make text a bit larger/smaller to suit