Working with hOCR in Javascript



See this demo document: Demo


video of hocrjs


background image, transparent text

text only, scaled font


Simple Usage

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:

User script

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





Command line interface

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:


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


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.

Features and SASS

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.

Adding a feature

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.