Idioma de trechos de texto

Marca o idioma de uma palavra ou de um trecho que é diferente do resto do documento, envolvendo-o em <span lang="…">. Os leitores de tela usam o lang para trocar para a voz e a pronúncia certas; assim, uma citação em francês em uma página em inglês é lida em francês, em vez de ser pronunciada errado. O critério de sucesso 3.1.2 das WCAG 2.2 (Idioma das partes, nível AA) exige essa marcação.

Ative o recurso

O recurso é o plugin textpartlanguage.js (também incluído em plugins/all_plugins.js). O item da barra de ferramentas é textpartlanguage ("Language"), um botão de menu. Ele está nas barras de ferramentas full e office; na sua própria barra de ferramentas, adicione-o à string:

<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>

Opções

Opção	Padrão	O que faz
textPartLanguages	24 idiomas: 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	O menu. Cada entrada é { code, label, dir }; defina dir: "rtl" para idiomas da direita para a esquerda (os padrões fazem isso para árabe, hebraico, persa e urdu).
textPartLanguageHighlight	true	Sublinhado pontilhado nas frases marcadas dentro da área de edição. Somente no editor; false o desativa.
text_textpartlanguage, text_removelanguage	"Language", "Remove language"	Rótulo do botão e a primeira linha do menu.

Uma lista mais curta, com um código regional:

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

Com um pacote de idioma carregado, as entradas incluídas são nomeadas no idioma desse pacote (por meio de Intl.DisplayNames); um label definido por você é exibido como foi escrito.

Como usar

• Selecione o texto, abra Language e escolha um idioma. Escolher o idioma que a seleção já tem o remove.
• Com o cursor dentro de uma frase marcada (sem seleção), escolher outro idioma altera essa frase, e "Remove language" desfaz a marcação. Um cursor fora de qualquer frase marcada não faz nada: o plugin nunca cria um span vazio.
• Uma seleção que abrange vários parágrafos, itens de lista ou células de tabela é marcada bloco a bloco, com um span em cada um; assim, os blocos não são divididos.
• Teclado: quando o menu abre, o foco vai para o idioma atual, ou para "Remove language". ArrowUp e ArrowDown movem o foco e voltam ao início ao chegar no fim, Home e End pulam para as extremidades, Enter ou Espaço escolhe, e Escape fecha o menu e devolve o foco à área de edição. Cada linha tem role="menuitemradio" e aria-checked.
• Desfazer remove em uma única etapa um idioma definido pelo menu ou pela API.

API, para a sua própria interface:

Método	O que faz
editor.setTextLanguage("fr")	Marca a seleção, como o menu faz.
editor.removeTextLanguage()	Remove o idioma na posição do cursor ou na seleção.
editor.getTextLanguage()	O idioma na posição do cursor, por exemplo "fr", ou null.
editor.getMarkedLanguages()	Todos os idiomas usados no documento, por exemplo [{"code":"fr","label":"French"},{"code":"he","label":"Hebrew"}].
editor.listTextLanguages()	Uma cópia da lista do menu.

O que você precisa saber

O HTML salvo é um span simples, sem classe; por isso, não depende de nenhuma folha de estilo. Os idiomas da direita para a esquerda também recebem dir="rtl", porque o lang sozinho não muda a direção. A partir do teste mostrado acima:

<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>

• Os sanitizadores precisam manter lang e dir em span. Se o seu servidor os remover, o documento perde a marcação de idioma sem nenhum aviso.
• O idioma do documento inteiro é uma configuração separada (o lang da página que exibe o conteúdo). Este plugin marca apenas as partes que diferem dele.
• No código, use setTextLanguage(), e não execCommand("textpartlanguage", "de"): na 2.6.12, o valor não chega ao plugin, então essa chamada remove o idioma em vez de defini-lo.
• Os spans marcados dentro de uma nova seleção são desfeitos primeiro; assim, uma frase nunca acaba com dois idiomas aninhados.
• No modo de sugestão (controle de alterações), o idioma não pode ser alterado: a alteração ainda não pode ser controlada; por isso, o plugin a recusa com uma mensagem.

Relacionados: Declaração de acessibilidade, Verificador de acessibilidade, Interface da direita para a esquerda, demonstração de acessibilidade e idiomas.