テキストの一部分の言語

文書のほかの部分と異なる言語の単語や文章を、<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 にフォーカスを移しています。

エディター内の 2 つの文。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>

オプション

オプション	既定値	動作
`textPartLanguages`	24 言語：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"` を設定します。既定では、アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語に設定されています。
`textPartLanguageHighlight`	`true`	編集領域内の言語指定した語句に点線の下線を付けます。エディター内のみで、`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 は作成しません。
複数の段落、リスト項目、テーブルセルをまたぐ選択範囲には、各ブロック内に 1 つずつ span を付け、ブロックを分割しません。
キーボード：メニューを開くと、現在の言語または「Remove language」にフォーカスが移ります。ArrowUp と ArrowDown で末尾と先頭を循環し、Home と End で両端に移動し、Enter または Space で選びます。Escape で閉じ、編集領域にフォーカスを戻します。各行に role="menuitemradio" と aria-checked を設定します。
メニューまたは API で設定した言語は、元に戻す操作 1 回で解除できます。

独自 UI 向けの API です。

メソッド	動作
`editor.setTextLanguage("fr")`	メニューと同じように選択範囲の言語を指定します。
`editor.removeTextLanguage()`	カーソル位置または選択範囲の言語指定を解除します。
`editor.getTextLanguage()`	カーソル位置の言語（たとえば `"fr"`）、または `null` を返します。
`editor.getMarkedLanguages()`	文書内で使われているすべての言語を返します。たとえば `[{"code":"fr","label":"French"},{"code":"he","label":"Hebrew"}]` です。
`editor.listTextLanguages()`	メニュー一覧のコピーを返します。

注意点

保存する HTML はクラスのない単純な span で、スタイルシートに依存しません。lang だけでは方向は変わらないため、右から左の言語には dir="rtl" も付けます。上記の実行結果は次のとおりです。

<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 で別途設定します。このプラグインは、それと異なる部分だけを指定します。
コードからは execCommand("textpartlanguage", "de") ではなく setTextLanguage() を使ってください。2.6.12 ではコマンドの値がプラグインに届かず、その呼び出しは言語を設定せずに解除してしまいます。
新しい選択範囲内の既存の言語指定 span は先に外すため、1 つの語句に 2 つの言語が入れ子になることはありません。
提案（変更履歴）モードでは言語を変更できません。まだ変更を追跡できないため、メッセージを表示して拒否します。