Warning: Parameter 1 to multibyte_patch::wplink_js() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579
HTML5で正式な仕様になったルビがおもしろそう | Crunchlog
Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

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. CSSで英単語の途中から改行する方法

    HTML / CSS

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

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

  2. 20140114233255.jpg

    HTML / CSS

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

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

  3. html5

    HTML / CSS

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

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

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 懐かしい!!カードダスSD戦国伝!!
  6. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  8. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  9. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  10. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」

アーカイブ

  1. 日常

    雨天走行
  2. me_Flash_Player1.jpeg

    MarsEdit

    【MarsEdit】頻繁に落ちる人は「Flash Player plugin」を…
  3. 日常

    『脳は絵をどのように理解するか』
  4. 日常

    連休前にかぎって忙しい
  5. iPhoneもiPadも新プロダクトはサイズダウン!?「Apple Special Event 2016年3月」

    Appleイベント

    iPhoneもiPadも新プロダクトはサイズダウン!?「Apple Specia…
PAGE TOP