TIL about HTML5 ruby tag

I got a gal, Miss <ruby> is her name¹

To improve my Chinese writing skills, I thought about starting to draft some simple materials in the language. This made me wonder: how is the illustration of intonation achieved? It seems HTML offers a ‘simple’ way:

<ruby>你好<rp>(</rp><rt>nǐhǎo</rt><rp>)</rp></ruby>

The result looks like this:

你好(nǐhǎo)

I won’t use it too much though. Look at all the necessary tags here! This deep nesting disrupts the process of writing continuous text too much.

Additional resources

• Check out this Wikipedia article about Pinyin
• MDN Web Docs about ruby
• Stackoverflow article