DEV Community

ArcCosine
ArcCosine

Posted on

How to use <ruby> tag

<ruby> tag? What is that?
If you see it for the first time, you may not know how to use it.

The <ruby> tag is used mainly to indicate how to read kanji.
For example,

<ruby><rb>花</rb><rp>(</rp><rt>はな</rt><rp>)</rp></ruby> 
Enter fullscreen mode Exit fullscreen mode

(はな)

Because the style has been reset in dev.to, it is not displayed in the style that looks good in Japan:)
Since Ben responded quickly, it is displayed as expected. Great.

You can apply this to emoji.

For example,

<ruby><rb>🌼</rb><rp>(</rp><rt>Flower</rt><rp>)</rp></ruby> 
Enter fullscreen mode Exit fullscreen mode

🌼(Flower)

It's a nice feeling!

You can play like this.
🍺🍕🍺🍕🍺🍕🍺🍕(Today is Product Hunt)

Let's enjoy new expressions with <ruby> tag!

Discussion (2)

Collapse
ben profile image
Ben Halpern

I just made a push to allow the <ruby>, <rb> and <rt> tags into the whitelist for the site's markdown parser. There still isn't a standard way to write this in markdown that I'm aware of, but at least now you'll be able to drop the HTML in if you want to use it.

Thanks a lot for the post.

Collapse
arccosine profile image
ArcCosine Author

Great! Thank you