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 文字将会紧跟正常文字,被包含在括号内。这是一个不错的实践。

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

hosiet

一个学生。May be neither too young nor simple, but sometimes can be naive.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据