6 ms·

<ruby>: The Ruby Annotation element

189 points by alin23 5y ago

nyuszika7h 5y ago
When I read the headline I thought it's some weird new syntax for embedding Ruby code snippets in HTML. This is definitely not going to be confusing... /s
- alin23 5y ago
 My initial title was: The <ruby> HTML element But the ruby tag got stripped by HN and I ended up with The HTML element
 - deleted 5y ago
 [deleted]
 - Izkata 5y ago
 Hum... Does it accept <ruby> ?
 - alin23 5y ago
 Not really, it renders: The andlt;Ruby> HTML element https://cln.sh/LteC0S https://cln.sh/LteC0S
- makach 5y ago
 I thought the same. Now that I read the documentation I think I will be fine and confusion less likely.
- 7c7599bfe5df 5y ago
 It's been around for a decade in browsers[1], and the terminology itself precedes that of the ruby language. You haven't been confused for the last 11 years, so this doesn't seem to have been a problem. [1] The W3C spec is even older.
 - thrashh 5y ago
 I think I used it in 2005 so it’s definitely olddd.
 - notreallyserio 5y ago
 > You haven't been confused for the last 11 years You underestimate me! Or over.
 - kingcharles 5y ago
 Now I'm even more confused!
- deleted 5y ago
 [deleted]
antonkar 5y ago
I used it in my old and free iOS web browser to put translation (Spanish, French…) or Pinyin on top of English or Chinese words https://apps.apple.com/app/id932996489 https://apps.apple.com/app/id932996489
dalke 5y ago
Interesting! I noticed "It can also be used for annotating other kinds of text" and wanted to experiment with being able to number specific letters in a string. More specifically, SMILES is a linear molecular structure notation. "O" is water, "COO" is ethyl alcohol, "c1ccccc1" is a benzene ring, and much more. (See https://en.wikipedia.org/wiki/Simplified_molecular-input_line-entry_system https://en.wikipedia.org/wiki/Simplified_molecular-input_lin... .) I want to annotate atom positions in the SMILES string. I currently do this with ("pip install smiview") text over the string, as this example using phenol. 1 23456 7 c1ccccc1O I wanted to try it with ruby so I used: <ruby> c<rt>1</rt>1c<rt>2</rt>c<rt>3</rt>c<rt>4</rt>c<rt>5</rt>c<rt>6</rt>1 </ruby> The "2" is located over the center of "1c" instead of over the second "c" like I wanted. How do I get it to center only over the "c"? I tried changing the CSS too, using this catch-all: ruby { font-size: 2em; ruby-align: center; text-align: center; } * {ruby-align: center;} No luck. I also tried wrapping things in a span, like: c<rt>1</rt>1c<rt>2</rt>c<rt>3</rt> but got the 3 as a new ruby line, centered over the "1cc", itself with a ruby "2" between the second and third "c". I tried other combinations of , to no avail.
- OJFord 5y ago
 I know nothing about this, but use a fixed width font perhaps (if you weren't)? Sounds like it could be because the '1' is narrower.
- vore 5y ago
 Multiple ruby spans, perhaps? <ruby> c<rt>1</rt> </ruby>1<ruby> c<rt>2</rt> </ruby><ruby> c<rt>3</rt>c<rt>4</rt>c<rt>5</rt>c<rt>6</rt>1 </ruby>
 - dalke 5y ago
 Yes, that was the solution. Thanks!
- gvx 5y ago
 As far as I can tell, the only content inside of a ruby tag should be annotated text or its annotation, the 1 that should not be annotated should not be inside the <ruby> tag. I get a good result with this: <ruby>c<rt>1</rt></ruby>1<ruby>c<rt>2</rt>c<rt>3</rt>c<rt>4</rt>c<rt>5</rt>c<rt>6</rt></ruby>1
danschuller 5y ago
This is a cool. It's something I've toyed with putting into my toy font renderers but it always seemed like it had a lot of edge cases. Length of the ruby text overflowing the width of the parent, in some to most cases a little overflow is ok but it's certainly not guaranteed. Scaling down the ruby text isn't the ideal solution because it quickly becomes unreadable. The other option is to scale the spacing in the parent text, which seems to be done for <ruby>境界面<rt>インターフェース</ruby> in the specification https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-ruby-element https://html.spec.whatwg.org/multipage/text-level-semantics.... but then that's going to impact the line wrapping and so on. Kudos to the implementators!
robin_reala 5y ago
Weirdly I’ve only used this in anger outside of Japanese text, to replicate a semantic layout in the original printing of Tristram Shandy for Standard Ebooks (see book 3, chapter 11, the Latin version: https://standardebooks.org/ebooks/laurence-sterne/the-life-and-opinions-of-tristram-shandy-gentleman/text/chapter-3-11-la https://standardebooks.org/ebooks/laurence-sterne/the-life-a...).
- kingcharles 5y ago
  What does the "ruby" gloss mean in the linked text? Why do some words have it? It's been many a decade since I took Latin...
  - hcayless 5y ago
    At a quick glance, it looks like it’s giving plural forms as alternatives. So the document can refer to a person or a group.
jagger27 5y ago
Is that support table right? IE5 supports it but it took until Firefox 38? Those came out in 1999 and 2015.
- deaddodo 5y ago
  Yes. The Ruby tag was introduced by Microsoft in IE5, and then rolled into HTML5 during the standardization process.
wodenokoto 5y ago
The `<rp>` tag showed in the examples, isn't explained on the page but is a fallback - something that should be rendered if the ruby tag is not understood. Sadly, the rp page doesn't show any examples of what fallback behavior might look like. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp
- shawnz 5y ago
 Simply remove all the tags to see how the fallback behaviour would look, for example data:text/html;charset=utf-8,%E6%BC%A2%20(kan)%20%E5%AD%97%20(ji)
- kelnos 5y ago
 In general, browsers will just drop tags they don't understand, while still rendering the tags' contents (as normal in-line text). So if, like in the example, you did: <ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby> But the browser didn't have support <ruby>, it would just render as: 明日 (Ashita) The idea is that a <ruby>-supporting browser wouldn't need to render the parentheses, because it's going to display "Ashita" in a special way that sets it off from the regular text (so you "annotate" the parens with <rp>). But in a browser that doesn't support <ruby>, you'd want it to still display in a sane, understandable way, where it would still be easy to understand that the added text is a pronunciation hint.
kazinator 5y ago
I used that for the furigana over the made-up words in a Jabberwocky translation. http://www.kylheku.com/~kaz/gayabōkin.html http://www.kylheku.com/~kaz/gayabōkin.html
kingcharles 5y ago
I assume this was added as a way to implement language features such as Furigana, which is a minor, but useful, feature of written Japanese: https://en.wikipedia.org/wiki/Furigana https://en.wikipedia.org/wiki/Furigana Would this make sense for putting romanized text above non-roman languages? Currently the standard is just to write the native text and then the romanized. See, e.g.: https://en.wikipedia.org/wiki/Weekly_Sh%C5%8Dnen_Jump https://en.wikipedia.org/wiki/Weekly_Sh%C5%8Dnen_Jump I'm thinking Hepburn above the kana: https://en.wikipedia.org/wiki/Hepburn_romanization https://en.wikipedia.org/wiki/Hepburn_romanization Anyone with more language knowledge want to cuss me out this idea?
jhvkjhk 5y ago
Although Ruby element is basically a Japanese thing, it can be used to display both original text and translated text. I think using ruby rather than two-column-view is far better. For example, this script[1] will show original English word above Japanese loan words, using the ruby element. [1]: https://greasyfork.org/en/scripts/33268-katakana-terminator https://greasyfork.org/en/scripts/33268-katakana-terminator
- LAC-Tech 5y ago
  > Although Ruby element is basically a Japanese thing It's commonly used in textbooks for different Chinese languages. I have ministry of education textbooks from Taiwan, and ruby characters are used for both Hokkien and Mandarin (the Hokkien one has two different ruby character scripts which is quite visually busy). I would imagine it would be handy for Hindi learners as well. And probably hundreds of other languages, though I can't speak if it is used.
soheil 5y ago
Not to be confused with the programming language.
philsnow 5y ago
This is neat, and immediately made me think of the annotations that show up when you hit the play button on https://lowerquality.com/gentle/ https://lowerquality.com/gentle/ , but it turns out those are made with absolutely-positioned divs and a lot of offline-precalculated px math.
divbzero 5y ago
MDN describes <ruby>’s typical usage for showing pronunciation of East Asian characters but only gives examples for Japanese. Wikipedia [1] offers a few additional examples for other languages. Chinese (pinyin): <ruby> 北 <rp>(</rp><rt>běi</rt><rp>)</rp> 京 <rp>(</rp><rt>jīng</rt><rp>)</rp> </ruby> Chinese (zhuyin): <ruby> 北 <rp>(</rp><rt>ㄅㄟˇ</rt><rp>)</rp> 京 <rp>(</rp><rt>ㄐ丨ㄥ</rt><rp>)</rp> </ruby> Korean (hangul): <ruby> 韓 <rp>(</rp><rt>한</rt><rp>)</rp> 國 <rp>(</rp><rt>국</rt><rp>)</rp> </ruby> Vietnamese (chữ Quốc ngữ): <ruby> 河 <rp>(</rp><rt>Hà</rt><rp>)</rp> 內 <rp>(</rp><rt>Nội</rt><rp>)</rp> </ruby> [1]: https://en.wikipedia.org/wiki/Ruby_character https://en.wikipedia.org/wiki/Ruby_character
akaBruce 5y ago
For those studying a language that might use benefit from this, I have this CSS in my Anki cards. I use the ruby tag to remind me of readings for things that aren't the main focus of the card I'm working with. For example, if a vocab word is used in an example sentence, but one of the other words in the example is unfamiliar to me. It shows the rt tag on hover or focus and works for me for both mouse and touch on Anki and AnkiDroid. Maybe this or some variation might help others as well. ruby { text-decoration: underline dotted; } ruby rt { visibility: hidden; } ruby:hover rt, ruby:focus rt { visibility: visible; }
fnord77 5y ago
> The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. I got a little worried that browsers were going to support that horrible programming language with the same name as a script tag or something.

189 points by alin23 5y ago

When I read the headline I thought it's some weird new syntax for embedding Ruby code snippets in HTML. This is definitely not going to be confusing... /s

alin23 5y ago
My initial title was: The <ruby> HTML element But the ruby tag got stripped by HN and I ended up with The HTML element
- deleted 5y ago
 [deleted]
- Izkata 5y ago
 Hum... Does it accept <ruby> ?
 - alin23 5y ago
 Not really, it renders: The andlt;Ruby> HTML element https://cln.sh/LteC0S https://cln.sh/LteC0S
makach 5y ago
I thought the same. Now that I read the documentation I think I will be fine and confusion less likely.
7c7599bfe5df 5y ago
It's been around for a decade in browsers[1], and the terminology itself precedes that of the ruby language. You haven't been confused for the last 11 years, so this doesn't seem to have been a problem. [1] The W3C spec is even older.
- thrashh 5y ago
  I think I used it in 2005 so it’s definitely olddd.
- notreallyserio 5y ago
  > You haven't been confused for the last 11 years You underestimate me! Or over.
  - kingcharles 5y ago
    Now I'm even more confused!
deleted 5y ago
[deleted]

antonkar 5y ago

I used it in my old and free iOS web browser to put translation (Spanish, French…) or Pinyin on top of English or Chinese words https://apps.apple.com/app/id932996489 https://apps.apple.com/app/id932996489

dalke 5y ago

Interesting! I noticed "It can also be used for annotating other kinds of text" and wanted to experiment with being able to number specific letters in a string. More specifically, SMILES is a linear molecular structure notation. "O" is water, "COO" is ethyl alcohol, "c1ccccc1" is a benzene ring, and much more. (See https://en.wikipedia.org/wiki/Simplified_molecular-input_line-entry_system https://en.wikipedia.org/wiki/Simplified_molecular-input_lin... .) I want to annotate atom positions in the SMILES string. I currently do this with ("pip install smiview") text over the string, as this example using phenol. 1 23456 7 c1ccccc1O I wanted to try it with ruby so I used: <ruby> c<rt>1</rt>1c<rt>2</rt>c<rt>3</rt>c<rt>4</rt>c<rt>5</rt>c<rt>6</rt>1 </ruby> The "2" is located over the center of "1c" instead of over the second "c" like I wanted. How do I get it to center only over the "c"? I tried changing the CSS too, using this catch-all: ruby { font-size: 2em; ruby-align: center; text-align: center; } * {ruby-align: center;} No luck. I also tried wrapping things in a span, like: c<rt>1</rt>1c<rt>2</rt>c<rt>3</rt> but got the 3 as a new ruby line, centered over the "1cc", itself with a ruby "2" between the second and third "c". I tried other combinations of , to no avail.

OJFord 5y ago
I know nothing about this, but use a fixed width font perhaps (if you weren't)? Sounds like it could be because the '1' is narrower.
vore 5y ago
Multiple ruby spans, perhaps? <ruby> c<rt>1</rt> </ruby>1<ruby> c<rt>2</rt> </ruby><ruby> c<rt>3</rt>c<rt>4</rt>c<rt>5</rt>c<rt>6</rt>1 </ruby>
- dalke 5y ago
 Yes, that was the solution. Thanks!
gvx 5y ago
As far as I can tell, the only content inside of a ruby tag should be annotated text or its annotation, the 1 that should not be annotated should not be inside the <ruby> tag. I get a good result with this: <ruby>c<rt>1</rt></ruby>1<ruby>c<rt>2</rt>c<rt>3</rt>c<rt>4</rt>c<rt>5</rt>c<rt>6</rt></ruby>1

danschuller 5y ago

This is a cool. It's something I've toyed with putting into my toy font renderers but it always seemed like it had a lot of edge cases. Length of the ruby text overflowing the width of the parent, in some to most cases a little overflow is ok but it's certainly not guaranteed. Scaling down the ruby text isn't the ideal solution because it quickly becomes unreadable. The other option is to scale the spacing in the parent text, which seems to be done for <ruby>境界面<rt>インターフェース</ruby> in the specification https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-ruby-element https://html.spec.whatwg.org/multipage/text-level-semantics.... but then that's going to impact the line wrapping and so on. Kudos to the implementators!

robin_reala 5y ago

Weirdly I’ve only used this in anger outside of Japanese text, to replicate a semantic layout in the original printing of Tristram Shandy for Standard Ebooks (see book 3, chapter 11, the Latin version: https://standardebooks.org/ebooks/laurence-sterne/the-life-and-opinions-of-tristram-shandy-gentleman/text/chapter-3-11-la https://standardebooks.org/ebooks/laurence-sterne/the-life-a...).

kingcharles 5y ago
What does the "ruby" gloss mean in the linked text? Why do some words have it? It's been many a decade since I took Latin...
- hcayless 5y ago
  At a quick glance, it looks like it’s giving plural forms as alternatives. So the document can refer to a person or a group.

jagger27 5y ago

Is that support table right? IE5 supports it but it took until Firefox 38? Those came out in 1999 and 2015.

deaddodo 5y ago
Yes. The Ruby tag was introduced by Microsoft in IE5, and then rolled into HTML5 during the standardization process.

wodenokoto 5y ago

The `<rp>` tag showed in the examples, isn't explained on the page but is a fallback - something that should be rendered if the ruby tag is not understood. Sadly, the rp page doesn't show any examples of what fallback behavior might look like. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp

shawnz 5y ago
Simply remove all the tags to see how the fallback behaviour would look, for example data:text/html;charset=utf-8,%E6%BC%A2%20(kan)%20%E5%AD%97%20(ji)
kelnos 5y ago
In general, browsers will just drop tags they don't understand, while still rendering the tags' contents (as normal in-line text). So if, like in the example, you did: <ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby> But the browser didn't have support <ruby>, it would just render as: 明日 (Ashita) The idea is that a <ruby>-supporting browser wouldn't need to render the parentheses, because it's going to display "Ashita" in a special way that sets it off from the regular text (so you "annotate" the parens with <rp>). But in a browser that doesn't support <ruby>, you'd want it to still display in a sane, understandable way, where it would still be easy to understand that the added text is a pronunciation hint.

kazinator 5y ago

I used that for the furigana over the made-up words in a Jabberwocky translation. http://www.kylheku.com/~kaz/gayabōkin.html http://www.kylheku.com/~kaz/gayabōkin.html

kingcharles 5y ago

I assume this was added as a way to implement language features such as Furigana, which is a minor, but useful, feature of written Japanese: https://en.wikipedia.org/wiki/Furigana https://en.wikipedia.org/wiki/Furigana Would this make sense for putting romanized text above non-roman languages? Currently the standard is just to write the native text and then the romanized. See, e.g.: https://en.wikipedia.org/wiki/Weekly_Sh%C5%8Dnen_Jump https://en.wikipedia.org/wiki/Weekly_Sh%C5%8Dnen_Jump I'm thinking Hepburn above the kana: https://en.wikipedia.org/wiki/Hepburn_romanization https://en.wikipedia.org/wiki/Hepburn_romanization Anyone with more language knowledge want to cuss me out this idea?

jhvkjhk 5y ago

Although Ruby element is basically a Japanese thing, it can be used to display both original text and translated text. I think using ruby rather than two-column-view is far better. For example, this script[1] will show original English word above Japanese loan words, using the ruby element. [1]: https://greasyfork.org/en/scripts/33268-katakana-terminator https://greasyfork.org/en/scripts/33268-katakana-terminator

LAC-Tech 5y ago
> Although Ruby element is basically a Japanese thing It's commonly used in textbooks for different Chinese languages. I have ministry of education textbooks from Taiwan, and ruby characters are used for both Hokkien and Mandarin (the Hokkien one has two different ruby character scripts which is quite visually busy). I would imagine it would be handy for Hindi learners as well. And probably hundreds of other languages, though I can't speak if it is used.

soheil 5y ago

Not to be confused with the programming language.

philsnow 5y ago

This is neat, and immediately made me think of the annotations that show up when you hit the play button on https://lowerquality.com/gentle/ https://lowerquality.com/gentle/ , but it turns out those are made with absolutely-positioned divs and a lot of offline-precalculated px math.

divbzero 5y ago

MDN describes <ruby>’s typical usage for showing pronunciation of East Asian characters but only gives examples for Japanese. Wikipedia [1] offers a few additional examples for other languages. Chinese (pinyin): <ruby> 北 <rp>(</rp><rt>běi</rt><rp>)</rp> 京 <rp>(</rp><rt>jīng</rt><rp>)</rp> </ruby> Chinese (zhuyin): <ruby> 北 <rp>(</rp><rt>ㄅㄟˇ</rt><rp>)</rp> 京 <rp>(</rp><rt>ㄐ丨ㄥ</rt><rp>)</rp> </ruby> Korean (hangul): <ruby> 韓 <rp>(</rp><rt>한</rt><rp>)</rp> 國 <rp>(</rp><rt>국</rt><rp>)</rp> </ruby> Vietnamese (chữ Quốc ngữ): <ruby> 河 <rp>(</rp><rt>Hà</rt><rp>)</rp> 內 <rp>(</rp><rt>Nội</rt><rp>)</rp> </ruby> [1]: https://en.wikipedia.org/wiki/Ruby_character https://en.wikipedia.org/wiki/Ruby_character

akaBruce 5y ago

For those studying a language that might use benefit from this, I have this CSS in my Anki cards. I use the ruby tag to remind me of readings for things that aren't the main focus of the card I'm working with. For example, if a vocab word is used in an example sentence, but one of the other words in the example is unfamiliar to me. It shows the rt tag on hover or focus and works for me for both mouse and touch on Anki and AnkiDroid. Maybe this or some variation might help others as well. ruby { text-decoration: underline dotted; } ruby rt { visibility: hidden; } ruby:hover rt, ruby:focus rt { visibility: visible; }

fnord77 5y ago

> The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. I got a little worried that browsers were going to support that horrible programming language with the same name as a script tag or something.

&lt;ruby&gt;: The Ruby Annotation element

&lt;ruby&gt;: The Ruby Annotation element

<ruby>: The Ruby Annotation element

<ruby>: The Ruby Annotation element