Working with hOCR in Javascript
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"/>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 viewerfrom the menu of the user script manager, e.g.
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 hocrjsThen 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
dist webpack
clean Remove built targets
test Run unit tests
serve Run a development server
watch Continuously rebuild dist
Variables
VERSION Version of the latest git tag
ASSET_SERVER URL of the asset server, serving the built files and userscript
UPDATE_SERVER URL of the userscript update server (defaults to ASSET_SERVER)
STATIC_SERVER Command to run a static server
PORT Server port
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.