Yomitan 项目中基于音调类型为词头着色的技术实现

在日语学习工具 Yomitan 中，用户提出了一项增强功能需求：根据单词的音调类型为词头添加不同颜色标记。这项功能能够帮助学习者更直观地识别单词的音调模式，提升学习效率。

技术背景

日语单词的音调（Pitch Accent）分为几种主要类型：

• 平板型（heiban）
• 头高型（atamadaka）
• 中高型（nakadaka）
• 尾高型（odaka）
• 起伏型（kifuku）

Yomitan 项目通过 HTML 元素的 data-pronunciation-categories 属性存储这些音调信息，为前端样式处理提供了基础。

CSS 实现方案

开发者可以通过自定义 CSS 来实现词头着色功能。核心思路是利用属性选择器匹配不同的音调类型，并设置相应的颜色变量：

.headword[data-pronunciation-categories^="heiban"]{
    --headword-text-color: #59b2ff;
    --headword-current-kanji-text-color: #59b2ff;
    --headword-current-furigana-text-color: #59b2ff;
    --headword-current-kanji-border-color: #59b2ff;
}

/* 其他音调类型的类似样式规则 */

关键技术点

1. 属性选择器：使用 [data-pronunciation-categories^="value"] 语法，其中 ^= 表示属性值以指定字符串开头，这能处理多个音调词典数据冲突的情况。

2. CSS 变量：通过设置一系列以 -- 开头的自定义属性，可以统一控制词头各部分的颜色，包括：

   • 文本颜色
   • 当前汉字颜色
   • 假名颜色
   • 汉字边框颜色

3. 颜色方案：建议采用 JP Mining Note 的标准配色方案，保持与其他学习工具的一致性：

   • 平板型：蓝色
   • 起伏型：紫色
   • 中高型：橙色
   • 头高型：红色
   • 尾高型：绿色

常见问题与解决方案

1. 样式不生效：

   • 确保已安装音调词典
   • 检查是否有其他 CSS 规则覆盖了这些样式
   • 确认浏览器开发者工具中能看到 data-pronunciation-categories 属性

2. 多词典冲突：

   • 使用 ^= 选择器而非精确匹配 =
   • 优先采用第一个匹配的音调类型

3. Anki 导出：

   • 在 Anki 中可使用类似 CSS 规则
   • 配合 AJT Japanese 等插件实现相同效果

最佳实践建议

1. 将上述 CSS 代码添加到 Yomitan 的设置中
2. 根据个人偏好调整颜色值
3. 保持与其他学习工具的颜色一致性有助于记忆
4. 对于 Anki 用户，可以考虑同步设置 Anki 卡片模板

这项技术实现虽然简单，但对日语学习者识别和记忆单词音调模式有很大帮助，是提升学习效率的有效辅助手段。