本文详解如何在网页中用红色线条直观标注日语单词的声调轮廓（如 hll），涵盖基于现有库的快捷方案、纯 css 手动标注方法，以及可扩展的自动化思路，并提供完整可运行示例代码。
在日语语言学习与教学场景中，准确呈现声调（pitch accent）对发音训练至关重要。常见的可视化方式是用红色短线标出音节的高低（High/Low）及音高转折点（如「やかん{HLL}」中“や”为高、“か”起始下降、“ん”维持低）。但如何脱离 Stack Exchange 等特定平台，在任意 HTML 页面中复现这种效果？答案是：不依赖括号标记（如 {HLL}）也能实现，但需主动控制 DOM 结构与 CSS 样式；而若想完全免去手动标注，则需构建音调词典+预处理逻辑——目前尚无开箱即用的轻量级通用方案。
✅ 方案一：复用 JLSE Hacks（需严格匹配 DOM 结构）
日本语 Stack Exchange 使用的 japanese-l-u.js 库能自动解析 {HLL} 标记并渲染红线条，但它仅作用于预设 CSS 类名的元素（如 .js-post-body），并非通用 HTML 解析器。
以下代码可在兼容环境中正常工作：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.sstatic.net/Js/third-party/japanese-l-u.js?v=504677583821"></script>
<p class="js-post-body">やかん{HLL}</p>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若 <p> 缺少 class="js-post-body"，脚本将完全忽略该元素；
- 该库已停止维护，且依赖旧版 jQuery（1.12.4），不推荐用于新项目；
- {HLL} 标记仍需人工输入，无法自动推断。
✅ 方案二：纯 CSS 实现（推荐｜灵活可控）
更现代、可靠的方式是直接为每个假名添加语义化 class，再用 CSS 绘制线条。核心思想是：
- .h 表示高音节 → 顶部红线（border-top）
- .l 表示低音节 → 底部红线（border-bottom）
- 利用相邻兄弟选择器 .h + .l 或 .l + .h 自动绘制转折竖线（border-left）
<style>
[lang="ja"] { font-family: "Meiryo", "Hiragino Kaku Gothic Pro", sans-serif; }
.pitch span {
display: inline-block;
margin: 0 -0.15em;
padding: 0 0.1em;
vertical-align: middle;
}
.pitch .h { border-top: 1px solid #e53935; }
.pitch .l { border-bottom: 1px solid #e53935; }
.pitch .h + .l,
.pitch .l + .h { border-left: 1px solid #e53935; }
</style>
<p lang="ja">
「<span class="pitch">
<span class="h">や</span>
<span class="l">か</span>
<span class="l">ん</span>
</span>」は、やかんの正しいアクセントです。
</p>✅ 优势：
- 完全脱离外部 JS 库，零依赖；
- 支持响应式排版与字体定制；
- 可轻松扩展为 .h2（第二高音）、.downstep（下降点）等精细标注。
? 进阶思路：自动化注入 {HLL} 标记
若需批量处理文本，可编写前端预处理器：
- 构建 JSON 词典（键为假名/汉字混合词，值为音调模式，如 "やかん": "HLL"）；
- 正则匹配文本中的日语词汇；
- 对命中词条自动包裹 <span class="pitch">…</span> 并插入对应 class；
- 配合上述 CSS 即可渲染。
? 提示：实际应用中需处理同音异调词（如「はし」→ 桥[HLL] vs 箸[LHL]），建议优先标注带汉字的词汇以提升准确性。
总结
| 方案 | 是否需 {HLL} 标记 | 是否需 JS | 兼容性 | 推荐度 |
|---|---|---|---|---|
| JLSE Hacks | ✅ 必须 | ✅ 是 | 仅限 Stack Exchange 类结构 | ⚠️ 不推荐 |
| 纯 CSS 手动标注 | ❌ 否 | ❌ 否 | 全浏览器支持 | ✅ 强烈推荐 |
| 词典驱动自动化 | ✅（内部生成） | ✅ 是 | 需定制开发 | ? 适合教育平台 |
最终，掌握 CSS 驱动的声调标注，既是技术最佳实践，也是理解日语韵律本质的起点。从一个 <span class="h">や</span> 开始，你已拥有了构建专业日语学习工具的核心能力。
