Furigana Ruby Generator
<ruby><rb>漢字</rb><rt>かんじ</rt></ruby>の<ruby><rb>読み方</rb><rt>よみかた</rt></ruby>を<ruby><rb>振り仮名</rb><rt>ふりがな</rt></ruby>で<ruby><rb>書</rb><rt>か</rt></ruby>きます。<ruby><rb>日本語</rb><rt>にほんご</rt></ruby>の<ruby><rb>練習</rb><rt>れんしゅう</rt></ruby>にどうぞ。
Honest note: the readings are the ones you type, since automatic reading lookup needs a dictionary far larger than a frontend page should ship. Everything happens in your browser.
How it works
仕組みWrite Japanese with base[reading] syntax, like 漢字[かんじ], and this generator turns it into proper HTML ruby markup with furigana rendered above each word, live. You get three outputs at once: a styled preview using real <ruby> elements, a copyable escaped HTML snippet ready to paste into a blog or lesson sheet, and a plain-kana version with every annotated word replaced by its reading. The parser attaches each bracket to the run of kanji (with any okurigana) directly before it, so particles and plain kana pass through untouched.
Reliable automatic readings need a full morphological dictionary (tens of megabytes at minimum) plus logic to pick the right reading in context, since most kanji have several. That is far more than a frontend page should ship, so this tool trades automation for a tiny, dependable syntax you control.
All modern browsers (Chrome, Firefox, Safari, and Edge) render the ruby, rb, and rt elements natively, and have for years. Older email clients and some markdown renderers strip the tags, in which case readers see the base text followed by the reading in-line, which stays legible.
Place the bracket straight after the whole run: 読み方[よみかた] works, because the parser lets a run that starts with kanji carry its okurigana along. For per-character precision, split it yourself: 読[よ]み方[かた] puts a separate reading over each kanji.