HTML to PDF & Printing

Making HTML into PDF properly is normally mission impossible: tables and images get cut in the middle, titles can appear alone at end of page with the text starting on the next page, headers and footers are normally non-existing or have some strange stuff from the browsers, like the file path to the html file… normally margins make no sense are either too big or too small, etc etc…

At the same time CSS is great to format layouts of documents in a clean, reusable way… Almost seems ideal, but then when you get it onto PDF(or print) it gets all funky…

MultiMarkdown to PDF & Printing

I’m especially interested in this because i am a fan of the so called lightweight markup languages like Markdown(specially the MultiMarkdown extension). Thus avoiding having to go into Microsoft Word.

MultiMarkdown can be easily outputted into HTML and use CSS for formating, but then when trying to get it onto PDF(or printing), trouble starts…

You can either print it(or create PDF) directly from the browser and although it does keep the css formating still has all the troubles described in begin of post… Alternatively, you can transform the MultiMarkdown to LateX and then to PDF, the output is nice but the CSS formatting does not work there, and although the LateX supports formating, its complicated, so in practice i always ended up with the same looking PDF, which ends up being rather boring…

recently i found a 3rd option.

Prince XML

On a comment of a previous blog post on lightweight markup languages, someone suggested an alternative tool: Prince XML

Its a command line application, that gets an html file as input(plus a bunch of other options) and outputs a PDF file. Go check some samples here and example web applications using it here.

I found it so much better from the alternatives i’ve tried, that Im posting it in case someone else is twiddling around the same issues.

You can even find a Google talk about it, with Håkon Wium Lie(who proposed CSS originally and is Opera CTO) and Michael Day (system architect for Prince).

For Textmate users

I’ve created a simple command, so i get my MultiMarkdown directly onto PDF using 1 command, (its originally the Multimarkdown command that creates HTML with a couple of more lines added that produce the PDF using prince), here’s the code:

# Process the MultiMarkdown document into HTML and then PDF.

NAME="${TM_FILEPATH:-untitled}"
BASENAME="${NAME%.*}"

cd "${TM_MULTIMARKDOWN_PATH:-$HOME/Library/Application Support/MultiMarkdown}"
cd bin

#to HML
./multimarkdown2XHTML.pl > "$BASENAME.html"

#to PDF
`prince "$BASENAME.html" -o "$BASENAME.pdf"`

#open PDF
`open "$BASENAME.pdf"`

This assumes you have Prince XML installed in your system, and you can call it from command line.

Textmate

10 Productivity Tips

Textile vs Markdown vs Multimarkdown vs Maruku

A lightweight markup language is a markup language with a simple syntax, designed to be easy for a human to enter with a simple text editor, and easy to read in its raw form.
Wikipedia.

They are the language of choice for wiki’s, but can also be used for creating regular documents.

Textile, Markdown, Multimarkdown and Maruku are all different flavors of lightweight markup languages that i’ve tried so far.

Textile

Nice: Has a lot of formating features. Tables, colors, etc…

Could be better: Text editing experience ends up being almost like editing programming code. does not feel like a text document. Too many strange characters around.

Markdown

Nice: looks a lot better while editing text than textile. Plain text for the most part.

Could be better: its too stripped down, no tables for example…

MultiMarkdown

Nice: Its like an extended version of markdown, keeping the basic ideas of markdown and adding several features like: tables, css formating, Supports several output formats: doc, rtf, latex (which can be easily converted to pdf). Supports math formulas.

Could be better: I've had (little) trouble with the older versions of the Multimarkdown Textmate, especially with the bundle preview command, not showing images and depending on the way you include the css, could also not format it correctly. But is the same as Markdown, so does not look like its a MultiMarkdown problem.

Update: Is all working now. Anyway editing the textmate bundle commands is quite straightforward, so is not hard to change/update something.

And i’d like also 1 textmate command for generating a full pdf, but it exists now 2 commands away(1st. Latex and then to pdf), so its not too bad.

Maruku

Nice: Is like an extended Markdown with a called Meta-data syntax, where you have a special syntax to add a table of contents, css classes, source code syntax formatting, put in head, that you want headers numerated, and it does automatically for you. Generates pdf natively. Is all ruby made, thus touching my ruby bias factor :)

Could be better, PDF is not able to include image yet, math generation not ready (in testing/development). The down-part of introducing the special tags is that makes text tiny bit uglier. Also, i didn’t found a way to resize a picture, but should be a way(?)

In Summary: Textile is ugly, Markdown is too simple, Maruku is no there yet, but is promising(especially because is ruby made, will make it a lot easier for me to change when needed)…. So i use now Multimarkdown. I think the MultiMarkdown is more mature and has more features.

MultiMarkdown Tips:

I use a lot Css to format the text is very powerfull.

Also another thing i do is, putting in head a path to a local css file, which i can then easily edit and even reference external css paths.

For creating PDf the first step is to generate a Latex file, although Multimarkdown Textmate bundle has this, i just extended a bit, so besides generating a latex file, also saves it. Thus after you just have to do Apple+R, and voilá PDF doc

cd "${TM_MULTIMARKDOWN_PATH:-~/Library/Application Support/MultiMarkdown}"
cd bin
newfile2=${TM_FILEPATH/%.md/.tex}
./multimarkdown2XHTML.pl | ./xhtml2latex.pl > $newfile2
mate $newfile2

Do tinker with the Xslt templates, they can be quite powerful, they can be used to make different templates that generate completely different documents, for example: xhtml xslt: xhtml-toc-h2.xslt on header will make a linkable table of contents.

Makuru Tips:

Because i didn’t found any Maruku textmate bundle, i made the following commands for textmate:

Textmate Commands code for Maruku

Maruku Validate Syntax

#!/opt/local/bin/ruby
require 'rubygems'
require 'maruku'
file_path= ENV['TM_FILEPATH'].split(".").first+".html"
doc = Maruku.new(STDIN.read)
doc.inspect

Maruku to html, for when i need the doc converted into an html fragment, to copy-paste somewhere.

#!/opt/local/bin/ruby
require 'rubygems'
require 'maruku'
file_path= ENV['TM_FILEPATH'].split(".").first+".html"
doc = Maruku.new(STDIN.read)
puts doc.to_html

Maruku create complete html, mostly for preview the doc in a browser.

#!/opt/local/bin/ruby
require 'rubygems'
require 'maruku'
file_path= ENV['TM_FILEPATH'].split(".").first+".html"
doc = Maruku.new(STDIN.read)
a = File.open(file_path, "w")
a.puts doc.to_html_document
a.close
`open #{file_path}`

Maruku create pdf

newfile2=${TM_FILEPATH/%.md/.pdf}
maruku --pdf ${TM_FILEPATH}
open $newfile2

Maruku cleanup, to clean up all files generated by previous commands

pdf_file=${TM_FILEPATH/%.md/.pdf}
html_file=${TM_FILEPATH/%.md/.html}
log_file=${TM_FILEPATH/%.md/.log}
aux_file=${TM_FILEPATH/%.md/.aux}
out_file=${TM_FILEPATH/%.md/.out}
tex_file=${TM_FILEPATH/%.md/.tex}
rm $pdf_file
rm $html_file
rm $log_file
rm $aux_file
rm $out_file
rm $tex_file

And by the way, a big thanks, for all creators and developers of these very useful languages.

Textmate Love

I've tried huge number of text editors and IDE's, especially on my windows era, none so well balanced in features, limitations, looks and speed.

Its appraised by the ruby community, especially because of the early ruby on rails screencasts made by David Heinemeier Hansson, but not only, to me this little application has the same magical effect as ruby: Simple is good. (and powerful)
Is an application i tend to be using using all day long. For: quick text editing, running/coding/documentation and validate ruby, code/validate/compress and minimize javascript, svn interactions, preview and validation of html and even for writing docs, from blog entries to full pdf documents(check my upcoming post on markup languages).

check it on: http://en.wikipedia.org/wiki/TextMate


Plugins i use a lot:

• Ruby
• MultiMarkdown
• Subversion
• SVNMate, to show svn icons on files inside project drawer.
• HTML
• Javascript
• Javascript tools
• GetBundle

The Plugins can be customized, and you can add your own commands easily, even in Ruby :)


Couple of tips i find useful:

• Ctrl+S for a firefox/safari like search with word highlight .
  
• Quicksilver can be used to access textmate commands, by using a quicksilver proxy, so if you don’t want to pick up the mouse and select a command from menu and you don’t remember the shortcut, you can always open quicksilver proxy and use its text search capabilities to find the command, for example, image you are editing an html page and you want to validate syntax, you can do:
  
  1. Alt+Space(opens quicksilver proxy)
  2. type “w3c”, to find: “Validate syntax (w3c)”
  3. press Enter
• Ctrl+Apple+T, will give you the “Select Bundle Item” box where you can do the same example as above.
  
• Apple+T, will open “Go To File”.
  
• Alt->mouse select text, will do vertical selection of text.
• Debugging Bundle Commands, if you are making your own command, select Output: Create New document, or Output: Show as tool tip. You’ll get outputted into a new document the result of script execution.