本文详解如何在网页中手动或自动化实现日语声调的可视化标注，重点介绍基于 css 的纯前端方案——通过为每个假名添加 `.h`/`.l` 类并利用相邻选择器 `+` 自动绘制转折红线条，无需依赖 stack exchange 专用插件。
在日语语言学习与教学场景中，准确呈现单词或语句的音高轮廓（pitch accent）至关重要。常见的「红线条式」标注（如「やかん{HLL}」中顶部/底部/左侧的红色短线）直观反映音高变化趋势：高音（H）用上边框、低音（L）用下边框、音高转折点（H→L 或 L→H）则用左侧边框连接相邻假名。虽然 Stack Exchange 使用的 japanese-l-u.js 插件可自动解析 {HLL} 标记，但它强耦合于特定 HTML 结构与类名（如 .js-post-body），且仅支持显式标记输入，无法脱离平台复用。
因此，更通用、可控且符合现代 Web 实践的方式是：纯 CSS 驱动的手动标注。其核心逻辑如下：
- 每个假名包裹在 中，并根据其在音高序列中的角色赋予 .h（高音）、.l（低音）等语义类；
- 利用 CSS 相邻兄弟选择器（.h + .l, .l + .h）精准定位音高转折位置，统一添加左侧红色边框；
- 通过 margin 和 padding 微调字符间距，确保线条视觉连贯、不重叠。
以下是完整可运行示例：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日语声调红线条标注</title>
<style>
[lang="ja"] {
font-family: "Meiryo", "Hiragino Kaku Gothic Pro", sans-serif;
line-height: 1.6;
}
[lang="ja"] .pitch span {
display: inline-block;
margin: 0 -0.15em; /* 微调水平间距，使线条自然衔接 */
padding: 0 0.05em;
vertical-align: middle;
}
.pitch .h {
border-top: 2px solid #e53935; /* 鲜红色高音线 */
}
.pitch .l {
border-bottom: 2px solid #e53935; /* 鲜红色低音线 */
}
.pitch .h + .l,
.pitch .l + .h {
border-left: 2px solid #e53935; /* 转折处左侧竖线 */
margin-left: -0.05em; /* 补偿因边框导致的偏移 */
}
</style>
</head>
<body>
<p lang="ja">
「<span class="pitch">
<span class="h">や</span>
<span class="l">か</span>
<span class="l">ん</span>
</span>」は、やかんの「や」が高音、その後下降——典型的「頭高型」です。
</p>
<p lang="ja">
古典和歌の一節：<br>
色は匂へど散り<span class="pitch">
<span class="l">ぬ</span>
<span class="l">る</span>
<span class="h">を</span>
</span>我が世誰ぞ常ならん……
</p>
</body>
</html>✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- ✅ 完全脱离第三方插件，零依赖，兼容所有现代浏览器；
- ✅ 语义清晰：.h/.l 直观对应音高层级，便于维护与自动化生成；
- ✅ 响应式友好：CSS 规则天然适配不同字号与布局；
- ✅ 可扩展性强：可轻松叠加 hover 效果、动画过渡或语音播放按钮。
⚠️ 注意事项：
- 声调标注需以标准东京方言为依据，同一词形在不同方言中可能有差异（如「はし」：橋＝H-L，箸＝L-H）；
- 多音节复合词需按实际语流切分，不可简单拼接各单词独立声调（如「日本語学校」≠「日本語」+「学校」的声调叠加）；
- 若需大规模自动化，建议构建带声调信息的词典 API（如 JMDict + OJAD 数据），再通过 JavaScript 动态注入 .h/.l 类——但务必处理歧义（如「はな」可读作「花」H-L 或「鼻」L-H）。
总之，红线条式声调标注并非 Stack Exchange 的专属功能，而是一种可通过精巧 CSS 实现的专业排版技术。掌握它，意味着你能将严谨的语言学信息，以轻量、可靠、美观的方式嵌入任意网页项目中。
