When I decided to write technical specifications for Mixin Kernel, I finally picked Jekyll and $KaTeX$ as my writing tools. They create beautiful and portable pages for viewing in browser, but sometimes a PDF file is still good for better transferring or offline reading, e.g. in email attachment or Kindle, and I’m amazed that Firefox is capable of exporting my pages to a professional PDF. I am able to produce beautiful HTML in tandem with professional PDF.

Stylesheet for Printer

The core idea is to use the print to file feature of Firefox, which retains all the page style defined by the CSS stylesheet. And a good feature of CSS is that it allows different rules for different medias, i.e. you can define page style for displaying in computer screen, mobile screen or even for printing.

My blog interface is very simple, I’m able to do very little changes to make a professional PDF style.

@media only print {
  .layout.header {
    display: none;
  }

  .layout.container,
  .post.block {
    border: 0 none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
  }
}

The CSS above removes all my blog header and tweaks some margin and padding for the main content.

Print to File

Bring the advanced Print dialog out from the Firefox context menu, instead of using the Ctrl+P shortcut. Then in Page Setup..., do basic paper size modifications, I changes nothing but choosing the A5 paper size, and apply the modifications.

Now click Print... to make extra page settings, I do nothing. But a weird thing is that in this simple Print dialog, there is another paper size option, which doesn’t inherit my previous modification, but the final result is still produced as my previous settings.

Good.