One Japanese sentence, read along grain by grain.一句日语，一粒一粒地跟着读。日本語の一文を、一粒ずつ読み進める。

tsubu is a small, dependency-free browser library that draws exactly one sentence for read-along and language learning: a dotted line under each segment, furigana that switch on and off without moving a character, and a highlight that follows the voice as a pure function of time.

tsubu 是一个很小、零依赖的浏览器库，只画一句话，用于跟读和语言学习：每段一条点状下划线，注音开关时任何一个字都不移动，高亮作为时间的纯函数跟着声音走。

tsubu は、音読や語学学習のために「一文だけ」を描く、依存ゼロの小さなブラウザライブラリです。文節ごとの点線の下線、文字を一切動かさずに切り替えられるふりがな、そして時刻の純関数として声に追従するハイライトを備えています。

動In time随时间時間とともに

0.00 s

Every frame is drawn from the time alone, by renderAt(t): the same page plays here and renders to video frame by frame. The sentence is drawn by tsubu with the appear preset; the field, the ink grain and the large reading follow the state tsubu reports for that time. The times are set to a beat, not measured from a recording.

每一帧都只由时间决定，由 renderAt(t) 画出：同一个页面既在这里播放，也能逐帧渲染成视频。句子由 tsubu 用 appear 预设绘制；底色、墨色米粒和大字读音都跟着 tsubu 在那个时刻报告的状态走。时间是按节拍定的，不是从录音里量的。

どのフレームも時刻だけから renderAt(t) で描かれます。同じページがここで再生され、そのままフレームごとに動画へも書き出せます。文は tsubu が appear プリセットで描き、背景の色面、墨色の米粒、大きな読みは、その時刻に tsubu が返す状態に従います。時刻は拍に合わせて決めたもので、録音から計測したものではありません。

透Under the loupe放大镜下ルーペの下で

Move over the sentence to read its furigana, with each segment's box and its time. On a phone, tap a word; with the keyboard, focus the sentence and use the arrow keys.

把指针移到句子上，就能看到注音、每一段的框和它的时间。手机上点一个词；用键盘时，先聚焦句子，再按方向键。

文の上にポインタを重ねると、ふりがな、各文節の枠、その時刻が見えます。スマートフォンでは語をタップ、キーボードでは文にフォーカスして矢印キーで移動します。

The sentence is drawn twice from the same HTML, once with furigana off and once with them on. The two layers line up exactly because switching furigana in tsubu moves nothing.

同一段 HTML 画了两遍，一遍不带注音，一遍带。两层完全对齐，因为在 tsubu 里开关注音什么都不会动。

同じ HTML を、ふりがななしとありで二度描いています。tsubu ではふりがなを切り替えても何も動かないので、二つの層はぴったり重なります。

粒What it does它做什么できること

One grain per segment一段一粒一文節に一粒The sentence arrives already cut into segments (for Japanese, bunsetsu). Each gets its own dotted underline; a word with a reading is never split.句子传进来时已经切好了段（日语里就是文节）。每段有自己的点状下划线；带读音的词不会被拆开。文は文節に分けられた状態で渡されます。文節ごとに点線の下線が付き、読みを持つ語が途中で切れることはありません。
Furigana that move nothing开关注音，字不动ふりがなを切り替えても動かないReadings are <ruby> and switch on and off without moving a character, which a test measures in a real browser. Where ruby cannot be drawn, they read 雨（あめ）.读音是 <ruby>，开关时任何一个字都不移动；有测试在真实浏览器里量过。画不出 ruby 的地方显示为雨（あめ）。読みは <ruby> で、表示・非表示を切り替えても文字は一つも動きません。実際のブラウザで計測するテストがそれを保証します。ルビを描けない環境では雨（あめ）と表示されます。
A frame is a function of t每一帧都是 t 的函数フレームは t の関数stateAt(t) is pure, and apply(root, t) draws what it returns. No timers, no transitions: live playback and frame-by-frame capture draw the same thing.stateAt(t) 是纯函数，apply(root, t) 把它的结果画出来。没有计时器、没有过渡：实时播放和逐帧截图画出来完全一样。stateAt(t) は純関数で、apply(root, t) はその結果を描きます。タイマーもトランジションもないので、リアルタイム再生とフレーム単位のキャプチャが同じ絵になります。
Measured colours实测的颜色計測済みの配色Themes for a light page, a dark page and text over video, colours per speaker, and checkContrast, which measures every state against WCAG-based thresholds.浅色页、深色页和叠在视频上的三套主题，按说话人上色，以及按 WCAG 阈值测量每个状态的 checkContrast。明るいページ、暗いページ、動画の上の三つのテーマ、話者ごとの配色、そして WCAG に基づくしきい値で全状態を計測する checkContrast。
Japanese lines日语的行日本語の行Lines break only between segments and by Japanese line-breaking rules, stay close in length, take their size from the container, and are paged by t. Vertical writing too.只在段与段之间、按禁则断行，各行长度接近，字号随容器变化，超长时按 t 翻页。也支持竖排。改行は文節の間だけ、禁則処理つき。行の長さは揃い、文字サイズはコンテナに追従し、長い文は t でページ送りされます。縦書きにも対応。
Motion that shows the reading表现朗读的动效読みを見せるモーションPresets appear, mask, blur and underline-draw, each drawn from the state at t, and revealing on the learner's own events.预设 appear、mask、blur、underline-draw，都由 t 时刻的状态画出；也能按学习者的操作揭示。プリセット appear、mask、blur、underline-draw はいずれも時刻 t の状態から描かれ、学習者の操作で明かすこともできます。
Romaji and loanword origins罗马字与外来语词源ローマ字と外来語の語源Your own romaji per segment, and where a loanword comes from (パン, from pão). Choose what goes over the text and what under it; each switches without moving a character.每段由你提供罗马字，外来语还能标出词源（パン来自 pão）。字的上方和下方各放什么由你选；每一样开关，字都不动。文節ごとのローマ字と、外来語の語源（パンは pão から）は呼び出し側が用意します。文字の上と下に何を置くかを選べ、どれを切り替えても文字は動きません。
Subtitles in and out字幕进出字幕の書き出しと読み込みThe same input becomes WebVTT, ASS karaoke or SRT; WebVTT, SRT, Remotion captions and kuroshiro's furigana come back as input, with no segment or time guessed.同样的输入可以导出成 WebVTT、ASS 卡拉 OK 或 SRT；WebVTT、SRT、Remotion 字幕和 kuroshiro 的注音也能转回输入，不猜任何段或时间。同じ入力から WebVTT、ASS カラオケ、SRT を書き出せます。WebVTT、SRT、Remotion のキャプション、kuroshiro のふりがなは入力に戻せ、文節も時刻も推測しません。

What tsubu does not do: split text into segments, align audio, estimate times, play audio, draw a speech bubble or lay out more than one sentence. Those belong to the caller.

tsubu 不做的事：切分文本、对齐音频、估算时间、播放音频、画对话气泡、排多句话。这些由调用方负责。

tsubu がしないこと：テキストの分割、音声との整合、時刻の推定、音声の再生、吹き出しの描画、複数の文の配置。これらは呼び出し側の仕事です。

Getting started快速开始はじめにTwo files, a 30-second example, and a live one to edit.两个文件、一个 30 秒示例，还有一个可以现场改的。二つのファイル、30 秒の例、そしてその場で書き換えられる例。 Guide指南ガイドTiming, romaji, lines and paging, themes, motion, vertical text, video, subtitles, importing, accessibility.时间、罗马字、多行与翻页、主题、动效、竖排、录视频、字幕、导入、无障碍。タイミング、ローマ字、複数行とページ送り、テーマ、モーション、縦書き、動画、字幕、読み込み、アクセシビリティ。 APIAPIAPIEvery function, option, state and CSS property.每个函数、选项、状态和 CSS 属性。すべての関数、オプション、状態、CSS プロパティ。 Playground试验场プレイグラウンドPaste a sentence, scrub the time, switch everything, and watch the contrast.贴一句话，拖时间，切换各种选项，看对比度。文を貼り付け、時刻を動かし、各オプションを切り替えてコントラストを確かめる。 Gallery画廊ギャラリーEvery theme, motion preset and writing mode, live.每套主题、每个动效预设、每种书写方向，都是活的。すべてのテーマ、モーションプリセット、書字方向を、動く状態で。