Idioma de fragmentos de texto

Marca el idioma de una palabra o un pasaje que difiere del resto del documento envolviéndolo en <span lang="…">. Los lectores de pantalla usan lang para cambiar a la voz y pronunciación adecuadas, de modo que una cita en francés dentro de una página en inglés se lea en francés y no se pronuncie mal. El criterio de conformidad 3.1.2 de WCAG 2.2 (Idioma de las partes, nivel AA) exige este marcado.

El editor con las palabras bonjour tout le monde seleccionadas y el menú Language abierto, que enumera Remove language, seguido de Arabic ar, Chinese (Simplified) zh-Hans, Chinese (Traditional) zh-Hant, Czech cs, Dutch nl, English en, French fr con el foco del teclado, German de y Greek el — El menú Language abierto sobre una frase seleccionada. Las flechas han movido el foco a French.

Dos oraciones en el editor; la frase bonjour tout le monde y la palabra hebrea shalom tienen un subrayado de puntos — Las frases marcadas reciben un subrayado de puntos durante la edición. Este subrayado no forma parte del HTML guardado.

Cómo activarlo

Esta función la ofrece el plugin textpartlanguage.js (también incluido en plugins/all_plugins.js). El elemento de la barra de herramientas es textpartlanguage ("Language"), un botón de menú. Está en las barras full y office ; para tu propia barra, añádelo a la cadena:

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

Opciones

Opción	Valor predeterminado	Función
`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	El menú. Cada entrada es `{ code, label, dir }`; establece `dir: "rtl"` para idiomas de derecha a izquierda (los valores predeterminados lo hacen para árabe, hebreo, persa y urdu).
`textPartLanguageHighlight`	`true`	Subrayado de puntos en las frases marcadas dentro del área de edición. Solo se muestra en el editor; `false` lo desactiva.
`text_textpartlanguage`, `text_removelanguage`	"Language", "Remove language"	Etiqueta del botón y primera fila del menú.

Una lista más corta, con un código regional:

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

Con un paquete de idioma cargado, las entradas integradas se nombran en el idioma de ese paquete (mediante Intl.DisplayNames); a label que configures tú mismo se muestra tal como lo escribas.

Cómo usarlo

Selecciona el texto, abre Language y elige un idioma. Elegir el idioma que ya tiene la selección lo elimina de nuevo.
Con el cursor dentro de una frase marcada (sin selección), elegir otro idioma cambia esa frase y "Remove language" quita el elemento que la envuelve. Un cursor fuera de cualquier frase marcada no hace nada: el plugin nunca crea un span vacío.
Una selección que abarque varios párrafos, elementos de lista o celdas de tabla se marca bloque a bloque, con un span en cada uno, de modo que los bloques no se dividen.
Teclado: al abrir el menú, el foco va al idioma actual o a "Remove language". ArrowUp y ArrowDown recorren la lista de forma circular, Home y End saltan a los extremos, Enter o Space eligen, y Escape cierra el menú y devuelve el foco al área de edición. Cada fila tiene role="menuitemradio" y aria-checked.
Deshacer elimina en un paso un idioma establecido desde el menú o la API.

API para tu propia interfaz:

Método	Función
`editor.setTextLanguage("fr")`	Marca la selección, como lo hace el menú.
`editor.removeTextLanguage()`	Elimina el idioma en la posición del cursor o en la selección.
`editor.getTextLanguage()`	El idioma en la posición del cursor, por ejemplo `"fr"`, o `null`.
`editor.getMarkedLanguages()`	Todos los idiomas usados en el documento, por ejemplo `[{"code":"fr","label":"French"},{"code":"he","label":"Hebrew"}]`.
`editor.listTextLanguages()`	Una copia de la lista del menú.

Aspectos a tener en cuenta

El HTML guardado es un span simple sin clase, por lo que no depende de ninguna hoja de estilos. Los idiomas de derecha a izquierda también reciben dir="rtl", porque lang por sí solo no cambia la dirección. De la ejecución mostrada arriba:

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

Los sanitizadores deben conservar lang y dir en span. Si tu servidor los elimina, el documento pierde su marcado de idioma sin avisar.
El idioma de todo el documento es un ajuste independiente (el lang de la página que muestra el contenido). Este plugin solo marca las partes que difieren de él.
Usa setTextLanguage() desde el código, no execCommand("textpartlanguage", "de"): en 2.6.12 el valor no llega al plugin, por lo que esa llamada elimina el idioma en vez de establecerlo.
Primero se quitan los elementos que envuelven los fragmentos marcados dentro de una nueva selección, de modo que una frase nunca termina con dos idiomas anidados.
En el modo de sugerencias (control de cambios) no puede cambiarse el idioma: aún no se puede registrar ese cambio, así que el plugin lo rechaza con un mensaje.

Relacionado: Declaración de accesibilidad, Comprobador de accesibilidad, Interfaz de derecha a izquierda, demo de accesibilidad e idiomas.