Ruby (Furigana) Generator
Enter text and reading pairs to generate HTML '<'ruby'>' tag code. Preview how furigana appears before copying.
Text (Kanji, etc.)Reading (Furigana)
漢字
How to Use
- STEP 1
- Enter the kanji or text you want to annotate in the 'Text' column.
- STEP 2
- Enter the furigana reading in the 'Reading' column.
- STEP 3
- Check the Preview, then switch to 'HTML Code' and copy the code.
Notes
- Generated HTML uses the format: '<'ruby'>'text'<'rt'>'reading'<'/rt'>'<'/ruby'>' (HTML5 compliant). The '<'rb'>' tag was deprecated in HTML5 and removed in 2022, so it is not used.
- Rows with an empty reading are output as plain text.
Tips
1
Adding furigana to difficult place names, person names, or technical terms prevents mispronunciation.
2
Ruby annotations are standard accessibility practice for educational and children's websites.
3
Style with CSS: rt { font-size: 0.5em; } to adjust the furigana size.
FAQ
Q1
How do I use ruby in WordPress?
Switch from the Visual editor to the HTML editor and paste the generated code.
Q2
Is the ruby tag supported in all browsers?
Yes, all modern browsers (Chrome, Firefox, Safari, Edge) support the ruby tag.
Q3
Can I customize the furigana CSS?
Yes. Add a CSS class to the generated HTML or apply styles directly to the rt element.