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!

Top comments (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

Great! Thank you

An Animated Guide to Node.js Event Loop

>> Check out this classic DEV post <<