While standard PDF annotations are well supported in PDF clients and browser plugins, they do not allow for rich annotations in an web context. For this project I explore the possibilities of an online presentation annotator. The basic idea was to allow users to mark sections within each slide and to attach a written note to it. For the rendering of the PDF, two different modes were tried, one that pre-renders the pages as images and provides meta information through an JSON file, the other using Mozilla’s PDF.js to render the PDF pages directly in the client.

Live Demo

Navigate through the slides below and add annotations by dragging your mouse over the slide.

Note: as the responsive layout and the iframe do not mix, expect the demo to fail on mobile

Technology

The frontend is written in typescript with the help of jsPlumb for the links drawn between the highlight and note. The jsPlumb library is a litle bit heavy weight for this task and should be replaced with some simpler logic. The CSS Grid and design elements are partially taken from the great ZURB foundation framework.

Implemented are two slide rendering adapters, one rendering the slides as images (shown in the demo), the other consuming the raw PDF. The later is made impractical through the large file size of the PDF renderer, clocking in at at least 1MB of javascript. The image solution on the other hand requires a bit of server processing of the pdf files which is manageable for smaller loads, and can easily be distributed for larger throughput. One thing which is lacking from the images is the ability to copy text off the slides, which is available when using PDF.js. The lower loading times however, make the image based rendering a better fit for this project. The slide renderer is abstracted as interface, so they can be switched on-the-fly depending on slide content.

As the annotations are pure HTML, different content could be rendered. One idea that was briefly explored was to attach flashcards to spots on the slide allowing to track which slides are still in need for review.