Guest Blogger A Guest blogger is a special blogger who wouldn’t normally post on the blog but provides a valid and interesting insight into a certain aspect of a certain field. These are their stories!

PDF and JPDF2HTML5: The Best of Both Worlds for Teachers

2 min read

In a change from the usual blog posts, today we have a guest blog post from Dr. Gary D. Theilman an Associate Professor of Pharmacy and Practice at the University of Mississippi School of Pharmacy. Many thanks to Gary for taking the time to share his experiences with HTML5.

For several years, we have required our students to upload their written assignments in PDF format. Requiring assignments in PDF has solved several problems:

  • It has cut down on arguments about what “a one page limit” means. When using DOCX or another word processor format, what appears as “one page” on the student’s computer sometimes displays as two pages on the faculty’s computer. Even limiting length of assignments by word count does not really help as word count calculations differ depending on which word processor is used.
  • PDF’s reputation for being “unchangeable” (even though it really isn’t) reduces student claims that “my assignment was somehow altered after I uploaded it”.
  • We need a fairly quick turn-around time for grading and we wanted faculty to be able to bring the assignments up in a web browser and grade them online. There are a number of ways of displaying PDFs in a web browser.

The major problem we’ve had with PDF-based assignments is having faculty add written comments to the page while grading. While PDF does support annotations, we wanted the written comments and metadata to be stored in our own database rather than in the PDF file itself. This led us to a work-around where we had the students include line numbers on their PDF documents. When leaving comments in the web-based grading program, faculty would refer to the line numbers on the PDF so that students could find the relevant text.

pdf content

We looked at a number of different options for annotating directly on the assignment itself without the crutch of referring to line numbers. The Open Knowledge Foundation has developed an open-source Javascript library called Annotator which allows the user to use the mouse to “highlight” text in a webpage and write comments in a pop-up text widget. The comments are then stored in a database on a website’s backend. The problem is that Annotator is designed to work with text in webpages, not in PDFs.


We rewrote our online grading program such that when students upload their PDF assignments, the document is converted into formatted HTML text so that it can be used with Annotator. While JPDF2HTML5 does preserve the original formatting of the student’s assignment, we also provide a link to the original PDF so that the grader (and the student) can see whether mistakes are artifacts of the conversion (which they usually are not) or if the student actually made the mistake on the original PDF.

PDF HTML5 Content

The grading process we use is similar to that which is performed by the website [paper grader]. While that site is public, our grading software is only used within our school. Also, [paper grader] allows uploading of assignments in a variety of formats (.doc, .docx, .html, .odt, .rtf, .sxw, txt). The notable exception to the formats supported is PDF. JPDF2HTML5 provides the bridge that allows us to add that functionality to our own website.

Converting PDFs to HTML has also allowed us to make use of a number of different Javascript DOM manipulation functions which would be difficult to implement using PDF.

    • Using jQuery.ScrollTo we can link drop-down boxes with DIVs containing assignment section headers. The document will automatically scroll to the section that the grader is reviewing.

PDF HTML5 Content

  • We can use jQuery’s :contains() Selector to seek out and highlight certain text within a DIV (such as reference numbers) to associate citations with linked documents.

PDF HTML5 Content

When the students have their graded assignments “returned”, they go to a webpage where they can see their scores and faculty comments using a “read-only” adaptation of Annotator. Again, they are provided a way to download their original PDF so that they can be confident that the text conversion by JPDF2HTML5 accurately reflects their original assignment.

PDF HTML5 Content

Using JPDF2HTML5 has allowed us to preserve the advantages of PDF while also enabling us to use the tools available through Annotator and jQuery.

This post is part of our “HTML5 Article Index” in these articles, we aim to help you build up your knowledge and understanding of HTML5.

Is there is something you’d like to blog about connected to Java, HTML5, SVG, JavaFX or PDF files? Any tips, tricks or recommendations? contact us and we would be happy to feature you in our new ‘Guest Blogger’ series.

Guest Blogger A Guest blogger is a special blogger who wouldn’t normally post on the blog but provides a valid and interesting insight into a certain aspect of a certain field. These are their stories!

Converting your PDF files to HTML5 with BuildVu 

Recently we announced our updated product range for 2018 and are rebranding some existing products, like JPDF2HTML5 which has been renamed to BuildVu. It...
Georgia Ingham
3 min read

Leave a Reply

Your email address will not be published. Required fields are marked *