HTML 使用 ruby 给汉字加拼音

  • [使用 ruby 给汉字加拼音](#使用 ruby 给汉字加拼音)
    *
    *
    *

使用 ruby 给汉字加拼音

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

<ruby>

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

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

先一睹为快效果

html 复制代码
<body>
  真理使人
  <ruby> 自 <rp>(</rp><rt>zì</rt><rp>)</rp> </ruby>
  <ruby> 由 <rp>(</rp><rt>yóu</rt><rp>)</rp> </ruby>
  .
</body>

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

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

<rp>

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

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

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

html 复制代码
<rp>(</rp><rt>zì</rt><rp>)</rp>

<rt>

The Ruby Text element

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

兼容性

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

谢谢你看到这里😊

相关推荐
郝学胜-神的一滴4 分钟前
Linux系统函数link、unlink与dentry的关系及使用注意事项
linux·运维·服务器·开发语言·前端·c++
昔人'34 分钟前
css`text-wrap:pretty`
前端·css
勇敢di牛牛39 分钟前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
詩句☾⋆᭄南笙1 小时前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒1 小时前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌1 小时前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip1 小时前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙1 小时前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
Rhys..1 小时前
JS - npm init
开发语言·javascript·npm
夏天想1 小时前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm