---
name: handwriting-selectable-html
description: Transform plain text, handwriting photographs, or screenshots of typed webpages into handwritten visual reproductions with selectable OCR overlays. Use when Codex must preserve source text, graphical elements, hierarchy, and layout while restyling everything as handwriting, then package the result as a self-contained HTML page supporting accurate partial-selection copying.
---
# Handwriting Selectable HTML
Create a self-contained HTML page containing:
- A handwritten reproduction of the source
- An accurately aligned selectable text layer
- Clean partial-selection copying
- An optional OCR-alignment view
- Responsive and accessible presentation
## Interpret the input
Choose the applicable workflow:
- **Plain text:** Generate a new handwritten composition.
- **Handwriting image:** Preserve the image and add an OCR overlay.
- **Typed webpage screenshot:** Use the screenshot as a content and layout reference. Reproduce its text, hierarchy, icons, controls, dividers, diagrams, and other visible elements as if drawn or written by hand.
- **Content image plus handwriting reference:** Use the content image for exact structure and the handwriting reference for penmanship, paper, and visual character.
For screenshots, transcribe all visible text before generation. Record the location, size, hierarchy, and appearance of each element.
## Generate the handwritten image
Use the `imagegen` skill whenever the source is plain text or a typed/design screenshot.
Label every input image explicitly:
- Image 1: content and layout reference
- Image 2: handwriting-style reference, if supplied
Use high quality for dense text or interface layouts. Treat all text as verbatim content that must be checked after generation.
### Recommended ImageGen prompt
```text
Use case: style-transfer.
Asset type: handwritten reproduction of a webpage, interface, document, or text composition.
Input images:
- Image 1 is the authoritative content and layout reference.
- Image 2, if present, is the handwriting, paper, and drawing-style reference.
Primary request:
Recreate Image 1 as though a real person reproduced the entire visible composition by hand on paper.
Preserve the overall layout, reading order, spacing, alignment, indentation, hierarchy, and relative scale of Image 1. Keep every meaningful visible element, including headings, body text, metadata, links, buttons, voting controls, icons, rules, borders, diagrams, illustrations, and other graphical elements.
Convert all typed text into natural handwritten lettering. Convert graphical interface elements into imperfect hand-drawn equivalents. The result should clearly remain the same page or composition, but rendered entirely with pen and paper.
Text requirements:
Reproduce all supplied text verbatim. Preserve capitalization, punctuation, symbols, numbers, usernames, timestamps, labels, and link text. Do not paraphrase, correct, omit, duplicate, or invent text.
Handwriting style:
Use natural, slightly imperfect human handwriting with uneven baselines, inconsistent spacing, small variations in letter size and slant, and subtle changes in pen pressure. Avoid polished handwriting fonts or mechanically repeated letterforms.
Graphical style:
Render icons, arrows, boxes, separators, underlines, diagrams, and interface controls as loose hand-drawn pen marks. Preserve their meaning and approximate placement.
Scene and materials:
Use realistic paper with subtle texture and natural neutral lighting. If Image 2 is supplied, match its paper, ink, penmanship, looseness, and photographic character.
Composition:
Match Image 1’s aspect ratio and framing. Leave adequate margins and ensure no content is cropped.
Constraints:
- Keep every visible source element recognizable.
- Keep all text fully legible.
- Remove all traces of typed fonts and digitally perfect geometry.
- Do not introduce new content.
- Do not add watermarks, signatures, decorations, or unrelated marks.
- Do not replace text with scribbles or placeholder strokes.
```
When the source contains only a specific subset of required content, append:
```text
Required text, verbatim:
"""
<INSERT EXACT TRANSCRIPTION>
"""
```
After generation, inspect the result character by character. Regenerate or perform a targeted edit if any text or meaningful graphical element is incorrect.
## Prepare the OCR overlay
1. Record the final image’s intrinsic width and height.
2. Create an SVG using the same `viewBox`.
3. Embed the image as a base64 data URL.
4. Add separate `<text>` elements for each line or distinct interface element.
5. Preserve the source’s logical reading order in the SVG.
6. Align each text element with the handwriting.
7. Use `textLength` when necessary to match the handwritten width.
```html
<svg viewBox="0 0 SOURCE_WIDTH SOURCE_HEIGHT"
role="img"
aria-labelledby="title description">
<title id="title">Handwritten reproduction</title>
<desc id="description">A handwritten composition with selectable text.</desc>
<image
width="SOURCE_WIDTH"
height="SOURCE_HEIGHT"
href="data:image/png;base64,IMAGE_DATA"
/>
<g aria-label="Selectable text transcription">
<text class="ocr"
x="X"
y="Y"
textLength="WIDTH"
lengthAdjust="spacingAndGlyphs">Exact text</text>
</g>
</svg>
```
Use separate elements for headings, paragraphs, metadata, controls, arrows, and links.
If the source contains actual hyperlinks, wrap the corresponding text in SVG anchors:
```html
<a href="https://example.com">
<text class="ocr link" x="X" y="Y">Linked text</text>
</a>
```
## Style the OCR layer
Choose a font whose proportions approximately match the handwriting. Geometric alignment matters more than visual similarity because the layer is invisible by default.
```css
svg {
display: block;
width: 100%;
height: auto;
}
.ocr {
fill: rgba(0, 0, 0, 0.003);
stroke: none;
font-family: "Arial Narrow", "Liberation Sans Narrow", sans-serif;
user-select: text;
-webkit-user-select: text;
}
figure.show-ocr .ocr {
fill: rgba(235, 55, 34, 0.88);
stroke: rgba(255, 255, 255, 0.75);
stroke-width: 1px;
paint-order: stroke fill;
}
```
Do not apply `display: none`, `visibility: hidden`, or `pointer-events: none` to selectable OCR text.
## Copy only the selection
Derive clipboard content from the current selection. Never replace a partial selection with the complete transcription.
```js
document.addEventListener("copy", (event) => {
const selection = document.getSelection();
if (!selection || selection.isCollapsed) return;
const range = selection.getRangeAt(0);
const overlay = document.querySelector(
'[aria-label="Selectable text transcription"]'
);
const intersectsOverlay =
overlay.contains(range.commonAncestorContainer) ||
overlay.contains(range.startContainer) ||
overlay.contains(range.endContainer);
if (!intersectsOverlay) return;
const selectedText = selection
.toString()
.replace(/\u2006/g, "")
.replace(/[ \t]+/g, " ")
.replace(/ *\n */g, "\n")
.trim();
if (!selectedText) return;
event.preventDefault();
event.clipboardData.setData("text/plain", selectedText);
});
```
Selecting one word must copy one word. Selecting part of a paragraph must copy only that part.
## Add an OCR inspection control
```js
const page = document.querySelector("#page");
const toggle = document.querySelector("#toggle");
toggle.addEventListener("click", () => {
const visible = page.classList.toggle("show-ocr");
toggle.setAttribute("aria-pressed", String(visible));
toggle.textContent = visible
? "Hide OCR layer"
: "Show OCR layer";
});
```
## Package the page
Embed the image directly:
```html
<image href="data:image/png;base64,..." />
```
Avoid external assets unless requested. Deliver a single `.html` file.
## Verify
Use the browser-control skill to confirm:
- All source content and graphical elements were reproduced.
- The transcription is exact.
- The image is embedded.
- The OCR layer aligns with the handwriting.
- The overlay is invisible by default.
- The inspection control works.
- Partial selections copy only their selected text.
- Multiple lines retain sensible line breaks.
- Hyperlinks point to the correct destinations.
- The page has no horizontal overflow.
- The browser console contains no errors.
- The file works independently.