Tutorial: Formulas to PNG

[Tex2002ans]

I recently just completed another book with 50 formulas using this method.

Here are a few samples:







I attached a ZIP file with the ODF + PDF + PNG (325dpi if I recall correctly, the client wanted images at a max width of 1000px) versions of the formulas.

The book was called "The Critics of Keynesian Economics" by Henry Hazlitt:

Original PDF: http://library.mises.org/books/Henry...0Economics.pdf

The final size on 50 of the optimized PNG formulas is 126 KB.

[Tex2002ans]

I recently typed an in-depth discussion on Formulas in EPUB + more sample images:

https://www.mobileread.com/forums/sho...2&postcount=20

This showed off an alternate LaTeX method of generating formulas (thanks Toxaris!). I will most likely iron out the steps and add an "Advanced" section to this tutorial some time in the future.

[dgatwood]

Although I haven't tried it with formulas, you should also be able to use LaTeX to create SVG content. That's how I create my title pages for my EPUB books, for example (to preserve strict formatting in a device-independent way, while retaining text searching). The basic process is as follows:

1. Use LaTeX (in my case, dblatex with XeLaTeX) to produce a PDF.
2. Use Inkscape (and/or its command-line tools) to translate the PDF into an SVG file. (In OS X, for example, you can install Inkscape, then type /Applications/Inkscape.app/Contents/Resources/script --without-gui foo.pdf --export-plain-svg=foo.svg in Terminal.)
3. Either drop the resulting <svg> tag and its contents into an HTML file or import it with an <img>, <object>, or <embed> tag.

[Tex2002ans]

Originally Posted by dgatwood

Although I haven't tried it with formulas, you should also be able to use LaTeX to create SVG content. That's how I create my title pages for my EPUB books, for example (to preserve strict formatting in a device-independent way, while retaining text searching). The basic process is as follows:

I came up with this .bat file, in order to take a folder full of the PDF formulas -> PNG. I just downloaded all the formulas generated from CodeCogs as PDFs, and ran them through Imagemagick's "convert":

FOR /F %%k IN ('dir /b .\*.pdf') DO (
convert -density 350 %%k ^
    -background white -flatten -trim ^
	-depth 8 -colors 17 ^
    %%k.png
)

• -density 350
  • This would just generate the image at ### DPI. For my purposes, 350 DPI is fine, but you can substitute whatever number you need.
• -background white -flatten -trim
  • This just makes the background of the image white (instead of transparent), gets rid of the alpha channel, and cuts out all the surrounding blank space besides the formula itself.
  • I remove transparency + the alpha channel because some devices/converters just can't handle it (look above with those huge black boxes I got via KindleGen).
• -depth 8
  • This just specifies to make the PNG 8-bit depth (a few of the devices were buggy when dealing with 2 or 4-bit PNGs).
• -colors 17
  • This cuts the formula down to 17 shades of color. In this case, it would be black + white + 15 shades of gray.
  • I settled on 17, so it is just barely above the 16 colors which would bump it down to 4-bit image after certain tools would optimize. This cuts down on filesize dramatically (compared to the same image Indexed with 256 colors or Grayscale).

I assume Inkscape also has similar commands... although I am not too familiar with using Inkscape via commandline.

I haven't fiddled around with Imagemagick to make PDF->SVG. Might be nice to just generate the SVG+PNG of the formula at the same exact time.

Also, just having it in a nice command allows you to just convert entire folders, saving a bunch of time.

Originally Posted by dgatwood

Either drop the resulting <svg> tag and its contents into an HTML file or import it with an <img>, <object>, or <embed> tag.

Hmmm... have any sample EPUB of these SVG Title Pages? Do these EPUBs include ONLY SVG Title Pages? Or do you have the PNG or HTML fallback as well for devices that can't handle SVG?

[dgatwood]

I use a fallback on the Kindle side (because older Kindle readers don't support SVG), but not on the EPUB side. SVG support is required for full EPUB spec compliance (even in EPUB 2), so as far as I'm concerned, if a reader doesn't handle SVG, the reader is hopelessly broken.

Experimentally, all mainstream EPUB readers handle SVG. I think I encountered a couple of old, semi-defunct readers that didn't handle SVG, but they mostly still rendered the text as block-level elements, which worked well enough for my purposes. Either way, they're lost in the noise.

Note, however, that there are a fair number bugs in various readers' SVG support. I've documented the various fix-ups that I perform on the SVG content over in the CSS and HTML tips section of the EPUB wiki page.