pdf-to-interactive-web

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

PDF → 可交互网页

PDF → Interactive Web Page

把一份难读的 PDF 变成一个单文件 HTML 网页：读者花比原文少得多的时间拿到最重要的东西，而且每个数字都能点回原文核对。

这套做法来自一次对照实验：5 种难读的 PDF（小说章节、技术论文、数学教材、上市公司年报、桌游规则书），4 轮提示词迭代，2 个模型，4 轮逐条事实核查。下面每条规则背后都有实验里踩过的坑，原因写在旁边，遇到规则覆盖不到的情况时，按原因去判断。

Turn a hard-to-read PDF into a single-file HTML web page: readers get the most important information in far less time than the original, and every number can be clicked to return to the source for verification.

This approach came from a controlled comparison experiment: 5 kinds of hard-to-read PDFs (a novel chapter, a technical paper, a math textbook, a public company annual report, and a tabletop game rulebook), 4 rounds of prompt iteration, 2 models, and 4 rounds of item-by-item fact-checking. Every rule below is backed by a problem encountered in the experiment, with the rationale written beside it. When a situation is not covered by a rule, use the rationale to decide what to do.

工作流程

Workflow

按顺序做。第 3 步（事实账本）最容易被跳过，也最不能跳过。

Proceed in order. Step 3 (fact ledger) is the easiest to skip, but also the one you can least afford to skip.

1. 定范围

1. Define the scope

PDF 超过约 30 页时，不要整本做。整本塞进一个网页，只能做成很浅的目录站，失去「读」的体验。先挑一节：自成一体、有画面感、有能动手的东西。用户在场就给 2–3 个候选让他挑；不在场就自己挑，并在交付说明里写明挑了哪段、为什么。
用户要的是整本书的地图（人物关系、章节结构）时，做「导览层」，并说明它来自目录或外部知识，不是全文。

When the PDF exceeds roughly 30 pages, do not turn the entire document into a web page. Stuffing an entire book into one web page can only turn it into a shallow directory site and destroy the experience of “reading.” Start with one section: one that is self-contained, visually compelling, and has something the reader can interact with. If the user is present, offer 2–3 candidates for them to choose from; if not, choose one yourself and state in the delivery notes which section you selected and why.
If the user wants a map of the entire book (character relationships, chapter structure), build a “navigation layer” and explain that it is based on the table of contents or external knowledge rather than the full text.

2. 读原文，定读法

2. Read the source and determine the reading mode

逐页读，记下页码。图表里的数字也要读：有些关键数字只存在于图片里，不在文字层。

然后判断这份内容主要怎么读，选对应的交互形式。读法定错，后面全错：规则书被做成线性的翻页教程，读者最需要的「随手查」就没了。

内容	读法	主交互
故事、历史、传记	叙事沉浸	沿路线或时间线走，场景随进度切换
概念、原理、定理	概念探索	实验台：改参数、拖节点，马上看到结果
规则、手册、说明书	查读	可搜索的卡片和索引，术语即点即查，查完能回原处
财报、数据报告	数据钻取	先给结论，再一层层往下钻的图表
论文、论证	论证拆解	「问题 → 方法 → 证据 → 结论」的论证地图

可以主次搭配。每种读法的场景模板和交互点子见

references/reading-modes.md

。

Read the source page by page and record the page numbers. Read the numbers in charts as well: some key figures exist only in images and not in the text layer.

Then determine how the content is primarily meant to be read and select the corresponding interaction model. If the reading mode is wrong, everything that follows will be wrong: a rulebook turned into a linear page-turning tutorial eliminates the “look it up whenever needed” experience that readers need most.

Content	Reading mode	Primary interaction
Story, history, biography	Narrative immersion	Follow a route or timeline, with scenes changing as progress advances
Concept, principle, theorem	Concept exploration	Lab bench: adjust parameters, drag nodes, and see results immediately
Rules, manual, guide	Reference lookup	Searchable cards and an index; terms are clickable for instant lookup, with the ability to return to the original location afterward
Financial report, data report	Data drill-down	Lead with conclusions, then drill down through charts layer by layer
Paper, argument	Argument breakdown	An argument map: “Question → Method → Evidence → Conclusion”

You can combine a primary and secondary reading mode. For scene templates and interaction ideas for each reading mode, see

references/reading-modes.md

3. 建事实账本（写页面之前）

3. Build the fact ledger before writing the page

把页面要用到的每个数字、引语、人名、年份、规则、因果说法，先列成一张表：

id → 原文页码 → 原文原句（保留原语言）→ 你的中文转述

。页面里的出处角标就直接引用这张表。

这样做的原因：核查实验里的错误几乎都出在「转述」这一步，不在「读」这一步。模型读对了原句，但在压缩成一句大白话时，把单位换算错、把主客体说反、把例外条件丢掉。先把原句和转述并排写下来，每一条转述都有原句可以对照，这一步就能拦下大部分错误。

转述时逐条对照

references/fidelity-checklist.md

里的 9 类常见错误，规则书和财报尤其要逐条过。

Create a table containing every number, quotation, name, year, rule, and causal claim the page will use:

id → source page → exact source sentence (preserve the original language) → your plain-language restatement

. Citation markers on the page can then reference this table directly.

The reason is that in the fact-checking experiment, nearly all errors occurred during “restatement,” not during reading. The model had read the original sentence correctly, but while compressing it into one plain-language sentence, it converted units incorrectly, reversed the subject and object, or dropped an exception condition. Put the original sentence and the restatement side by side first, so every restatement has a source sentence to compare against; this step blocks most errors.

When restating, compare each item against the 9 categories of common errors in

references/fidelity-checklist.md

. For rulebooks and financial reports in particular, check every item one by one.

4. 定结构（少而精）

4. Define the structure (simple and focused)

首屏是「30 秒版」：一句大白话讲清最重要的结论，配一张全局图（地图、结构图、流程图、论证地图）。读者看完首屏就该知道这份东西讲什么、值不值得往下看。
最多 7 个场景。每个场景三层：一句话要点（一直可见）→ 一个能动手的交互（默认展开）→ 细节和原文（默认折叠）。
默认可见的文字全篇不超过 2500 个汉字，多出来的放进折叠层。不要用「简洁」「省时间」这种形容词来约束自己，要数字数：实验里只写「省时间」时，字数反而翻倍；写明 2500 字上限，同一章从 11,495 字降到了 2,710 字。
术语先打日常比方，再给正式说法。
至少 2 处「先猜再看」：先让读者猜一个数或选一个答案，再揭晓原文答案。猜过再看，记得更牢，而且这是最好玩的部分。
结尾 3 道「你答得上来吗」，答案附出处。
解释用自己的话写，只有原文对照里才引用原句（也避开大段搬运受版权保护的注释和讲解）。

The first screen is the “30-second version”: one plain-language sentence that explains the most important conclusion, paired with a global graphic (map, structure diagram, flowchart, or argument map). After reading the first screen, the reader should know what the document is about and whether it is worth continuing.
No more than 7 scenes. Each scene has three layers: a one-sentence takeaway (always visible) → a hands-on interaction (expanded by default) → details and the original text (collapsed by default).
Keep all default-visible text under 2,500 Chinese characters; put anything beyond that into collapsed sections. Do not constrain yourself with adjectives such as “concise” or “time-saving”—count the characters. In the experiment, writing only “save time” actually doubled the text length; specifying a 2,500-character limit reduced the same chapter from 11,495 characters to 2,710.
Introduce terminology with an everyday analogy first, then give the formal term.
Include at least 2 “guess, then reveal” moments: first let the reader guess a number or choose an answer, then reveal the answer from the source. Readers remember it better after guessing, and this is the most fun part.
End with 3 “Can you answer this?” questions, with sources attached to the answers.
Write explanations in your own words; quote original sentences only in side-by-side source comparisons (and avoid reproducing long copyrighted passages of annotations or commentary).

5. 定风格，画主视觉

5. Define the style and create the key visuals

用户给了风格就照做；没给就按内容定一个。全篇的配色、字体、线条、质感保持统一。风格预设见
```
references/style-presets.md
```
。
只画 2–4 幅大的主视觉，挑最关键的时刻，每幅当成独立作品来画：讲究构图、前中后景，把原文写到的细节（器物、服饰、文字、数字、地名）画进去。其余场景用排版、图表和小装饰撑起来。原因：插画数量一多，每幅分到的注意力就少，最后满屏都是草率的小图。
不要用圆形、矩形这类基本几何形拼人物，不要卡通脸，不要 emoji。 人物画不好时，改画背影、剪影、局部或器物，或者干脆用排版本身做视觉。
写美术方向，不要写技法细节。实验里只写「模拟中国古画」画得比写满白描、界画、SVG 滤镜参数的版本更好：技法写得越细，模型越在意笔触对不对，构图和细节反而弱了。

Follow the user’s chosen style; if none is given, choose one based on the content. Keep the color palette, typography, lines, and textures consistent throughout. See
```
references/style-presets.md
```
for style presets.
Create only 2–4 large key visuals, selecting the most important moments and treating each as an independent work of art: pay attention to composition, foreground, middle ground, and background, and incorporate details mentioned in the source (objects, clothing, text, numbers, place names). Support the remaining scenes with typography, charts, and small decorative elements. The reason is that as the number of illustrations increases, each one receives less attention, until the screen is filled with sloppy small images.
Do not build people from basic geometric shapes such as circles and rectangles; do not use cartoon faces or emoji. If people are difficult to draw, depict a back view, silhouette, close-up, or object instead, or let typography itself carry the visual.
Write art direction, not technique details. In the experiment, “simulate traditional Chinese painting” produced better results than a version packed with instructions about ink-outline drawing, ruled architectural drawing, SVG filter parameters, and so on: the more technique-specific the prompt, the more concerned the model becomes with whether the strokes look right, and the weaker composition and detail become.

6. 写页面

6. Write the page

按

references/page-contract.md

做：单文件、零外部依赖、出处角标、一键回到原处、记住阅读进度、字号和明暗切换、尊重减弱动画设置、手机竖屏可用。

不需要任何 JS 库。实验里 20 个成品全部手写 SVG、Canvas 和 CSS。

references/page-contract.md

: single file, zero external dependencies, source citation markers, one-click return to the original location, remembered reading progress, font-size and light/dark mode toggles, respect for reduced-motion settings, and usability in a mobile portrait viewport.

No JS library is needed. All 20 finished pages in the experiment used hand-written SVG, Canvas, and CSS.

7. 自检，再交付

7. Self-check, then deliver

运行
```
python3 scripts/audit_html.py <你的 index.html>
```
。它会列出外部资源、默认可见字数、出处角标数量、必备功能是否齐全，以及页面上所有带数字的句子。按报告修。
挑页面上最「硬」的 12 处说法（数字、引语、规则、因果、首屏那句结论），逐条回原文核对。核对不上的，要么改正，要么删掉，要么明确标成「推测」。这一步替代不了读者自己核对，但能挡住最常见的错。
如果能在浏览器里打开，检查控制台没有报错，在手机宽度下没有横向溢出。

Run
```
python3 scripts/audit_html.py <your index.html>
```
. It will list external resources, the default-visible word count, the number of source citation markers, whether all required features are present, and every sentence on the page that contains a number. Fix the page based on the report.
Select the 12 hardest claims on the page (numbers, quotations, rules, causal statements, and the first-screen conclusion) and verify each against the source. If a claim cannot be verified, either correct it, remove it, or explicitly mark it as an “inference.” This cannot replace verification by the reader, but it blocks the most common errors.
If you can open it in a browser, check that the console has no errors and that there is no horizontal overflow at mobile width.

交付

Delivery

文件：
```
index.html
```
。
给用户 3–5 行说明：读法、场景、2–4 幅主视觉画了什么、原文里有哪些没放进去、哪些内容是推算或示意。
提醒一句：关键数字和规则，请点开角标对一下原句。

File:
```
index.html
```
.
Give the user a 3–5 line explanation: the reading approach, the scenes, what the 2–4 key visuals depict, what from the source was left out, and which content is inferred or illustrative.
Include a reminder to click the citation markers and check the original sentences for key numbers and rules.

没有 Skill 的环境

Environments without Skill

用户如果要在 Gemini、DeepSeek、ChatGPT 这类网页聊天里做，没法装 Skill，就把

references/prompt-standalone.md

里那段提示词给他，附上 PDF 一起发。

If the user wants to do this in a web chat such as Gemini, DeepSeek, or ChatGPT and cannot install a Skill, give them the prompt in

references/prompt-standalone.md

and attach the PDF.