HTML / CSS

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

html5_rudy

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

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

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

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

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

    1
    
    薔薇ばら

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

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

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

    1
    
    <rudy>薔薇<rp></rp><rt>ばら</rt><rp></rp></rudy>

関連記事

  1. html5

    HTML / CSS

    HTML4とHTML5の違いをざっくりと

    ちょっと今まで意識していなかったので、思いっきりざっくりとまとめてみ…

  2. CSSで英単語の途中から改行する方法

    HTML / CSS

    CSSで英単語の途中から改行する方法

    気がつくのが遅かったのですが、英単語で途中から改行されないんですね。短…

  3. 20140114233255.jpg

    HTML / CSS

    アプリ内webブラウザのエラーを解消

    HTML5でWebアプリをつくり、アプリ内ブラウザで表示させたとき…

最近の記事

  1. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  2. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  3. コミックのイラストが新鮮だった!『MARVEL展』
  4. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  5. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 留学

    文化の違い
  2. 祝「GR」10周年!「GR 10th Anniversary “10th GReeting”」

    イベント

    祝「GR」10周年! 記念イベント「GR 10th Anniversary “1…
  3. 留学

    7/23 ロンドンへ
  4. コメント覧変更

    WordPress

    コメント覧デザイン変更
  5. crocs_bistro-1.jpg

    プロダクト

    ご近所履き用にクロックス「bistro」を買ってみた。オススメ!
PAGE TOP