Search for a word in newspaper

This demo directly relates to AJAX-ZOOM hotspots functionality. It is an example of the possibility to highlight parts of an image from data located in external sources.

In this particular implementation, the data is an OCR schema, and it stores in XML files. Some OCR software includes coordinates (x1, y1, x2, and y2) of recognized words into their schemata. These coordinates are enough for AJAX-ZOOM hotspot API to create and remove overlays at any viewport and zoom level.

Furthermore, users can search for words in the autosuggest field above. The results display below the field and sorted by the page and result numbers.

All pages with no search results hide temporarily. When a user clicks on the search result number, the viewer switches the page and zooms to the selected spot. The search word highlights by an overlay.

The user-interface at the current state is a proof of concept. It is present to show the functionality and that it works.

The OCR schemes supported out of the box are "hOCR" and "ALTO". It is easily possible to adapt it to any other scheme. Even better would be to export the XML files in a database and search results in there. That would make it easier to search in huge archives.

For "hOCR", you can use the "free" (Apache 2.0 license) tesseract-ocr software (v. 3.0+) to process your images that contain text. The software retrieves the positions of the words in "hOCR" format, which it then instantly saves in HTML files.

Switching between images sets (books, newspapers, etc.) is not a big deal for AJAX-ZOOM API methods. However, since this intends to be a frontend interface blueprint, the example stops at this point. Without further adaptation, it is efficiently applicable for scanned writings with a length of up to 100 - 200 pages — a perfect software tool for museums, digital archives, and other digital publishers.

In general, you can take this example as a basis for creating other sophisticated applications in similar or different fields of application. As a developer, you can extend this demo with your code! However, on request, our team can customize, extend or help you integrate AJAX-ZOOM with your system.

At ajax-zoom.com, this example is based on images courtesy of "Bibliothèque royale de Belgique" and the OCR data scheme is "ALTO". In the download package, the OCR data is "hOCR" made with "tesseract".

Test: load different content (images) and OCR data without reloading the page.

[Last updated: 2018-18-12]