Little known CSS Features: Ruby Layout (Part 1)

Photo by Hakan Nural on Unsplash

Little known CSS Features: Ruby Layout (Part 1)

What is it

(Ruby Layout) provides the rendering model and formatting controls related to the display of ruby annotation. Ruby annotation is a form of interlinear annotation, consisting of short runs of text alongside the base text

That clarified nothing

I know; This one requires a bit of background. I promise you'll at least learn something, and you may find a new technique for enhancing your CSS Designs with:

  • Pronunciation guides
  • Short, snarky comments
  • Translations
  • Synonyms

So I'm a fool -- Pandemic Hobbies edition

When the Pandy got its hooks in, many people took up a new hobby, mostly baking Sourdough. I already baked Sourdough because I'm insufferable, so I went to the next logical step: acquiring a Linguistics degree.

Well, I must clarify; acquiring a Diploma of Japanese I subsequently decided to expand into a full three-year Linguistics degree majoring in Japanese, while still working full time.

Japanese is hard

This has been ... stressful. Japanese is considered one of the most difficult languages for English speakers to learn, primarily because of their writing system.

Japanese writing

Japanese has an alphabet called Hiragana, which is a syllabary, that is, a set of characters tell you how to pronounce a word. Once you can read Hiragana, you can pronounce any word in the Japanese language. Compare this to English, where the pronunciation of "live" depends on whether you mean "not pre-recorded" or "not die".

1536px-Table_hiragana.svg.png (Thank you Wikipedia)

Japanese also has Katakana, which is basically a 1:1 equivalent for Hiragana, used for writing foreign loan words (amongst other things).

(Despite being called syllabaries these two scripts technically don't express syllables but instead mora, which is a timing-based unit that isn't germane to this discussion. If you want to learn more, leave a comment and I'll write another article!)

Japanese also has a logographic (picture based) writing system called Kanji which they kind-of borrowed wholesale from China. Actually, they're complicated enough to deserve their own H1.

Why are Kanji so hard?

1. Because there's so many

Seriously, tens of thousands

One of the definitive dictionaries, the Dai Kan-wa Jiten, contains over 50'000 characters.

Lies. No-one could learn that many.

You're right. Japanese students learn Kanji all the way through graduating high-school, gradually getting through the 2136 jōyō kanji, the official Government list of characters required for functional literacy in Japanese.

But wait, there's more!

Wikipedia points out that there are roughly 1000 additional, commonly used characters (including those for names) as well as some specialised industry characters.

2. Because they're not always read the same way

Sound Readings & Meaning Readings

Because Kanji were borrowed from China, they already had a meaning and a pronunciation in Chinese. The Japanese had their own words for most of the meanings, so the characters could be read with the Japanese word for the Chinese reading. However, the Japanese also decided to import the pronunciations, adjusted for their syllable structure.

Just to spice things up further, the Japanese also didn't import meanings wholesale; Some characters had their meanings adjusted.

For instance, the character 田 is Middle Chinese for Field, pronounced /den/. In Japanese, it specifically means Rice Paddy, not field, and so not only can it be pronounced den, it can also be pronounced ta.

But wait, there's still more!

More readings, that is. See, languages aren't static things; they change. As China's pronunciation of their characters changed, Japan imported the new pronunciations... and kept some of the old ones!

Not only that, but the meanings of characters differed as well, depending on which region of Japan you're in. A character might mean "Shovel" in one region, and "Rake" in another, and over time, both meanings spread nationwide... Which led to Japanese having multiple sound readings and multiple meaning readings for each character.

So how do you tell readings apart?

Context, mainly. Let's look at an example! This is the Kanji for Electrical Appliances:

Those are the kanji for Electricity, Child, Manufacture and Goods.

The kanji for Child shows up in lots of words, pronounced in several ways:

As does the Kanji for Goods:

That is stunningly unhelpful


There are some general rules that can help, which I'm not going to cover here. Roughly speaking, there's one primary reading of each type which is commonly used. The structure of the word (Kanji alone, Multiple Kanji with no Kana, etc) can suggest which readings to use. And then it comes down to knowing the word and recognising it in context (Just like you do for English!)

So what does this have to do with CSS?

Japanese Children aren't fully literate until they graduate Highschool

Remember when I said that Japanese study Kanji right up until graduation? That means that, functionally speaking, for the first 18 years of their life the Japanese can't read all of the characters they're likely to encounter.

In fact, given the large number of Kanji, the existence of technical vocabulary and rare characters and such, it's unlikely that most adults in Japan know every Kanji, even if we restrict ourselves to just those used in the last 100 years.

Why this isn't a problem

The Japanese speak... Japanese

This gives them a huge advantage over a foreign leaner. Even if a Japanese child doesn't know how a Kanji is read, they can use their language knowledge and the other Kanji in a sentence to guess.

Take Denshiseihin, the "Electrical Goods" I referenced before. If a Japanese child knows the kanji for Electricity (Which is also used in Phone and Light), the Kanji for Child can be pronounced as "shi" in "boushi" (Meaning Hat) and Goods can be pronounced "hin" in "shokuhin" (Foodstuffs), and has heard the word "Denshiseihin" before, they can make an educated guess that the unknown character is "sei*".

They Cheat with Furigana

If you've read any Japanese, you might have noticed that some Kanji words are printed with Hiragana above them. This is called Furigana and indicates to the reader how a word is pronounced:

Screen Shot 2022-08-22 at 1.54.43 pm.png

These are common in children's texts, and also appear in Newspapers and print where an average adult reader might not be familiar with a character.

This is a lot

You're right, it is a lot, and I've still not come to the point. Yikes.

Tell you what; Subscribe to me here on Hashnode, and you'll get notified when Part 2 comes out, and I finally explain what all of this has to do with CSS. It'll be good, I promise.