See this demo document: Demo
To add the interface to a plain hOCR file, add this line just before the closing
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
.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
AddType text/html hocr
nginx: Add to
Also bundled is a browser extension that lets you add the hocrjs interface to any hOCR document you browse on the web.
Inject hOCR viewerfrom the menu of the user script manager
hocrjs comes with a command line tool
hocrjs-inject that inserts the
<script> tag to a local hOCR document. To use it, first install
npm install -g hocrjs
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.
A feature is behavior that can be enabled or disabled and possibly configured,
such as displaying the background image (
BackgroundImage) or whether to
<em> display of text (
If a feature is enabled, a class
be added to the root container.
These classes are used in the SCSS stylesheet to implement the desired behavior using CSS, if possible.
enableMyFeature property to the HocrViewer component.
In hocr-viewer.scss add rules
.hocr-viewer-feature-myFeature as necessary.
If the behavior requires modifying the hOCR (e.g.
ScaleFont), create a class
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