Mr. Tree's Tech Notes Page!

Created: 2022-11-22
Updated: 2022-11-27

front cover of the book is a close-up of mr tree's derpy face

Back to Mr Tree’s Homepage on the World Wide Web!

Even just 39 pages is a fair amount of work. Here’s how I made Mr. Tree Goes Down:

  1. Took pictures of watercolor illustrations from 2017 sketchbook.

  2. Color-corrected and cropped pictures with GIMP (gimp.org), the GNU Image Manipulation Program.

  3. Set page size and layout (one big image in the background) and text with Inkscape (inkscape.org), the SVG vector image drawing program.

  4. Exported PDF pages from Inkscape (only one page per file is currently supported).

  5. Merged PDF pages into a single document with the awesome PDF Shelter merge tool (pdfshelter.com).

  6. Uploaded to KDP (Kindle Direct Publishing) and cross my fingers.

All text in the book is in the Cambria font by Dutch typeface designer Jelle Bosma. Microsoft distributes Cambria and places no restrictions on its use for printed products. Thanks, Microsoft!

Missing images

The KDP process ingests your PDF, checks for common errors, and then shows you a print preview (which you can also download as a PDF). The text would always show up correctly on my pages, but on more than half of them, the image was missing! This was very frustrating as I could see no obvious reason for some pages to be okay while others weren’t.

Every night I would make some changes, re-process, re-merge, and re-upload and cross my fingers. Occasionally I would get a page’s image to show up, but others would consistently be missing. The maddening thing is that the KDP thumbnail preview of the pages would always show them, but they would be missing from the full size page view and the downloaded print preview PDF.

After many nights, I finally got them all to show up. I’m pretty sure the solution was to make sure that the JPEG image’s aspect ratio was (almost) exactly the same as the aspect ratio of the image as defined Inkscape for the page. Once I had that, no more problems!

Make the computer do the work

I ended up doing a lot of per-page tweaking. I didn’t mind doing that when I was actually creating the pages, but when I was trying to get them to be processed correctly by KDP’s opaque system and having to re-export everything by hand, it got old real quick. I’m not good with "busy work".

Thankfully, Inkscape is scriptable from the command line. I’m normally on a Linux desktop, but I chose to use my "family computer" downstairs for this project and that’s running Windows.

For a familiar shell scripting environment, I opted to use my Debian WSL installation.

If you try to do this from Windows, it will appear that Inkscape is not responding to CLI options. This is due to a known bug:

My solution to this was to simply pipe everything from Inkscape through cat. This what the ridiculously long command looked like to view the CLI help output:

dave@DESKTOP-EMVVD11/mnt/c/Users/ratfa/mrtree/inkscape$
    /mnt/c/Program\ Files/Inkscape/bin/inkscape.exe --help | cat

To re-export all Inkscape SVG pages to PDF, here’s my Bash script:

#!/usr/bin/bash

for svg in page*.svg
do
    basename=${svg%.svg}
    outfile="pdf/$basename.pdf"
    echo "$basename: $svg --> $outfile..."
    /mnt/c/Program\ Files/Inkscape/bin/inkscape.exe -o $outfile $svg
done

Every time I ran that script, it saved me 20 minutes of mental torture. And that’s before we even factor my error rate! This script never loses its place or clicks the wrong button. It doesn’t even care if the kids are yelling in the same room!

Making the online version of the book

To get the images for the FREE online version of the book, I used the PDF preview of the print from KDP because it has the pages side-by-side for me already and I’m not concerned about the quality of the images for reading in the browser.

One of the awesome tools at PDF Shelter is Convert PDF to JPG (pdfshelter.com) and sure enough, when I gave it the whole book, it produced a .zip archive containing all of the converted JPG files. Brilliant!

I also wrote a Bash script to loop through each JPEG image and write out an .html page.

Here is makebook.sh:

#!/usr/bin/bash

pagecount=$(ls page*.jpg | wc -w)
echo "I see $pagecount pages."

for i in $(seq -f '%02g' 01 $pagecount)
do
    pagefile=page$i.jpg
    if [[ ! -f $pagefile ]]
    then
        echo "ERROR $pagefile not found"
        exit 1
    fi

    # LOL, bash sees a leading '0' as an octal number.
    # Force to base 10!!!
    number_i=$((10#$i))

    PREV=""
    NEXT=""

    if [[ $number_i -gt 1 ]]
    then
        PREV=$(printf "<a href=\"page%02g.html\" style=\"font-weight:bold\">&larr; Previous Page</a>" $(($number_i - 1)))
    fi

    if [[ $number_i -lt $pagecount ]]
    then
        NEXT=$(printf "<a href=\"page%02g.html\" style=\"font-weight:bold\">Next Page &rarr;</a>" $(($number_i + 1)))
    fi

    out=page$i.html

    LINK_BLOCK="<div style=\"font-size: 30px;\">$PREV &nbsp; &nbsp; &nbsp; $NEXT</div>"

cat >$out << EOF
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mr. Tree Goes Down - Page $number_i</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/css/main.css">
</head>
<body class="mrtree">

<center>
<a href="/mrtree/">
<img src="../mr-tree-cover.jpg" alt="front cover of the book is a close-up of mr tree's derpy face">
<br>
Back to Mr. Tree's Homepage</a>
</center>

<h1>Mr. Tree Goes Down - Page $number_i</h1>

<img src="$pagefile" alt="Sorry, no alt text available for the page image here. This page was automatically generated by a script.">

$LINK_BLOCK

</body>
</html>
EOF

done # end loop

echo "done"

Mr. Tree always makes computers do the work. So do science cats.