HTML 实现拼音注音及美化2024/01/01
这个需求放在五六年前可能实现起来还会麻烦一些，但是现在，主流浏览器都已经支持（并且兼容性良好）用于东亚文字注音的 HTML 标签 。
用法这一标签的用法十分简单，看如下代码：
汉 字
将需要注音的汉字直接放在 下，将拼音写在
在支持 标签的浏览器下，上面这段 HTML 代码看起来会像这样：
在不支持 标签的浏览器下，上面这段 HTML 代码看起来会像这样：
拼音位置偏移你可能会发现，上面的拼音渲染中，拼音的位置有些偏移，这是由于 HTML 空白字符的影响。让我们删除 HTML 代码中的空格和换行，再看看效果：
汉字
现在，拼音便能完美的对应上相应字符的位置了。
美化我们将上面的 HTML 代码进行修改，添加一些元素（为了让代码可读性更强，添加了换行和空格，实际使用中应删去）：
ming tian
明天
在添加 CSS 代码：
.notation-container span,
.text-container span {
/* 避免文字换行影响动画效果 */
white-space: nowrap;
min-width: 0;
}
.notation-container {
/* 使用 grid，实现宽度从零到自动的变化 */
display: grid;
grid-template-columns: 0fr;
opacity: 0;
user-select: none; /* 不让该元素中的文字被选择 */
transition: .3s .15s;
}
.notation-container span {
min-width: 0;
}
.text-container {
/* 使用 grid，实现宽度从零到自动的变化 */
display: grid;
grid-template-columns: 1fr;
opacity: 1;
transition: .3s;
}
.text-container span {
min-width: 0;
}
ruby rt {
position: relative;
top: 0;
transition: .3s;
}
ruby:hover rt {
/* 这两行用于使 `rt` 元素上下移动，由于浏览器表现不同，使用不同代码实现。 */
top: 2em; /* 用于 Firefox */
transform: translateY(2em); /* 用于 Chrome/Edge */
opacity: 0;
}
ruby:hover .text-container {
/* 隐藏被注音的文字 */
grid-template-columns: 0fr;
opacity: 0;
}
ruby:hover .notation-container {
/* 展现拼音 */
grid-template-columns: 1fr;
opacity: 1;
}
效果如下👇，你可以放上鼠标试一试
点此查看原文
