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


XKCD example page from 2014-dec-06

[Click here to upload your own]









  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.php . (or whichever is most recent version)

    3. Edit index.html

      1. search/replace previous title with new

      2. IMG SRC to uploaded image

      3. Change attribution

      4. Change date at bottom

      5. change code to handle particular number of elements

        1. handler_X()

        2. if ($el == 'X'

        3. localstorage.setItem

        4. d.innerHTMLs

        5. xkcdShow()

        6. xkcdShowLines()

        7. <div id=”X

      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. hidden image title?

        1. Uncomment hideWhatWasImgTitle

        2. hideWhatWasImgTitle, showWhatWasImgTitle correct element

        3. Correct image-map via http://www.image-maps.com/

  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