Saturday, July 30, 2016

Papeeria News, Jul 30: new PDF viewer

TL;DR: new PDF viewer keeps viewport position and scaling

There have been two PDF viewer options in Papeeria: one can view PDF files with "native" viewer or with Google Docs viewer. They work great, but suffer from a major drawback: they are "black boxes" to our web app and are not controllable through the API. We cannot set zooming scale or scroll to some specific region, we don't know which page user is looking at. All that we can do with our viewers is to open some concrete page after loading, and we do our best to find out what page corresponds to the cursor in the editor, so that after recompilation the viewer showed something more meaningful than just the first page.

Our new viewer is based on Mozilla's PDF.JS library. This library is also used in "native" viewer in Firefox, and our viewer is essentially the same base library with a different UI. PDF.JS library has an API, and it allows us to preserve the viewport after recompilation. If you opened some page in your document, zoomed to 400% scale, scrolled to some particular region on the page and recompiled the document, you will see exactly the same region of the same page at the same zooming scale after recompilation, provided that you document compiles fine of course. This is especially handy when you're working on small details in a big math formula or in a complex table.

You can switch between all three viewers with a dropdown in the panel above the viewer pane.

PDF.JS viewer showing a page at 400% scaling scrolled to some math formula
Sliding navigation bar and viewer switcher are visible in the top part.


PDF.JS viewer is currently in beta, with the plan to promote it to default viewer when we finish working on a few missing features:

  • There is no continuous scroll. You can use a navigation bar which slides from the top side of the viewer to navigate through the pages or mouse wheel/touchpad if page has no scrollbars.
  • There is no sync between editor and PDF viewer.
  • Keyboard is not yet supported