HTML 使用 ruby 给汉字加拼音

  • 使用 ruby 给汉字加拼音
    • 兼容性

使用 ruby 给汉字加拼音

大家有没有遇到过要给汉字头顶上加拼音的需求? 如果有的话, 你是怎么解决的呢? 如果费尽心思, 那么你可能走了很多弯路, 因为 HTML 原生就有这样的标签来帮我们实现类似的需求.

ruby 本身是「红宝石」的意思, 与题无关

元素是可以渲染在基本文字上、下或旁边的小注释, 通常用来显示东亚文字(CJK, Chinese Japanese and Korean)的发音.

先一睹为快效果

<body>
  真理使人
  <ruby><rp>(rp><rt>rt><rp>)rp> ruby>
  <ruby><rp>(rp><rt>yóurt><rp>)rp> ruby>
  .
body>

HTML 使用 ruby 给汉字加拼音_第1张图片

哇, 效果是不是很赞! 没错, 使用起来就是折磨简单, 不过除了 外, 我们还用到了很多其他元素, 下面就一一来介绍

这里多说一句, 即便是不同的书写方向, 仍然可以很好的适应. 比如我们将书写顺序改为垂直书写.

HTML 使用 ruby 给汉字加拼音_第2张图片

The Ruby Fallback Parenthesis element, Parenthesis 是圆括号的意思

元素用来为不支持 显示的浏览器提供兜底的括号.

每一组 应该分别将开始和结束圆括号括起来, 这对圆括号再将 元素括起来, 而最终拼音是在 元素中.

<rp>(rp><rt>rt><rp>)rp>

The Ruby Text element

中提供东亚文字的发音等信息, 必须包含在 中.

兼容性

桌面浏览器没得说, 如果需要适配手机端, 还需要多多考虑

HTML 使用 ruby 给汉字加拼音_第3张图片

谢谢你看到这里

你可能感兴趣的:(HTML,ruby,前端,javascript)