how to use ruby in html
<!-- The <ruby> tag is used to display smaller text on top of another
element. While it was designed for annotating Asian languages,
it can be useful as a quick way of overlaying text. -->
<!-- The <ruby> tag is a block container for ruby annotations. -->
<ruby>
To be or not to be
</ruby>
<!-- To superimpose text, you place it within an <rt> tag.
Any words before <rt> will serve as "anchor" for the superimposed
text; here for instance "to be" will be spread over "or not to be" -->
<ruby>
or not to be
<rt>To be</rt> <!-- Superimposed across "or not to be" -->
</ruby>
<!-- In this example, "To be" will be spread only over "or not".
This reduces the spacing between the annotations. -->
<ruby>
or not
<rt>To be</rt> <!-- "to" over "or", and "be" over "not" -->
to be
</ruby>
<!-- For browsers that do not support the <ruby> tag,
the <rp> tag can be used to show parentheses around the
annotations.-->
<ruby>
or not
<rp> ( </rp>
<rt>To be</rt>
<rp> ) </rp>
to be
</ruby>
<!-- Tip: You can change the spacing of the annotations by changing the
text-align property of the <rt> tag. This can be useful for easily
creating text overlays in almost pure HTML (e.g. button labels). -->
<ruby>
or not
<rp> ( </rp>
<rt style="text-align: left">To be</rt> <!-- Default is text-align: start -->
<rp> ) </rp>
to be
</ruby>
<!-- Note that <ruby> support is still limited: while most browsers have
partial support, only Firefox has full support.
See: https://caniuse.com/?search=ruby -->