Looking for help in specifying a textbook format in html5 specifically for tablets which includes notetaking

Question

My 9 year old son has very low vision, 1/10. Currently the support people in his school provide him with pdf scans of the textbooks and provide good training for him to access his textbooks on a PC.

However, I consider that this is less than ideal for a number reasons :

• Large file size (One geography book is 300Mb, the people who do the scanning are not tech people)
• The text size is only controlled indirectly via zoom, my boy need 40pt text at least the whole time
• Difficult to navigate, i.e. there's lots of scrolling over and back just to read a phrase making the whole reading thing a bit tiring.
• No ability to take notes and/or fill in areas for answers in the textbook.
• No access to a TOC/index/
• PC problems (weight/power/totallackofcoolnesscomparedtoatablet)

So, I'm thinking that the world of html5 has an answer for me. The process I'm hoping to move towards is the following :

• I scan the textbooks and run them through an OCR program like ABBY
  FineReader.
• This gives me the raw text and the images

• Twist this raw data into html5 format with a structure something like

  <div class="book">
      <div id="TOC"></div> (This TOC will be built dynamically)
      <div class="page" id="1"> (Important to keep the notion of pages to allow him to have the same reference as the rest of the class)
          <div class="text"></div>
          <div class="img"></div>
          <div class="answerzone"></div>
          <div class="footer"></div>
      </div>
  </div>
  

• Next, the javascript kicks in and adds the following functionality

  • Large, semi-transparent Left and right arrows always on screen on bottom corner
  • Large, semi transparent page number is always apparent, for example on top right corner
  • Large, semi-transparent symbol on top left corner which gives access to the following features
  • Access to the Table of contents
  • Increase/decrease font size
  • Add a zone where he can either write text from keyboard or onscreen with a stylus. This zone can have an image as background, e.g. where he needs to draw circles around answers.
  • Everything he adds (text/images) is stored locally on the tablet

So after all that, here's the question part. Does anyone have any experience of similar requirements that have found a solution ? I can do the javascript stuff (well I think I can) up to the zone for adding text/images and storing all that locally. Does anyone have pointers to existing html5 solutions that could suit my need ?

Best regards,

Colm

P.S. I've gone away from the whole epub thing since, lets face it, it is only html and why not just use a browser instead of ebook reader solutions ?

Answer 1

This is a very difficult problem. The biggest issue is getting intelligent text out of the PDF. PDF does not have the structure that you will be used to with HTML. It is essentially an electronic piece of paper that is printed to. Text is laid out in blocks that visually line up, but may not have much relation to each other in the file.

I think probably your best bet is to use Calibre to change the format to something else. The results will be far from perfrect, especially in something as complex as a text book. When you convert a book, make sure to go into the options for Heristic Processing and enable it.

If Calibre doesn't work for you, there are also some libraries that you can use to do this.
itext is free for non commercial uses and has text extraction. pdfbox is free and also has text extraction. pdfnet is a commercial product, but may have something you can use.

I'm not sure that you are going to get automated results that are going to be satisfying. Given that you only have to deal with one child's curriculum, and not a huge library of PDF's, it might be worth the time to hand copy each page. This way you can arrange the text in an intelligent way.

Answer 2

Take a look at this article: Building Books with CSS3

That is an excellent article, and it has a lot of techniques that could be very useful. Obviously you're going to have to generate a lot of HTML, but using the techniques shown in that article, you won't have to generate nearly as much useless HTML. That article tells you exactly how to do the page numbers and table of contents, and it won't be hard to use JavaScript to create left and right arrows for changing pages (and style it with CSS, naturally).

As for annotation, I'm a little bit confused about whether you want this for a tablet, or a PC. If it's for a PC, I'd suggest to use pre-built tools, such as Zotero. If it's for a tablet, then you may have to play it by ear a bit, because what you can or cannot do varies greatly from tablet to tablet.