2014年6月20日

利用 tag 幫文字標注音 假名


        <div>
            <ruby>
                <rb>今日</rb>
                <rt>きょう</rt>
            </ruby>
            は
            <ruby>
                <rb>暑</rb>
                <rt>あつ</rt>
            </ruby>
            いですね
        </div>


上面這串 顯示出來就是:

今日 きょう あつ いですね




如果看到的是:

今日 きょう は 暑 あつ いですね

那就表示browser不支援 html5 ∵html5已經把ruby做為標準了

此外 rb tag是比較以前的寫法 可以省略

使用方式:

<ruby>
  [要標音的字詞1] <rt>[標音1]</rt>
  [要標音的字詞2] <rt>[標音2]</rt>
  ...
</ruby>

but....萬一有browser不支援 但又不想被看起來怪怪的 可以用到<rp>
有支援標音的瀏覽器會忽略rp標籤裡的內容 不支援標音的瀏覽器就會顯示rp標籤裡的內容

所以就可以用<rp>包住括號

例如:

       <div>
            <ruby>
                今日
               <rp>(</rp> <rt>きょう</rt><rp>)</rp>
            </ruby>
            は
            <ruby>
                暑
               <rp>(</rp> <rt>あつ</rt><rp>)</rp>
            </ruby>
            いですね
        </div>


沒支援的看到的就會是:

今日 ( きょう) は 暑 ( あつ) いですね


有支援的依然是:

今日 きょう あつ いですね



ps如果看這篇覺得莫名其妙 那就先用chrome看這篇吧





沒有留言:

張貼留言