semantic_xhtml

The published CSS and JS that every generated OCR document links.

Website · All repositories · Live output

---

Overview

The Win11 OneOCR Semantic XHTML5 format creates browser-renderable OCR documents with custom semantic elements. These documents are generated by the oneocr-cli command-line application:

<section>
  <segment num="1">
    <w i="#1" p="0.987" b="bounds">Hello</w>
    <w i="#2" p="0.945" b="bounds">World</w>
  </segment>
</section>

Architecture

• Decoupled Design: CSS/JS hosted separately from documents
• GitHub Pages CDN: Fast, reliable delivery via https://oneocr.github.io/semantic_xhtml/
• Version Independent: Document format remains stable while presentation evolves
• Progressive Enhancement: Works with or without JavaScript

Key Features

Interactive Controls

• Background Image Toggle: Show/hide source image overlay
• Line Boxes: Display detected text line boundaries
• Word Boxes: Show individual word bounding boxes with confidence colors
• Text Toggle: Hide/show OCR text content
• Layout Mode Toggle: Switch between overlay and stacked layout modes
• Keyboard Shortcuts: Ctrl+1-5 for quick toggling

Confidence Visualization

• High Confidence (≥80%): Green borders
• Medium Confidence (50-79%): Orange borders
• Low Confidence (<50%): Red borders

Layout Modes

• Overlay Mode: Text overlays precisely on the background image using coordinate data
  • Words positioned using x1,y1...x4,y4 coordinates from OCR
  • Automatic text rotation calculation from coordinate bounds
  • Real-time scaling to match image dimensions
• Stacked Mode: Image displayed above OCR text in vertical layout
  • OCR section maintains same dimensions as image
  • Better for reading text content

Responsive Design

• Desktop: Floating control panel with hover reveal
• Mobile: Inline controls for touch interfaces
• Accessibility: Keyboard navigation and screen reader support
• Automatic Positioning: Overlay coordinates adapt to window resize

Technical Details

Custom Elements

• <section>: OCR document container with metadata attributes
• <segment>: Text line/block with bounding box coordinates
• <w>: Individual words with confidence and position data

Attributes

Word Attributes

• i: Word index (e.g., "#23")
• p: Confidence probability (0.0-1.0)
• b: Bounding box coordinates (x1,y1,x2,y2,x3,y3,x4,y4)

Segment Attributes

• num: Segment number
• b: Segment bounding box coordinates

Document Attributes (on <section>)

• srcName: Source image filename
• imgWidth: Image width in pixels
• imgHeight: Image height in pixels
• timestamp: ISO timestamp
• angle: Text rotation angle
• ocrSegmentsCount: Total number of text segments
• ocrWordsCount: Total number of words
• averageOcrConfidence: Average OCR confidence
• highConfWordsRatio: Ratio of high-confidence words
• mediumConfWordsRatio: Ratio of medium-confidence words
• lowConfWordsRatio: Ratio of low-confidence words

Browser Compatibility

• Modern Browsers: Full interactive features
• Legacy Browsers: Graceful degradation to static display
• XHTML Parsing: Proper XML namespace handling for XHTML5

Usage

Documents automatically reference the presentation layer:

<link rel="stylesheet" href="https://oneocr.github.io/semantic_xhtml/styles.css">
<script src="https://oneocr.github.io/semantic_xhtml/scripts.js"></script>

Files

• styles.css: Complete visual styling with confidence-based coloring
• XHtmlOcrControls.js: Interactive controls and keyboard shortcuts (generated from TeaVM project)
• README.md: This documentation

JavaScript Generation

The interactive JavaScript controls (XHtmlOcrControls.js) are generated from the companion Java project oneocr-xhtml_controls_js. This project uses TeaVM to transpile Java code to JavaScript, allowing developers to write interactive controls in Java while deploying them as browser-compatible JavaScript.

Development

Local Testing

# Serve locally for development
python -m http.server 8000
# or
npx serve .

Deployment

Files are automatically served via GitHub Pages at the CDN URL above.

Benefits

For AI Processing

• Semantic Structure: Clear element hierarchy aids AI comprehension
• Natural Text Flow: Better than JSON for pattern recognition
• Rich Metadata: Confidence scores and coordinates preserved
• Error Detection: XML validation catches malformed data

For Human Users

• Browser Native: No special software required
• Interactive: Dynamic visualization controls
• Printable: Clean output for documentation
• Searchable: Text content remains selectable

For Developers

• Upgradeable: Presentation improvements without document changes
• Cacheable: CDN delivery with browser caching
• Inspectable: Standard DOM manipulation and debugging
• Extensible: Easy to add new features and visualizations

Document Generation

XHTML documents are generated by command-line tools and automatically reference this presentation layer via CDN links.

Related Projects

• Command-Line Tools: oneocr-cli - Generates XHTML documents
• Core API: oneocr-api - Java FFM bindings

---

Part of the OneOCR project (https://github.com/oneocr) - leveraging Windows 11 built-in OCR for Java applications.