HTML中ruby和黑幕的初步应用

名词解释

不了解Ruby为何物的请自行上网搜索；这里给一个维基百科链接。简而言之是在正常字符上方显示一些小型的字符，常用在东亚文字中，例如中文中对汉字进行注音以及日文中对汉字注假名。当然，经过广大人民群众的发掘，它已经有了进阶的用法。

<ruby>标签是HTML5新引入的标签。

黑幕是广大人民群众喜（一）闻（点）乐（也）见（不）的一种表现形式：文字由黑框覆盖，反白可以显示出文字内容，和删除线有异曲同工之妙。常见于娱乐用的网站，例如萌娘百科这样的站点。

---

使用示例

摘自萌娘百科：舰队Collection:赤城条目：

一航战，赤城（吃撑），出击（睡觉）！

编写指导

首先给出上述示例的源代码：

一航战，赤城（吃撑）
，出击（睡觉）！

这是一个“黑幕”与ruby的综合应用。其中，title属性是不必要的，主要在于<ruby>标签和css的使用。

CSS 中的!important用来强调这个属性，保证它更可能生效（产生黑幕）。

<ruby> 标签的 fallback 机制

<ruby> 标签可以由以下子标签组成：

1. <rt>
2. <rp>

原理：

• 所有在 ruby 标签内但是不在任何子标签内的文字会照常显示；
• 所有在 rt 子标签内的内容将被作为 ruby 字符提升至正常文字正上方；
• 所有 rp 子标签内的内容，对于支持 ruby 的浏览器将不显示。

需要注意的是，对于不支持 ruby 的浏览器，因为它不认识这些标签，所有内容将会照正常文字进行显示。

这时再回头看示例代码，它考虑了 fallback 的问题。如果浏览器不支持 ruby 的话，所有 ruby 文字将会紧跟正常文字，被包含在括号内。这是一个不错的实践。

我想代码应该十分清晰，我就不多解释了 🙂