Why we choose PDF to post to Evernote

On one of our projects, Evernote is one of the services that users can share data to. Every time users update some data, changes will be posted to Evernote as an Evernote note. But we found some problems when we tried to create an Evernote note via Evernote API.

Problems of creating ENML

ENML is the markup language used by Evernote to represent the content of notes. As a subset of XHTML, ENML has some limitations, for example ENML allows the use of CSS to style notes but all styles must be specified in-line using the ‘style’ attribute. References to external or embedded stylesheets and the use of the ‘class’ attribute are not allowed. Dynamic content generated by Javascript is also disallowed.

The notes we post to Evernote have a kind of complicated structure: HTML documents with an annotated Google map at the bottom. This raises two questions: how could we use existing templates instead of creating another inline-styled ENML versions; and how could we render Google maps inside ENML documents;

We contacted the tech team of Evernote to see if there was any way to help solve the problems, or at least some way to allow us not to convert HTML to inline styling ENML. Unfortunately answers to both questions were no, but one of the developers suggested that we could upload Google maps as attached images and use Evernote Web Clipper, a Chrome extension, to help create ENML from the existing HTML. Although it was not a complete solution, it’s a direction we could try to go in.

Creating images

With the attached images, the first thing that came to my mind was using the static Google maps API. By passing some required parameters, you can get map images from the Google side without worrying how to generate them. But there is a problem: passing parameters is limited to under 1024 bytes which doesn’t suit most of our maps.Therefore, using the Google Maps Javascript API v3 out of browser environment is necessary. One of my colleagues suggested that we could use PhantomJS, a headless WebKit scriptable with a JavaScript API, to help generate the maps images.

PhantomJS is a great tool, but it’s a bit heavy to just create an image from our site, and it makes things more complicated to write some extra Javascript to capture images.

Creating ENML content with the Evernote Web Clipper

The Evernote Web Clipper is a great tool to save anything you like on the internet, including text, links and images. It really helps a lot for most people converting HTML into ENML, but it doesn’t support web fonts very well. Also, maintaining two versions of the template in our system is really not a good choice.

Create PDF as ENML attachment

What we want is a copy of the existing template that we can post to Evernote, instead of ENML content. An image or PDF attachment is acceptable, also Evernote is capable of searching text inside PDFs, which is another big plus. With PDF attachments, we don’t need to think about duplicated documents, inline stylings, web fonts and other issues we met when creating ENML documents. With a simple and popular shell utility wkhtmltopdf in hand, we can easily convert our HTML to PDF easily using the webkit rendering engine.