HTML 使用 ruby 给汉字加拼音

本是古典何须时尚 2024-05-24 03:48 56阅读 0赞

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

## 使用 ruby 给汉字加拼音 ##

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

### `<ruby>` ###

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

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

先一睹为快效果

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

![在这里插入图片描述][fff898e31fef483bb73836a155496e75.png_pic_center]

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

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

![在这里插入图片描述][39216f20c335404e9b2e57f01cb3db30.png_pic_center]

### `<rp>` ###

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

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

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

<rp>(</rp><rt>zì</rt><rp>)</rp>

### `<rt>` ###

> The Ruby Text element

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

### 兼容性 ###

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

![在这里插入图片描述][cb95a04ea65c480ea4108bf65e15cc80.png_pic_center]

谢谢你看到这里?

[fff898e31fef483bb73836a155496e75.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/87837d6f5f534487996c5841be225f73.png
[39216f20c335404e9b2e57f01cb3db30.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/af5f7f55e41848f1809948fe16ad02bd.png
[cb95a04ea65c480ea4108bf65e15cc80.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/ef20d013d4e24b0cafd4ae53d2d0e291.png

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML 使用 ruby 给汉字加拼音

TOC/TOC。

本是古典何须时尚/ 2024年05月24日 03:48/ 0 赞/ 57 阅读

相关汉字转拼音

import android.text.TextUtils; import java.text.Collator; import java.u

客官°小女子只卖身不卖艺/ 2023年10月05日 14:13/ 0 赞/ 105 阅读

相关中文汉字转拼音

1.引入依赖 <dependency> <groupId>com.belerweb</groupId>

梦里梦外;/ 2022年12月19日 08:51/ 0 赞/ 261 阅读

相关拼音转汉字、SpEL表达式、汉字转拼音

一、SpEL语法案例 import org.springframework.expression.Expression; import org.springf

分手后的思念是犯贱/ 2022年11月28日 13:33/ 0 赞/ 335 阅读

相关 C#_获取汉字拼音

我们在做系统是经常遇到需要通过汉字提取汉字拼音的情况，我在网上搜集了几种获取方案包含了收首字母和完整拼音的获取，供大家参考！在此向原作者表示感谢！如果权利侵

不念不忘少年蓝@/ 2022年07月13日 12:07/ 0 赞/ 398 阅读

相关汉字转成拼音

NSString stringText = @"iOS开发交流群：119783156"; if ([stringText length])

Myth丶恋晨/ 2022年07月12日 09:36/ 0 赞/ 313 阅读

相关汉字转拼音

汉字转拼音首先需要js工具： jquery.min.js jQuery.Hz2Py-min.js 这种转换方法只适用于input输入框，具体应用为： <input id

ゝ一世哀愁。/ 2022年05月14日 05:04/ 0 赞/ 426 阅读

相关 SQL生成汉字拼音

create function [dbo].[fGetPy](@words nvarchar(2000)) returns varchar(8000)

墨蓝/ 2022年04月22日 09:36/ 0 赞/ 306 阅读

相关 PHP汉字转拼音

<?php / 汉字转拼音 Created by PhpStorm. User: 刘抱 Date: 2018/1

冷不防/ 2022年04月15日 06:38/ 0 赞/ 4914 阅读

相关汉字转拼音

本人微信 zf363133213 欢迎各位添加好友，共同探讨问题 jar包：pinyin4j //获取汉字串拼音首字母，英文字符不变 public static Stri

待我称王封你为后i/ 2022年04月12日 11:27/ 0 赞/ 449 阅读