A lightweight, browser-based tool for reading and studying Chinese text. It shows pinyin and meanings on click or touch (not inline), plus character-level breakdowns — perfect for curious learners! ✨
- 🖱️ Click or 📱 tap a word/character to reveal pinyin, gloss, and character breakdown
- ⚡ Works fully client‑side (no server)
- 🎯 Minimal UI focused on reading flow
- 💻📱 Mobile and desktop friendly
-
Download or clone this repo.
-
Open
index.htmlin a modern browser or serve locally:# any simple static server works; here are a few options python3 -m http.server 8000 # then visit http://localhost:8000
-
Paste or open Chinese text and start clicking/tapping to see pinyin & definitions.
Project preference: single-file JS. The app is designed so
index.htmlbootstraps and all logic lives inscript.js(no separate CSS/HTML required beyond the bare shell).
-
The reader tokenizes text into words/characters.
-
On click/touch, it looks up the selection, then displays:
- 🈶 Pinyin for the selected token
- 📜 Definition (dictionary-backed)
- 🔡 Character breakdown: component characters with brief meanings
-
🔊 Optional text-to-speech hook can read the selected token aloud.
- Click / Tap: show pinyin + definition overlay for the token
- Esc / Tap outside: dismiss overlay
- Arrow keys (optional): move selection to previous/next token
/ (repo root)
├─ index.html # tiny bootstrap that loads script.js
├─ script.js # the entire app (UI + logic)
├─ data/ # optional dictionaries, frequency lists, etc.
├─ assets/ # optional icons / audio
└─ README.md # this file
- Dictionaries: point
script.jsto your preferred dictionary JSON (e.g., CC-CEDICT format) underdata/. - Display mode: choose per‑click overlays (default) vs. side panel details.
- Fonts: the app chooses a legible CJK font stack; override in
script.jsif desired.
- 🔁 Sentence‑by‑sentence playback
- ✏️ Per‑character stroke order hints
- 📄 Export annotated text (with footnoted pinyin) to Markdown/PDF
- 🎨 Frequency-based highlighting
Pull requests are welcome. For larger changes, please open an issue first to discuss direction.
- Fork → create a feature branch → commit → PR
- Prefer small, focused changes with clear commit messages
MIT — © Steve Moraff. Do anything you want, just keep the license and attribution.