C C++ CMake CSS Cypress date-fns Django Django REST Framework ESLint Git GNU Make HTML htmx HTTP JavaScript MariaDB NumPy pandas PHP PostgreSQL Python PyTorch Qt SQLite Tailwind CSS

Beyond Basic Text: Using HTML for Pronunciation Guides and More


  • When the user hovers over the character, the <rt> content appears as a tooltip.
  • Text within the <rt> element appears above the character it annotates, but visually hidden by default.
  • The <rt> element goes inside a <ruby> element.
<ruby>漢<rt>kan</rt></ruby> (character)

In this case, "漢" (kanji character) would be displayed normally, but hovering over it would show "kan" as the pronunciation hint.

  • It relies on the browser's styling to display the annotation.
  • <rt> is for content, not for programming logic.

This is a kanji character: 知 <ruby>道<rt>dou</rt></ruby> (road).

This will display "知" (chi) and "道" (michi) normally, but hovering over "道" will show "dou" as the pronunciation hint.

We use ASAP for <ruby>As Soon As Possible<rt>as soon as possible</rt></ruby>.

This will display "ASAP" normally, but hovering over it will reveal the full meaning "As Soon As Possible".

Technical Term Definition

The term <ruby>API<rt>Application Programming Interface</rt></ruby> refers to...

This will display "API" normally, but hovering over it will define it as "Application Programming Interface".

  • Browsers might also offer different ways to interact with ruby annotations, such as keyboard navigation.
  • These examples rely on the browser's default styling for ruby annotations, which might be subtle. You can use CSS to customize the appearance of the annotations.

  1. Title Attribute
This is an abbreviation: ASAP (<title>As Soon As Possible</title>).
  1. <abbr> Element

The <abbr> element is specifically designed for abbreviations and provides a built-in way to define the full term.

This is an abbreviation: <abbr title="As Soon As Possible">ASAP</abbr>.
  1. JavaScript and DOM Manipulation

For more advanced scenarios, you can use JavaScript to create custom tooltips or annotations. This involves manipulating the Document Object Model (DOM) to dynamically add elements near the content you want to explain.

This approach requires knowledge of JavaScript and is more complex than the previous options.

  • If you require highly customized or interactive annotations, consider using JavaScript.
  • For ruby annotations specifically, stick with the <rt> element within a <ruby> container.