Member-only story
The <ruby> HTML Element For East-Asian Characters
When you hear the term ruby you probably think about the ruby programming language, but there is another ruby you should be aware of in web development.
The
<ruby>element defines an alternative pronunciation for the text within the tag. This tag was built for east-asian languages, though it does have applications outside this use case.
About Characters
East Asian written characters often include smaller text pronunciations above or beside them. This is because the characters of some languages (primarily Chinese) have been adopted and used by other languages with different pronunciations.
The word for “America” in Chinese written characters is 美国, but the pronunciation in Mandarin or Cantonese of these same two characters is completely different ( mei5 gwok3 in cantonese, and mei3 guo2 in Mandarin.)
The common way to represent the alternative pronunciations is with a small subtext or supertext denotation. It is common to see pinyin (the english character version of a character) or other east asian language definitions above Chinese characters.
For example:
