Yomitan 扩展中实现动态切换日语假名注音显示的技术方案

背景介绍

Yomitan 是一款功能强大的日语学习工具，它能够为日语文本提供假名注音（furigana）支持。在实际使用过程中，部分高级学习者可能希望暂时隐藏这些注音，以便更好地测试自己的阅读能力。本文将详细介绍如何在 Yomitan 中通过 CSS 实现动态显示/隐藏假名注音的功能。

技术实现原理

Yomitan 的假名注音功能是通过 HTML 的 <ruby> 标签实现的。在 HTML 结构中，每个需要注音的汉字或词汇都会被包裹在 <ruby> 标签中，其中汉字本身是主文本（<rb>），而注音则是位于上方的假名（<rt>）。

通过分析 Yomitan 的 DOM 结构，我们发现：

• 主词汇的注音使用 .gloss-sc-rt 类
• 例句中的注音也使用相同的类名

CSS 解决方案

要实现动态显示/隐藏假名注音，我们可以利用 CSS 的 :hover 伪类和 visibility 属性。以下是完整的 CSS 代码：

/* 默认隐藏所有假名注音 */
.gloss-sc-rt {
    visibility: hidden;
}

/* 当鼠标悬停在注音词汇上时显示该词汇的注音 */
.gloss-sc-ruby:hover .gloss-sc-rt {
    visibility: visible;
}

/* 确保相邻词汇的注音也能同时显示 */
.gloss-sc-ruby:hover ~ .gloss-sc-ruby .gloss-sc-rt {
    visibility: visible;
}

实现效果说明

1. 初始状态：所有假名注音都会被隐藏
2. 悬停状态：当鼠标悬停在某个词汇上时：
   • 该词汇的假名注音会显示
   • 同一句子中相邻词汇的假名注音也会同时显示
3. 离开状态：鼠标移开后，所有假名注音恢复隐藏状态

在 Yomitan 中的配置方法

1. 打开 Yomitan 设置页面
2. 找到"Popup CSS"设置项
3. 将上述 CSS 代码粘贴到输入框中
4. 保存设置

技术要点解析

1. visibility vs display：使用 visibility: hidden 而非 display: none 是为了保持页面布局稳定，避免元素隐藏/显示时造成的页面跳动。

2. 相邻选择器：~ 选择器用于匹配同一父元素下的后续兄弟元素，确保当鼠标悬停在句子开头的词汇上时，整个句子的注音都能显示。

3. 特异性控制：通过类选择器确保样式只作用于 Yomitan 的注音元素，不会影响页面其他部分的 <ruby> 标签。

扩展应用

这一技术方案不仅适用于 Yomitan 的例句部分，同样可以应用于主词汇的假名注音。通过适当调整 CSS 选择器，可以实现更精细的控制，例如：

• 单独控制主词汇和例句的注音显示
• 添加过渡动画效果
• 根据用户偏好持久化显示/隐藏状态

总结

通过简单的 CSS 技巧，我们实现了 Yomitan 中假名注音的动态显示功能。这种非侵入式的解决方案既保留了原有功能，又增加了使用灵活性，特别适合不同学习阶段的日语学习者。这种基于 CSS 的界面定制方法也展示了现代 Web 技术的强大可扩展性。