Tutorial

Quick Tutorial: Japanese ordered lists (CSS)

On a whole bunch of fansites, I kept seeing people being using hiragana and katakana on their ordered lists. I really wanted to try this! But I had no idea how. With some Google-fu, I found a page and I thought I’d share how it works here with some added cultural info.

Note: So far I’ve found this works in Safari, Chrome and Firefox, but not IE.

So you know how an ordered list works, right?
You add <ul> and then add <li> for each item on the list.

So for example, this;
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Creates;

  • List item 1
  • List item 2
  • List item 3

What we want to do is have the japanese あいうえお or アイウエオ replace those numbers.

One way is to attach the style tag directly to the <ul> tag.
Simply write <ul style="list-style-type:hiragana;"> for the hiragana and <ul style="list-style-type:katakana;"> for katakana.

あ. Usagi
い. Rei
う. Ami
え. Minako
お. Makoto

ア. Chibi-Us
イ. Setsuna
ウ. Haruka
エ. Michiru
オ. Hotaru

But wait! There’s more!

Another cute trick I haven’t seen before, was using the iroha system instead.
For those of you who don’t know, iroha is an ancient poem used in Japan similar to the English the quick brown fox jumped over the lazy dog… it uses every character in the Japanese syllabary.

Because the poem is old (c.794-1179), some defunct hiragana are also represented, which has been changed for modern usage. However, the poem is still well-known and is used for functions like numbered seating in a theatre and notes of an octave (Japan’s do re mi…).

To add the iroha version instead of the above gojyuuon (lit. 50 sounds), instead add <ul style="list-style-type:hiragana-iroha;"> for the hiragana and <ul style="list-style-type:katakana-iroha;"> for katakana.

い. Usagi
ろ. Rei
は. Ami
に. Minako
ほ. Makoto

イ. Chibi-Usa
ロ. Setsuna
ハ. Haruka
ニ. Michiru
ホ. Hotaru

See? Easy!

(bonus points if you noticed the katakana for “ho” ホ was right next to Hotaru)

But what if (like me) you’re lazy and don’t want that extra code cluttering up your page every time? You can add it to your CSS file.

ol, ul {
list-style: hiragana;
}

Just replace hiragana with whatever you want; hiragana, katakana, hiragana-iroha or katakana-iroha.

Next Post

You Might Also Like