• このエントリーをはてなブックマークに追加
大百科でrubyタグとrtタグ、rpタグが使用可能になりました
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

大百科でrubyタグとrtタグ、rpタグが使用可能になりました

2022-06-22 15:55

    大百科の記事本文においてrubyタグとrtタグ、rpタグが使用可能になりましたのでお知らせします。

    rubyタグを使うと任意の文字列にルビをふることが可能になります。

    なお、こちらのタグについては現在、ビジュアルHTMLエディタでの挿入には対応しておりません(将来的には対応する予定です)。
    使用する場合はビジュアルHTMLエディタを適宜オフにしてください。

    簡単な使い方

    まずはルビをふってみる

    ルビをふりたい文字列を <ruby>~</ruby> で括り、rubyタグ内のルビをふりたい文字列の後ろに <rt>~</rt> で括った文字列を追記すると、そこがルビになります。

    こう書くと、、、

    ニコニコ<ruby>大百科<rt>だいひゃっか</rt></ruby>

    こうなります。
    a40e2ff2ce6b4d487071bf9c929c65d2f78bc6ac

    対応していないブラウザへの対応

    rubyタグに対応していないブラウザで上記を表示するとこのようになってしまいます。
    5360056d61494915cc7882d0e8522a46173d31e3

    そのためにrpタグが用意されています。
    <rp>~</rp> で括った文字列は非対応ブラウザのみで表示されますので、以下のように書くことで非対応ブラウザでの違和感を軽減することができます。

    ニコニコ<ruby>大百科<rp>(</rp><rt>だいひゃっか</rt><rp>)</rp></ruby>

    rubyタグに対応しているブラウザでの表示
    a40e2ff2ce6b4d487071bf9c929c65d2f78bc6ac

    非対応ブラウザでの表示
    acbb6022b86ce1e4c6a1bd6836d652e441fe946c

    style属性を使ってみる

    rubyタグ、rtタグ、rpタグはインライン要素となっていて、spanと同様のstyleが適用可能になっています。
    以下の例ではルビ部分に赤い色を指定しています。

    ニコニコ<ruby>大百科<rp>(</rp><rt style="color: red;">だいひゃっか</rt><rp>)</rp></ruby>

    168c4044fe67ae14daad84feda69cf315e1ff4ab

    以上、簡単ではありますがざっくりとした使い方となります。

    補足

    rubyタグの使用により分断された文字列には自動リンクが入らなくなりますので、リンクをつけたい場合は適宜Aタグを入れるなどして対応してください。

    (文責・はくはく

    コメントを書く
    コメントをするにはログインして下さい。