(Mis)use HTML’s <ruby> tag

By@MisterFoxOnline

Oct 10, 2025 #<rt>, #<ruby>, #HTML tutorial

To be clear: I will be using the tag in a way that is not aligned with the correct use ^[1] of the <ruby> tag.

In this tutorial:

Syntax
Styling

Required knowledge:

Syntax

“The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.” ^[1]

HTML

<ruby>
David Fox<rt>@MisterFoxOnline</rt>
</ruby>

Results in:

David Fox@MisterFoxOnline

Styling

The tags can be styled; I am sure you can come up with more creative ideas than I!

HTML

<style>
ruby {
    font-size: 3em;
    font-family: Arial;
    color: maroon;
    text-transform: uppercase;
}
rt {
    color: slategray;
    text-shadow: none;
    text-shadow: 2px 2px 8px #FF0000;
    text-transform: capitalize;
}
</style>
<ruby>David Fox<rt>@MisterFoxOnline</rt></ruby>

Results in (hover over text):

David Fox@MisterFoxOnline

This idea may be a simple way to create menu links with extra, screentip-like text on hover:

HTML

<style>
ruby {
    font-size: 3em;
    font-family: Arial;
    color: maroon;
    text-transform: uppercase;
}
ruby rt {
    color: white;
    background-color: inherit;
}
rt:hover {
    color: slategray;
    text-shadow: none;
    text-shadow: 2px 2px 8px #FF0000;
    text-transform: uppercase;
}
</style>
<ruby>Products<rt>Click here for</rt></ruby>

Results in:

ProductsClick here for

References:

W3Schools.com (no date) HTML ruby Tag. Available at: https://www.w3schools.com/tags/tag_ruby.asp (Accessed: 9 October 2025).

Mister Fox AKA @MisterFoxOnline is an ICT, IT and CAT Teacher and Young Engineers instructor. He has a passion for technology and loves to find solutions to problems using the skills he has learned in the course of his IT career.