HTML5 之「注音」、「語言」標簽: <ruby>、<rt> 還有 <ruby lang>、<span lang>

  • 本話題由 小焰ChatGPT 等贊助編寫。

……こうぞうこうよう

神樣でも何でもいい。神什麽的都好。今日まで魔女と戦って来たみんなを、至今為止和魔女戦斗的大家,希望を信じた魔法少女を、相信希望的魔法少女,私は泣かせたくない。我不想再譲她們哭泣。最後まで笑顔でいて欲しい。希望她們都能笑着到最後。それを邪魔するルールなんて、任何妨礙這些的法則,壞してみせる。変えてみせる。我会打破它,重写它。これが私の祈り。私の願い。這就是我的祈願,我的願望!さあ、叶えてよ!来!実現它吧!インキュベーター!Incubator!(孵化者)

可以


……這句話是不是有點與衆不同(在部分瀏覽器或不會顯示出明顯差異)?

原句(繁體中文): 我能吞下玻璃而不傷身體。
附加了日語語言標簽的句子: 我能吞下玻璃而不傷身體。


教程

Part 1. 注音標簽

ㄓㄜˋㄕˋㄍㄜˋㄕˋㄈㄢˋ

<ruby>這<rt>ㄓㄜˋ</rt>是<rt>ㄕˋ</rt>一<rt>ㄧ</rt>個<rt>ㄍㄜˋ</rt>示<rt>ㄕˋ</rt>範<rt>ㄈㄢˋ</rt></ruby>
  • 讓我們分析一下其的結構。
<ruby>文字<rt>注音</rt>更多的文字<rt>更多的注音</rt></ruby>
  • 讓我們欣賞一下「成品」。

ㄗㄠˇㄕㄤˋㄏㄠˇㄚˊ

<ruby>早<rt>ㄗㄠˇ</rt>上<rt>ㄕㄤˋ</rt>好<rt>ㄏㄠˇ</rt>啊<rt>ㄚˊ</rt>!</ruby>
  • 但是,這樣子實在是叫人感到奇怪(如果使用的顯示語言不是繁體中文)。
    接下來的 Part 2 將會解決這個問題。

Part 2. 語言標簽

<span lang>

原句(繁體中文): 勇者無畏的將劍刺向了惡龍。
强制使用日語顯示的繁體中文: 勇者無畏的將劍刺向了惡龍。

<span lang=ja>勇者無畏的將劍刺向了惡龍。</span>
  • 讓我們分析一下其的結構。
<span lang="zh-Hant">繁體中文</span>

<ruby lang>

  • 還記得 Part 1 最後給出的示範嗎?再稍微改一下下,
    只要把 <ruby> 變成 <ruby lang="語言">……
<ruby lang="zh-Hant">文字<rt>注音</rt>更多的文字<rt>更多的注音</rt></ruby>

差不多就大功告成了。

ㄌㄧㄥˊㄏㄨㄣˊㄅㄠˇㄕˊㄏㄨㄟˋㄩㄣˋㄩˋㄇㄛˊㄋㄩˇ的話,大ㄉㄚˋㄐㄧㄚㄅㄨˋㄉㄡㄓˇㄧㄡˇㄑㄩˋㄙˇ了嗎!你ㄋㄧˇㄧㄝˇㄕˋㄨㄛˇㄧㄝˇㄕˋ

<ruby lang="zh-Hant">靈<rt>ㄌㄧㄥˊ</rt>魂<rt>ㄏㄨㄣˊ</rt>寶<rt>ㄅㄠˇ</rt>石<rt>ㄕˊ</rt>會<rt>ㄏㄨㄟˋ</rt>孕<rt>ㄩㄣˋ</rt>育<rt>ㄩˋ</rt>魔<rt>ㄇㄛˊ</rt>女<rt>ㄋㄩˇ</rt>的話,大<rt>ㄉㄚˋ</rt>家<rt>ㄐㄧㄚ</rt>不<rt>ㄅㄨˋ</rt>都<rt>ㄉㄡ</rt>只<rt>ㄓˇ</rt>有<rt>ㄧㄡˇ</rt>去<rt>ㄑㄩˋ</rt>死<rt>ㄙˇ</rt>了嗎!你<rt>ㄋㄧˇ</rt>也<rt>ㄧㄝˇ</rt>是<rt>ㄕˋ</rt>我<rt>ㄨㄛˇ</rt>也<rt>ㄧㄝˇ</rt>是<rt>ㄕˋ</rt>。</ruby>

<ruby> × <span lang>

  • 通常而言,這不是個明智的選擇,因爲相對於 <ruby lang> 而言更麻煩,占用更多的空間,也更難以除錯。
    但如果有需要……
<ruby><span lang="zh-Hant">文字</span><rt><span lang="zh-Hant">注音</span></rt><span lang="zh-Hant">更多的文字</span><rt><span lang="zh-Hant">更多的注音</span></rt></ruby>
  • 要説成功的示範,也有就是了……

本当ほんとうだ、その気になれば、痛みいたみなんて完全にしちゃえるんだ

<ruby><span lang="ja">本当</span><rt><span lang="ja">ほんとう</span></rt></ruby><span lang="ja">だ、その気になれば、</span><ruby><span lang="ja">痛み</span><rt><span lang="ja">いたみ</span></rt></ruby><span lang="ja">なんて完全に</span><ruby><span lang="ja">消</span><rt><span lang="ja">け</span></rt></ruby><span lang="ja">しちゃえるんだ</span>。
10 个赞

Mark!

1 个赞

学习到了新知识,感谢教学

学习了,顺便问一下圆神新剧场版什么时候来(

眼睛看花了要

原教旨主义HTML,现在不多见了

1 个赞

感谢,学习了

應該是 2024 年的冬天吧,不過已經過去很久了吧(小圓時間線為 204X)……
對,我應該還有其它的姿態,其它的使命……

那你的ssl怎么能过
这理论上上不来啊
我的安堂sama

2 个赞

Cloudflare 可以一下子簽 15 年的證書,從 2024 年到 204X 簽兩次就行了。

要计算当前系统时间 还有服务器时间是否一致(

2 个赞

悲報: 工作室被魔女打了,現在延期到 2025 冬

高级的,5年后我再学

From 软件开发 to 开发调优