← 全部文档

文本片段语言

通过把单词或段落包装在 <span lang="…"> 中,标记与文档其余部分不同的语言。屏幕阅读器会根据 lang 切换到正确的语音和发音,因此英文页面中的一段法语引文会用法语朗读,而不会被读错。WCAG 2.2 成功准则 3.1.2(部分内容的语言,AA 级)要求使用这种标记。

编辑器中选中了 bonjour tout le monde 几个单词,并打开了 Language 菜单,列出 Remove language,然后是 Arabic ar、Chinese (Simplified) zh-Hans、Chinese (Traditional) zh-Hant、Czech cs、Dutch nl、English en、获得键盘焦点的 French fr、German de 和 Greek el
在选中的短语上打开的 Language 菜单。方向键已把焦点移到 French。
编辑器中的两个句子;短语 bonjour tout le monde 和希伯来语单词 shalom 下方带有点状下划线
编辑时,已标记的短语会带有点状下划线。下划线不属于保存的 HTML。

启用

该功能由 textpartlanguage.js 插件提供(也包含在 plugins/all_plugins.js 中)。工具栏项为 textpartlanguage("Language"),是一个菜单按钮。它位于 full 和 office 工具栏中;在您自己的工具栏中,请把它添加到字符串中:

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/textpartlanguage.js"></script>

<div id="editor"><p>The French say bonjour tout le monde when they greet a room.</p></div>
<script>
var editor = new RichTextEditor("#editor", { toolbar_default: "{bold,italic}|{textpartlanguage}" });
</script>

选项

选项默认值作用
textPartLanguages24 种语言:ar、zh-Hans、zh-Hant、cs、nl、en、fr、de、el、he、hi、it、ja、ko、fa、pl、pt、ru、es、sv、tr、uk、ur、vi菜单。每个条目为 { code, label, dir };对于从右到左的语言,请设置 dir: "rtl"(默认值已为阿拉伯语、希伯来语、波斯语和乌尔都语这样设置)。
textPartLanguageHighlighttrue在编辑区域中为已标记的短语显示点状下划线。仅在编辑器中显示;false 会将其关闭。
text_textpartlanguage、text_removelanguage"Language"、"Remove language"按钮标签和菜单的第一行。

一个更短的列表,带有区域代码:

textPartLanguages: [
  { code: "en", label: "English" },
  { code: "fr-CA", label: "French (Canada)" },
  { code: "ar", label: "Arabic", dir: "rtl" }
]

加载了语言包时,内置条目会以该语言包的语言命名(通过 Intl.DisplayNames);您自己设置的 label 会按原样显示。

使用方法

  • 选中文本,打开 Language 并选择一种语言。选择选区已有的语言会再次移除它。
  • 光标位于已标记的短语中(没有选区)时,选择另一种语言会更改该短语,"Remove language" 会解除包装。光标位于任何已标记短语之外时不会有任何效果:插件永远不会创建空的 span。
  • 跨越多个段落、列表项或表格单元格的选区会逐块标记,每块一个 span,因此各块不会被拆分。
  • 键盘:菜单打开时,焦点会移到当前语言,或者 "Remove language"。ArrowUp 和 ArrowDown 移动并循环,Home 和 End 跳到两端,Enter 或空格选择,Escape 关闭菜单并把焦点放回编辑区域。每一行都带有 role="menuitemradio" 和 aria-checked。
  • 撤销会一步移除通过菜单或 API 设置的语言。

API,供您自己的界面使用:

方法作用
editor.setTextLanguage("fr")像菜单一样标记选区。
editor.removeTextLanguage()移除光标处或选区中的语言。
editor.getTextLanguage()光标处的语言,例如 "fr",或者 null。
editor.getMarkedLanguages()文档中使用的每种语言,例如 [{"code":"fr","label":"French"},{"code":"he","label":"Hebrew"}]。
editor.listTextLanguages()菜单列表的副本。

注意事项

保存的 HTML 是一个不带类名的普通 span,因此不依赖任何样式表。从右到左的语言还会获得 dir="rtl",因为仅有 lang 并不会改变方向。上面所示运行的结果:

<p>The French say <span lang="fr">bonjour tout le monde</span> when they greet a room.</p>
<p>The Hebrew word shalom is written <span lang="he" dir="rtl">שלום</span>.</p>
  • 净化程序必须保留 span 上的 lang 和 dir。如果您的服务器去除了它们,文档就会悄无声息地丢失其语言标记。
  • 整个文档的语言是一个单独的设置(显示内容的页面的 lang)。这个插件只标记与之不同的部分。
  • 在代码中请使用 setTextLanguage(),而不是 execCommand("textpartlanguage", "de"):在 2.6.12 中,值不会传到插件,因此该调用会移除语言,而不是设置语言。
  • 新选区内已标记的 span 会先被解除包装,因此一个短语永远不会出现两层嵌套的语言。
  • 在建议(修订跟踪)模式下无法更改语言:目前还无法跟踪这种更改,因此插件会以一条消息拒绝它。

相关内容:无障碍声明、无障碍检查器、从右到左界面、无障碍与语言演示。