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

XKCD example page from 2014-dec-01



  1. Visit https://xkcd.com/

  2. Capture title to clipboard

  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:

    1. For each textual element

      1. determine where the co-ords should go (just tl, tr, bl, br for now)

      2. determine max width of bubble

    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. At www.csi18n.com, mkdir -p ~/csi18n/xkcd/yyyymmdd

  14. scp ~/Worklife/mpsvr.com/csi18n/xkcd-notext-<title>.png al@www.csi18n.com:~/csi18n/xkcd/yyyymmdd

  15. At www.csi18n.com

    1. cd ~/csi18n/xkcd/yyyymmdd/

    2. cp ../20141201/index.html . (or whichever is most recent version)

    3. Edit index.html

      1. IMG SRC to uploaded image

      2. Change attribution

      3. Change date at bottom

      4. change code to handle particular number of elements

        1. handler_X()

        2. if ($el == 'X'

        3. localstorage.setItem

        4. d.innerHTMLs

        5. xkcdShow()

        6. <div id=”X

      5. Change titles from previous to new

        1. red-rover → jurassic-world

      6. Change <div>s after <body> to original text

      7. Change xkcdShow() for BT, TL etc, co-ords and widths

      8. Change xkcdShowLines() for speech lines

      9. Reworked for hiding image title speech (jurassic world example)

  16. These cribs

    1. Edit in word processor

    2. save as html

    3. view as html

    4. cut and paste source html into index.html

  17. Added English text as available translation

    1. For each “undefined”

      1. Click

      2. Offer Another

      3. Add original English

      4. Anonymous

      5. Submit

    2. Make text a bit larger/smaller to suit

Next time
1. query string in visitsid and lang
`