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


XKCD example page from 2014-dec-11

[Click here to upload your own]














  1. Visit https://xkcd.com/

  2. Capture title to clipboard

  3. Hover image: is there a title=”” popup? If so, note as fr0001

  4. Right-click image | save image as | xkcd-orig-<title>.png | save

  5. Open GIMP

  6. File | open | xkcd-orig-<title>.png | open

  7. file | save as | xkcd-orig-<title>.xcf | save

  8. print the image

    1. title the image

    2. label the textual elements (“fr0104” etc)

    3. label point elements (“speech line”)

  9. Write tables

    1. textual

      1. one row per textual elements

      2. cols: corner; w, x,y

    2. point elements

      1. one row per two points (“pt1, pt2”)

      2. Cols: xy->xy

  10. Co-ords:

    1. For each textual element

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

      2. determine max width of bubble

      3. Get pixel co-ords for textual element and point elements

  11. Erase all textual and speech bubble elements

  12. File | save as | xkcd-notext-<title>.xcf

  13. File | export … | export | export

  14. Close gimp

  15. At www.csi18n.com, mkdir -p ~/csi18n/xkcd/<title> //title should use underscore not spaces

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

  17. At www.csi18n.com

    1. cd ~/csi18n/xkcd/<title>

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

    3. cp ../20141201/index.html .

    4. Edit index.html

      1. search/replace previous title with new

      2. IMG SRC to uploaded image

      3. Change attribution

    5. Change date at bottom

      1. 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

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

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

      4. Change xkcdShowLines() for speech lines

      5. hidden image title?

        1. Uncomment hideWhatWasImgTitle

        2. hideWhatWasImgTitle, showWhatWasImgTitle correct element

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

          1. Use the first <area … tag in the html code

  18. Tie in this page to any indexing pages

  19. 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

  20. Adjust co-ords to suit

  21. These cribs

    1. Edit in word processor

    2. save as html

    3. view as html

      rowscut and paste source html into index.html

Next time
1. query string in visitsid and lang