細
→ルビ
>Fet-Fe 細 (→アポストロフィ) |
>Fet-Fe 細 (→ルビ) |
||
| 124行目: | 124行目: | ||
: <span lang="ko">唐澤貴洋(당택귀양)</span> | : <span lang="ko">唐澤貴洋(당택귀양)</span> | ||
上の韓国語の例では、ハングルが詰まっているために漢字との対応が見づらくなっている。 | |||
これを解決するためにrbタグを用いるように解説しているサイトもあるが、標準ではなく推奨されておらず<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/rb</ref>、動作も安定しない。 | |||
面倒でも一文字ずつrtタグを振る必要がある。 | |||
次の例では、上の例文はrbタグを用いて<code><ruby lang="ko">唐<rb>澤<rb>貴<rb>洋<rp>(</rp><rt>당<rt>택<rt>귀<rt>양<rp>)</rp></ruby></code>と、下の例ではrbタグを用いずに<code><ruby lang="ko">唐<rt>당</rt>澤<rt>택</rt>貴<rt>귀</rt>洋<rt>양</rt></ruby></code>と記述している。 | |||
: <ruby lang="ko">唐<rb>澤<rb>貴<rb>洋<rp>(</rp><rt>당<rt>택<rt>귀<rt>양<rp>)</rp></ruby> | |||
: <ruby lang="ko">唐<rt>당</rt>澤<rt>택</rt>貴<rt>귀</rt>洋<rt>양</rt></ruby> | |||
ルビが長いと本文のスペースが大きくなる。 | ルビが長いと本文のスペースが大きくなる。 | ||
: <ruby lang="vi">唐澤貴洋<rp>(</rp><rt>Đường Trạch Quý Dương</rt><rp>)</rp></ruby> | : <ruby lang="vi">唐澤貴洋<rp>(</rp><rt>Đường Trạch Quý Dương</rt><rp>)</rp></ruby> | ||
台湾で用いられている{{wpl|注音符号}}は横書きでも漢字の右側に振られる。 | |||
これを表示する為に、CSSのruby-positionにはinter-characterというものが定められている<ref>https://developer.mozilla.org/ja/docs/Web/CSS/ruby-position</ref>が、これを実装しているブラウザは2021年9月7日現在ない。 | |||
次に示す例では、rubyタグに<code>ruby-position: inter-character;</code>を設定している。 | |||
: <ruby lang="zh-TW" style="ruby-position: inter-character;">唐<rt>ㄊㄤˊ</rt>澤<rt>ㄗㄜˊ</rt>貴<rt>ㄍㄨㄟˋ</rt>洋<rt>ㄧㄤˊ</rt></ruby> | |||
ルビを2つ振るには、rubyタグ内でrtcタグ<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/rtc</ref>を用いてルビをグループ化する。 | |||
但しこれも2021年9月7日現在Firefox以外では動作しない。 | |||
次の例では<code><ruby>唐澤貴洋<rp>（</rp><rt>たうたくくゐやう</rt><rp>）</rp><rtc><rp>（</rp><rt>だうじやくくゐやう</rt><rp>）</rp></rtc></ruby></code>と記述している。 | |||
: <ruby>唐澤貴洋<rp>（</rp><rt>たうたくくゐやう</rt><rp>）</rp><rtc><rp>（</rp><rt>だうじやくくゐやう</rt><rp>）</rp></rtc></ruby> | |||