Are there uses for <ruby> that don't involve language annotations?

MDN Learn
#1

(If this isn’t the right place to even ask this question, sorry!)

I’m wondering if <ruby> is semantically appropriate to use for marking up things that aren’t related to languages. Specifically I’m thinking of phone numbers that use letters in place of numbers — the <ruby> annotations could show the numerical equivalents of the letters.

Example: 1-800-FLOWERS, which is 1-800-356-9377 when dialed.

<p>1‒800‒<ruby>F<rt>3</rt>L<rt>5</rt>O<rt>6</rt>W<rt>9</rt>E<rt>3</rt>R<rt>7</rt>S<rt>7</rt></ruby></p>

That would render like this screenshot:

Screenshot_2020-09-18 Ruby Tag

(Minor styling has been applied.)

The same effect could be achieved with <span>s or whatever, but since <ruby> is intended for annotating text, and because using it automatically comes with that styling applied, it might make sense to use it in this case.

Is <ruby>'s definition in the spec broad enough to cover this use case? If not, what markup would be better?

But if it is, then I suggest adding that information to the MDN page about <ruby>, maybe as a “Hey, by the way…” aside.

#2

Hello @LordPachelbel

you are in the right place

not sure if that would help but check this way and also read the comment it has extra idea

and thanks for letting me know about the ruby element never saw it or know it exist but according to the mdn it related to pronunciation of East Asian characters. if i did not miss understand it

hope that help and have a nice day :slight_smile:

#3

I found two examples in the W3C Ruby Annotation from 2001 (last updated 2008) that aren’t pronunciation annotations. One of them is an abbreviation and the other is a date.

Date example screenshot:

Screenshot 2020-09-19 164641

Abbreviation example screenshot:

ruby-en-ex

(For abbreviations I would most likely use <abbr> instead of <ruby>, but the default styles and UX for <abbr> and <ruby> are very different, and so determining which tag is “better” might depend on the context in which the abbreviation is being used.)

Anyway, because the original recommendation has these examples, I now think using <ruby> to annotate phone numbers is a valid use case.

However, the markup I originally proposed isn’t ideal in terms of accessibility. Because I annotated each individual letter, screen reader users will probably hear something like “F3L5O6W9E3R7S7” or worse.

So here are two improved versions of the markup, and I’m not sure which is better, but they’re definitely better than the original:

<p>1‒800‒<ruby>FLOWERS<rt>356‒9377</rt></ruby></p>
<p><ruby>1‒800‒FLOWERS<rt>1‒800‒356‒9377</rt></ruby></p>

Screenshots, with minimal styling applied:

Screenshot 2020-09-19 171248

And as rendered by your browser, with default styles:

1‒800‒FLOWERS356‒9377

1‒800‒FLOWERS1‒800‒356‒9377

Actually, the <rp> tag should be used, too, for older browsers that can’t render these tags as intended:

<p>1‒800‒<ruby>FLOWERS<rp> (</rp><rt>356‒9377</rt><rp>)</rp></ruby></p>
<p><ruby>1‒800‒FLOWERS<rp> (</rp><rt>1‒800‒356‒9377</rt><rp>)</rp></ruby></p>

That will produce 1‒800‒FLOWERS (356‒9377) and 1‒800‒FLOWERS (1‒800‒356‒9377) respectively.

As for making the number a link, the markup would be this:

<p><a href="tel:+18003569377"><ruby>1‒800‒FLOWERS<rp> (</rp><rt>1‒800‒356‒9377</rt><rp>)</rp></ruby></a></p>

Rendered by your browser:

1‒800‒FLOWERS (1‒800‒356‒9377)

#4

thanks for sharing those links and for the knowledge and you are right

did you checked the first comment

the good thing about the a element it would allow click it to make the call

i think you could use aria with ruby also but i would need to dive into it to give you the attribute name

thanks for the info again and have a nice day