Ruby annotation refers to the small pronunciation guides placed alongside characters to indicate how they should be read. The name comes from the typographic term "ruby," which originally referred to 5.5-point type in British printing. Ruby is widely used in Japanese books, newspapers, and textbooks, and is essential in content aimed at children or text containing rare kanji.

In HTML, ruby is implemented using the <ruby> element. Writing <ruby>漢字<rt>かんじ</rt></ruby> displays the small reading "かんじ" above the characters "漢字." The <rp> element provides a parenthetical fallback for browsers that do not support ruby, though all current major browsers now support the <ruby> element natively.

There are two main styles of ruby: mono ruby and group ruby. Mono ruby assigns a reading to each individual character, making the pronunciation of each character explicit. Group ruby assigns a single reading to an entire word or compound, displaying the pronunciation as a unit across all base characters. Educational materials typically use mono ruby for clarity, while web content more commonly uses group ruby for simplicity. Typography books on Amazon cover these distinctions in depth.

Ruby creates an interesting challenge for character counting. Whether to include the ruby text (the pronunciation portion) in the character count depends on the context. In manuscript-style character counting, ruby is excluded. However, when extracting text content from the DOM, the <rt> content is concatenated with the base text, producing a string like "漢字かんじ" that combines both. Accurate character counting requires logic to strip out the ruby portion.

CSS provides several properties for styling ruby: ruby-position (above or below), ruby-align (alignment), and ruby-overhang (overflow behavior). The standard ruby font size is 50% of the base character, though web implementations often use 60-70% for better readability. When the ruby text is longer than the base text (for example, a short kanji compound with a long reading), the ruby overflows and requires spacing adjustments with adjacent characters.

From an accessibility standpoint, screen readers read ruby text aloud, making kanji pronunciation available to visually impaired users. However, the reading behavior varies between screen readers: some announce both the base text and the ruby ("漢字, かんじ"), while others read only the ruby text.