Working with hOCR in Javascript

• Showcase
  • Demo
  • Video
  • Screenshots
• Usage
  • Simple Usage
  • User script
  • Command line interface
• Development
  • Layout
  • Features and SASS
  • Adding a feature

See this demo document: Demo

To add the interface to a plain hOCR file, add this line just before the closing </body> tag:

<script src="https://unpkg.com/hocrjs"></script>

In addition, your webserver must set the Content-Type to a value that allows loading scripts, such as text/html. If your hOCR file uses an extension .html or .htm extension, the media type should be set correctly.

For files with a .hocr extension (e.g. generated by tesseract), you will need to add a mapping from extension to media type:

• Apache: Add the following to you server configuration or .htaccess file:

  AddType text/html hocr

• nginx: Add to mime.types:

  text/html    hocr;
  

Also bundled is a browser extension that lets you add the hocrjs interface to any hOCR document you browse on the web.

• It is a user script, so you need to have a user script runner like Greasemonkey or Tampermonkey installed.
• Browse to unpkg.com/hocrjs/dist/hocr.user.js
• Install the user script when asked
• Browse to a plain hOCR document, e.g. this one
• Choose Inject hOCR viewer from the menu of the user script manager

Tampermonkey:

Greasemonkey:

hocrjs comes with a command line tool hocrjs-inject that inserts the necessary <script> tag to a local hOCR document. To use it, first install hocrjs system-wide:

npm install -g hocrjs

Then run hocrjs-inject /path/to/ocr-doc.hocr. The resulting file will be /path/to/ocr-doc.hocrjs.html which you can open in a browser.

To build hocrjs from source, you need Node.js and make.

Clone the repository and run make for a list of targets:

Targets

bootstrap  lerna bootstrap
dist       webpack all
clean      Remove built targets
test       Run unit tests
link       link
publish    publish packages

Variables

VERSION  Version of the latest git tag

The hOCR elements are positioned with display: fixed. The trick is that they are within a container element that has transformation. This makes the fixed positions relative to the container element instead of the viewport.

A feature is behavior that can be enabled or disabled and possibly configured, such as displaying the background image (BackgroundImage) or whether to disable <strong>/<em> display of text (DisableEmStrong).

If a feature is enabled, a class hocr-viewer-feature-<NAME-OF-FEATURE> will be added to the root container.

These classes are used in the SCSS stylesheet to implement the desired behavior using CSS, if possible.

Add enableMyFeature property to the HocrViewer component.

In hocr-viewer.scss add rules for .hocr-viewer-feature-myFeature as necessary.

If the behavior requires modifying the hOCR (e.g. ScaleFont), create a class ./src/components/hocr-viewer/feature/MyFeature.js that gets passed the component to the constructor and implements an apply(dom) method to modify the HTML. Use the methods provided by hocr-dom to access hOCR specific features like properties.