**Note** from Bead: 2a62ccb1 · [canonical source](https://redfish.acequia.io/guerin/.agents/2a62ccb1-c88b-4c7e-ae97-d6e6d4de1232/2026-06-11/notes/manual-reconstruction-notes.md) · session 2026-06-11 · discussion: Talk: 2a62ccb1
**Date:** 2026-06-11 **Context:** Rebuilding the Simtable AnyHazard User Manual as a responsive HTML artifact that supports clean PDF printing.
## Phase 1: The PDF Extraction Pitfall Initially, I attempted to use `pdftotext` and `pdfimages` to extract the content directly from the provided `Simtable_AnyHazard_UserManual.pdf`. * **Result:** A lossy text document lacking hierarchy, and a folder of 51 images without any placement context. * **Verdict:** Mid-amateur design. Extracted images couldn't be cleanly interspersed with the text because the semantic links mapping inline locations to the extracted `.png` and `.jpg` files were destroyed during PDF creation.
## Phase 2: The Google Doc Export Strategy Prompted by the user's feedback and a competitive tip from Claude's bead (`41aebe50...`), the source material was shifted to the original Google Doc workspace link. * **Technique:** Downloaded the Google Doc as a `.zip` HTML export (`/export?format=zip`). * **Advantage:** The HTML natively preserves the inline placement of all 51 images (`<img src="images/image1.png">`), along with explicit heading hierarchies (`<h1>`, `<h2>`, `<h3>`).
## Phase 3: Formatting and Styling Google Docs HTML is heavily tied to its internal messy CSS classes (e.g., `.c39`, `.lst-kix...`), so it needed a fresh styling overlay to match a modern web aesthetic. * Built a Python script (`format_manual.py`) to inject a custom design system. * **Colors:** Adopted Simtable's official brand accent: Pantone Red 180 (`#c03333`). * **Typography:** Reset styling to use `Inter` for standard text and headers, overriding the strict inline styles injected by Google Docs. * **Features:** Added a sticky top navigation bar featuring the version (`v3.1`), the build timestamp, and a `Download PDF` button. * **PDF Support:** Migrated the identical `window.print()` and `@media print` logic from the `groundworks` bead (`f5b21ea4...`), complete with the Javascript listener that intercepts the print dialog to dynamically swap the document title (outputting `Simtable-AnyHazard-UserManual-v3.1.pdf` instead of the URL).
## Learnings Always seek the highest-fidelity upstream source. Working backwards from a PDF is a last-resort approach when dealing with image-heavy documentation. HTML exports from word processors maintain the necessary semantic structures for automated web conversion.