HTML / CSS

HTML5で正式な仕様になったルビがおもしろそう

html5_rudy

テキストでルビを表示してくれるのでいい感じそう。

ただ、今の環境ではすべてのブラウザでちゃんと表示してくれるかがかなり不安です。ですが、おもしろいのでメモっておきます。そのうち使うかもしれないし。

  1. ルビをふる文字を囲む
  2. ルビをふりたい文字をrudy要素で囲みます。

    薔薇
    
  3. ルビを指定
  4. ルビをrt要素で囲みます。
    ルビ対応しているブラウザにかんしてはこれで終了。

    薔薇ばら
    
  5. ルビ非対応ブラウザに対応させる
  6. ルビ非対応では以下のように表示されてしまうんです。

    薔薇ばら
    

    こんな不本意なことになっちゃいます。
    これを防ぐために「薔薇(ばら)」のような表示にしようかと。

    カッコを指定するにはrp要素を使います。
    このrp要素はルビ対応のブラウザでは表示されない特徴があります!

    最終的に以下のようになりました。

    薔薇ばら