mdict 中文文档 下载 App

用 HTML + CSS 做出精美 mdx 词典 — 排版技巧与注意事项

什么时候需要 HTML 格式

mtxt 格式能满足"能用"的需求，但要做精品词典——像牛津高阶重生版那样有双栏排版、词性标签、不同颜色区分义项、例句块、固定侧栏导航——mtxt 的排版标记远远不够。HTML + CSS 格式就是为这种场景设计的。

FreeMdict Forum 上标注"精装版"、"重生版"、"美化版"的词典，几乎全部使用 HTML + CSS 制作。

HTML 词条的基本结构

每条词条在 HTML 词典里就是一小段完整的 HTML：

<meta charset="utf-8">
<title>apple</title>
<body>
  <div class="headword">apple</div>
  <div class="phonetic">/ˈæpl/</div>
  <span class="pos">n.</span>
  <ul class="senses">
    <li>[C] 苹果（水果）</li>
    <li>[U] 苹果汁</li>
    <li>[C] 苹果公司</li>
  </ul>
  <div class="examples">
    <p>She <b>bought</b> some <b>apples</b> yesterday.</p>
  </div>
</body>

MDXBuilder 编译时会从 <title> 标签提取词条标题（作为搜索索引），把 <body> 里的内容作为词条正文。多个词条可以写在同一个 HTML 文件里，用 <hr> 或固定标记分隔，MDXBuilder 会自动切分。

CSS 样式表

CSS 文件是 HTML 词典的灵魂——决定了所有词条的视觉风格。典型的 CSS 文件包含：

CSS 文件的文件名必须跟 mdx 主文件名相同——比如 牛津高阶.mdx 需要配 牛津高阶.css，放在同一目录下，MDict 会自动加载并应用到所有词条上。

资源引用方式

HTML 格式里引用资源（图片、音频）用标准的 <img> 和 <audio> 标签：

<img src="resource:///apple.png" class="word-image">
<audio src="resource:///apple_pron.mp3" controls></audio>

注意资源地址前缀是 resource:///（三个斜杠），这是 MDict 约定的协议头——告诉 MDXBuilder 把引用的文件打包进 mdd。如果写成普通的相对路径（src="apple.png"），MDXBuilder 不会识别，编译出来的词典在 MDict 里图片/音频会加载失败。

编译流程

HTML 格式词典的编译流程：

准备 .html 词条源文件 → 准备 .css 样式文件 → 准备资源文件（图片/音频）
→ 用 MDXBuilder 4.0 编译 → 输出 .mdx + .mdd + .css

HTML 源文件可以一个词条一个文件，也可以把多个词条合并在同一个 HTML 里用分隔符切分。MDXBuilder 的 GUI 会自动识别目录结构，也可以在命令行用 --html 标志指定。

音标字体的坑

词典音标（IPA 国际音标）对字体有特殊要求——必须使用支持 IPA 扩展字符的字体，如 Doulos SIL、Charis SIL、DejaVu Sans、Noto Sans IPA 等。如果用了普通字体（如微软雅黑），音标里的特殊符号（ə、ŋ、ʃ 等）会显示成方块或问号。

推荐做法：把 IPA 字体文件（.ttf 或 .otf）也打包进 mdd，在 CSS 里用 @font-face 声明字体路径（同样用 resource:/// 前缀），这样词典在任何设备上打开都能正确显示音标，不需要用户单独安装字体。

注意事项