logicandlanguage.net

In particular, after drawing a blank with Wash U's helpdesk, I learned about my current host from this amazingly helpful post, about Multiblog from elise and about anti-spam measures from Matt's comments.

In homage to the same spirit, here is how I put prooftrees into the previous post. No doubt there are better and more elegant and more techie ways to do this, but then, that isn't really the point, is it? But if anyone does have some alternatives or improvements to suggest, the comments would be a very good place for them. This method presupposes some familiarity with LaTeX, and some familiarity with html and CSS. If you don't have this familiarity, but are interested in learning, you can pick up the basics from the sites I have linked to. You'll also need to know how to use ftp. A much more serious flaw: this method presupposes that you have access to Adobe Photoshop. (Added 28/03/05: see the comments for non-photoshop alternatives.)

Still not deterred?

1. Download Paul Taylor's prooftree package from c-tan.

2. Get LaTeX to call it by putting the following line in your document's preamble:

\usepackage{prooftree}

3. Use LaTeX to create your proof tree. I put each proof tree in a separate .tex file. Greg's page PnC Example Prooftrees provides a good introduction to the prooftree package, as well as a couple of useful definitions for resizing line-labels. Here is the source for the third proof tree in my previous post:

\documentclass{article}
\usepackage{prooftree}
\usepackage[mathcal]{euler}
\def\usng#1#2{\using{\textrm{\tiny{$[#1$#2$]$}}}}
\usepackage{latexsym, amsmath}
\begin{document}
$$
\begin{prooftree}
\[\[\[ A \rightarrow B \quad \[ \justifies A \usng{}{1}\]\justifies B \usng{\rightarrow}{E}\] \[\justifies B\rightarrow C \usng{}{2}\] \justifies C \usng{\rightarrow}{E}\] \justifies A\rightarrow C \usng{\rightarrow}{I,1} \] \justifies (B\rightarrow C)\rightarrow(A\rightarrow C) \usng{\rightarrow}{I, 2}
\end{prooftree}
$$
\end{document}

And here's what it produces:

4. Get the output file into .pdf format. If you're a TeXShopper, this is the normal kind of output file from LaTeX, but if you're using a LaTeX application that outputs a .dvi file, you'll have to use one of the many .dvi to .pdf conversion procedures, which are described elsewhere. Try here.

5. Open the .pdf file in Photoshop. Photoshop will ask you if you want to "rasterise" the file and for some details about how you want to do this. Don't just use the default resolution, or your images will be very fuzzy and low-definition. My images were produced by setting the rasterising resolution to 300 pixels per inch.

6. Put the kettle on. Rasterizing takes ages (up to 5 mins!)

7. When it is finished, Photoshop will have your page open in a window. Do not be alarmed if it is covered in grey and white gingham, that will not be a part of the final image.

8. Zoom in on your image so that you can see it properly. Use the crop tool to cut the page down around the proof - you don't want an entire page on your website with only a tiny proof in the middle. (This step can be skipped if you want an entire page on your website with only a tiny proof in the middle.)

9. In the file menu, choose "save for web" and when the save options come up, chose "gif 128" as the format in which to save the picture. There are other acceptable options, but this is one way to get a file that is small (my proofs are all 4k), and in a format that can be used on the web. Small image files are especially important to readers on a modem connection, but they help everyone's page-loading speed and they keep your bandwidth and diskspace useage down. This can save you time and money. (This step can be skipped if you don't care about other people, time or money.)

10. Ftp your finished file to your server in BINARY mode. (In ftp in a unix terminal you can change the transfer type to binary by typing "bin" after the ftp prompt.)

11. You might need to set the permissions of the .gif file. 644 seems to work fine...Help!

12. You can add the image to your entry using the html img tag like this:

<img alt="proof of C from A->(B->C), B and C" src="http://your-site.org/filepath/filename.gif" width="300">

The src attribute is essential as it gives the path to the image file. In Movable Type I found I had to put the full path to the image in, otherwise the images didn't show up in the archives. (If your directory structure is different I imagine you might be able to use relative path.) The alt attribute is strongly encouraged by the web standards guys. It means that those who are using text-only browsers or who are otherwise visually impaired will be able to get a sense of what they're missing. The width attribute is optional and allows you to adjust the size of the image on your page.

13. I wanted the images centered, so I wrapped the img-tag in div tags like this:

<div class="img"> <img src="http://www.logicandlanguage.net/images/entry/blogproof.gif" width="300"> </div>

which are governed by the following bit of css.

.img {
text-align: center;
}

(If you are using movable type, you can add this to the "stylesheet" template.) Otherwise you need to find the right file that ends in .css - try it out; you can always go back and delete it later.

14. That's it. Feel free to post advice/improvements/alternatives in the comments.

You might want to look
here for image conversion methods. Below's the script I used to see how the linked methods worked. If you want pngs instead of gifs, put in pnmtopng instead of ppmtogif. I'm sure there's other ways, but this does eliminate the need for photoshop.

#!/bin/bash
infile=${1:?"Missing Filename"}
for fid in $@; do
	out=${fid%.*}.gif
	gs -sDEVICE=ppmraw -r300x300 -sOutputFile=- -sNOPAUSE -q $fid \
	-c showpage -c quit | pnmcrop | pnmmargin -white 10 | ppmtogif > $out
done

Ah, Slomium Catfish, welcome, welcome.

Thank you for the help. Getting rid of the need for Photoshop is definitely desirable. In trying out one of the methods on the page you linked to, I realised that I didn't have pdftopbm, and in looking for it using fink, I discovered that ImageMagic (image manipulation software that comes with Photoshop) is free and available through fink. I just downloaded a copy and experimented with converting pdf to png and it was easy. All I had to do was type:

convert blogproof.pdf blogproof.png

It was a lot faster than my photoshop method too. Getting the hang of cropping and saving to a size suitable for the web might take a little investigation, but this looks like another viable alternative for OSX and Unix users (it seems Windows users will need to download from source, which is a little like telling a McDonald's customer that they'll have to kill their own cow. But perhaps Windows has its own image manipulation software anyway?)

If you are using TeXShop, there's a simpler way. Typeset the document, and then in the preview pane click on the 'Selection' tool (the square box at the top right of the window, to the right of the hand and the magnifying glasses). Click and drag to select just the bit of the typeset document you want (i.e. the proof in this case), and then from the Preview menu choose 'Save selection to file...'. You can save it directly as a GIF (or a JPEG, PNG or various other things if you want), so there's no need for image conversion tools!

PS If you want the final image bigger or smaller, you can adjust the Scale of the preview before selecting the bit you want.

That is very cool. I have just tried it out, the first time converting to .gif, which gave me a .gif file which was still 4kb - which is good - but - not so good - the image was all messed up; the characters had fuzzy "shadows."

But the second time, converting to .png, the result was a perfect 8kb file. This method saved me so much time, compared to the photoshop method, that I'll certainly be using it in the future. I also tried the .jpg (medium) version, and that also produced a clear 8kb file.

Thanks, Nick!