Original work: http://xkcd.com/1452/
[ prev | up | next ]

XKCD example page from 2014-nov-27



1. Visit https://xkcd.com/
2. Make note of title
3. Right-click image | save image as | xkcd-orig-(title).png | save
4. Open GIMP
5. File | open | xkcd-orig-(title).png | open
6. file | save as | xkcd-orig-(title).xcf | save
7. print the image
1. title the image
2. label the textual elements (“xkcd-(title)-fr01-04” etc)
3. label point elements (“speech line”)
8. Co-ords:
8.1. For each textual element
8.1.1. determine where the co-ords should go (just tl, tr, bl, br for now)
8.1.2. determine max width of bubble
8.2. Get pixel co-ords for textual element and point elements
9. Erase all textual and speech bubble elements
10. File | save as | xkcd-notext-(title).xcf
11. File | export … | export | export
12. Close gimp
13. Upload image to website
13.1. Make new dir for page
13.2 Upload png to it
14. Edit page
14.1. cd ~/csi18n/xkcd/yyyymmdd/
14.2. cp ../20141119/xkcd.html . (or whichever is most recent version)
14.3. Edit xkcd.html
14.1.1. IMG SRC to uploaded image
14.1.2. Change attribution
14.1.3. Change date at bottom
14.1.4. change code to handle particular number of elements
14.1.4.1. handler_X()
14.1.4.2. if ($el == 'X'
14.1.4.3. localstorage.setItem
14.1.4.4. d.innerHTMLs
14.1.4.5. xkcdShow()
14.1.4.6. <div id="X
14.1.5. Change titles from previous to new
14.1.5.1. red-rover → jurassic-world
14.1.6. Change display:none to original text
14.1.7. Change xkcdShow() toriginal txtEls to match original cartoon's text
14.1.8. Change xkcdShow() for BT, TL etc, co-ords and widths
14.1.9. Change xkcdShowLines() for speech lines
14.1.10. Reworked for hiding image title speech
14.1.11. Added English text as available translation

Next time
1. query string in visitsid and lang