illegalCreed

中文

English

中文

English

Appearance

国际化与编辑标注 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • 局部 lang：在任意元素上标外文片段（<span lang="fr">），帮屏幕阅读器切发音、帮浏览器断词
  • <ruby> + <rt> + <rp>：给汉字 / 假名注音（拼音 / 振假名）；<rt> 放注音，<rp> 放降级括号
  • <bdi>：隔离方向未知的文字（用户名、用户生成内容），防阿拉伯语 / 希伯来语撑乱周围标点；默认 dir="auto"
  • <bdo dir="rtl">：强制覆盖一段文字的书写方向（罕用）
  • dir 取值：ltr（默认）/ rtl（从右到左）/ auto（按首个强方向字符推断）
  • <ins> / <del>：文档的增 / 删修订（track changes）；支持 cite（说明 URL）+ datetime（修改时间）
  • <del> ≠ <s>：<del> 是「编辑删除」，<s> 是「内容不再准确 / 相关」
  • 无障碍：<bdi> 是 2020 起 Baseline；<ruby> 是 2015 起 Baseline；<ins> / <del> 屏幕阅读器默认不播报，需要时用 CSS content 补

一、局部语言标注 lang ​

文档根 <html lang> 声明主语言，但正文里夹杂的外文片段应当就地再标 lang——这能让屏幕阅读器切到正确的语音引擎、让浏览器正确断词与选字体：

html
<p>这道菜的名字叫 <span lang="fr">crème brûlée</span>，意为「焦糖布丁」。</p>
<p>他常把 <span lang="ja">いただきます</span> 挂在嘴边。</p>

lang 的值是 BCP 47 语言标签（fr、ja、zh-Hant 等）。前面 强调与重要性 提到的 <i lang="…"> 就是「外文 + 异声」的常见组合。

二、注音：ruby · rt · rp ​

<ruby> 提供「注音 / 注释」——在基准文字的上方（或旁边）显示小号标注，最常见于东亚文字：给汉字标拼音、给日语汉字标振假名（ふりがな）：

  • <ruby>：容器，包住基准文字与注音；
  • <rt>（ruby text）：注音内容本身；
  • <rp>（ruby parenthesis）：降级括号——不支持 ruby 的老环境会把注音用括号显示，支持的环境则隐藏这对括号。
html
<!-- 给汉字逐字注拼音 -->
<ruby>
  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>

支持 ruby 的浏览器渲染为「拼音浮在汉字上方」；不支持的则降级为 汉(hàn) 字(zì)——这正是 <rp> 的价值。日语振假名同理：

html
<ruby>明日<rp>(</rp><rt>あした</rt><rp>)</rp></ruby>

<ruby> 自 2015 年起已是 Baseline 广泛可用，可放心使用。

三、双向文字：bdi · bdo · dir ​

阿拉伯语、希伯来语等是从右到左（RTL）书写的。当 RTL 文字与 LTR 文字、数字、标点混排时，浏览器的「双向算法」（bidi）有时会把中性字符（空格、连字符、数字）方向算错，导致排版错乱。

<bdi>：隔离方向未知的内容 ​

<bdi>（bidirectional isolate）告诉浏览器「把这段文字的方向与周围隔离开」——两个方向都隔离：里面的方向不影响外面，外面的方向也不影响里面。它专治「方向未知的用户生成内容」：

html
<!-- 不用 bdi：阿拉伯语名字会把后面的「- 1st」方向带乱 -->
<li>اَلأَعْشَى - 1st place</li>   <!-- 渲染错乱 -->

<!-- 用 bdi：名字被隔离，「- 1st place」方向正常 -->
<li><bdi>اَلأَعْشَى</bdi> - 1st place</li>   <!-- 正确 -->

典型场景：排行榜、评论区、用户资料里嵌入「来自数据库、方向未知」的用户名。<bdi> 的 dir 默认是 auto（且不从父元素继承），会自动按内容首个强方向字符判断方向——这正是它能「自适应任意语言用户名」的原因。

<bdi> 自 2020 年起为 Baseline，是处理用户生成内容的首选（比 CSS unicode-bidi: isolate 更语义化，且 CSS 可能被浏览器忽略）。

<bdo>：强制覆盖方向 ​

<bdo>（bidirectional override）则强行把一段文字按指定方向渲染，需配 dir。它很少用到，多见于教学演示：

html
<p>这段文字 <bdo dir="rtl">从右向左排</bdo> 演示。</p>

dir 属性 ​

取值含义
ltr从左到右（默认）
rtl从右到左（阿拉伯语、希伯来语）
auto由内容首个强方向字符自动推断（适合用户生成内容）

dir 可放在任意元素上；整页 RTL 可在 <html dir="rtl"> 上声明。

<bdi> vs <bdo>：<bdi> 是「隔离，让浏览器自己算对方向」，<bdo> 是「覆盖，强行规定方向」。处理「方向未知的用户内容」用 <bdi>；明确要反转某段方向（罕见）才用 <bdo>。

四、编辑标注：ins · del ​

<ins> 表示「新增到文档」的内容，<del> 表示「从文档删除」的内容——用来呈现「修订 / 修改痕迹（track changes）」或代码 diff。默认样式：<ins> 下划线、<del> 删除线：

html
<p>会议时间改为
  <del>周三下午</del>
  <ins>周四上午</ins>。</p>

两者都支持两个专有属性：

  • cite：一个 URL，指向「解释这次修改原因」的资源（会议纪要、工单链接）；
  • datetime：这次修改发生的日期 / 时间（格式同 <time>）。
html
<del cite="https://example.com/ticket/42" datetime="2026-06-20">
  旧条款
</del>
<ins cite="https://example.com/ticket/42" datetime="2026-06-24">
  新条款
</ins>

<del> ≠ <s> ​

这是高频混淆点：

  • <del>：表示「编辑删除」——这是一次文档修订动作；
  • <s>：表示内容「不再准确 / 不再相关」——不是编辑动作，比如过期的促销价、已不成立的事实（见 行内语义页）。

「我在修订稿里删了这句」用 <del>；「原价已划掉」用 <s>。

ins / del 的无障碍盲区

屏幕阅读器默认不会播报 <ins> / <del> 的存在——视觉上的删除线 / 下划线对听觉用户是「隐形」的。若「增删信息」对理解至关重要，需用 CSS ::before / ::after 的 content 补上提示文字（如「[删除开始]…[删除结束]」），并用视觉隐藏（clip）技巧只对屏幕阅读器可见。注意：部分用户会主动关闭这类额外播报，故仅在「不播报就会误解」时才加。

小结 ​

国际化处理的核心是「让标签携带语言与方向信息」：局部 lang 标外文、<ruby> 注音、<bdi> 隔离方向未知的用户内容、<bdo> / dir 控制方向；而 <ins> / <del> 专门记录文档的增删修订（别和表「不再相关」的 <s> 混淆）。下一页收尾——换行与空白的底层规则：wbr/br 与空白折叠。