← Toute la documentation

Langue d’un passage

Indique la langue d’un mot ou d’un passage lorsque celle-ci diffère du reste du document, en l’entourant de <span lang="…">. Les lecteurs d’écran utilisent lang pour adapter la voix et la prononciation : une citation française dans une page anglaise est ainsi lue en français plutôt que mal prononcée. Le critère de succès WCAG 2.2 3.1.2 (Langue d’un passage, niveau AA) exige ce balisage.

L’éditeur avec bonjour tout le monde sélectionné et le menu Language ouvert, listant Remove language puis Arabic ar, Chinese (Simplified) zh-Hans, Chinese (Traditional) zh-Hant, Czech cs, Dutch nl, English en, French fr avec le focus clavier, German de et Greek el
Le menu Language ouvert sur une expression sélectionnée. Les flèches ont déplacé le focus sur French.
Deux phrases dans l’éditeur ; bonjour tout le monde et le mot hébreu shalom sont soulignés en pointillés
Les passages marqués reçoivent un soulignement pointillé pendant l’édition. Il ne figure pas dans le HTML enregistré.

Activation

Cette fonctionnalité est fournie par le plugin textpartlanguage.js (également inclus dans plugins/all_plugins.js). L’élément de la barre d’outils est textpartlanguage (« Language »), un bouton de menu. Il figure dans les barres full et office ; ajoutez-le à la chaîne de votre propre barre :

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

Options

OptionValeur par défautFonctionnement
textPartLanguages24 langues : 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, viLe menu. Chaque entrée est { code, label, dir } ; définissez dir: "rtl" pour les langues de droite à gauche (les valeurs par défaut le font pour l’arabe, l’hébreu, le persan et l’ourdou).
textPartLanguageHighlighttrueSoulignement pointillé des passages marqués dans la zone d’édition. Propre à l’éditeur ; false le désactive.
text_textpartlanguage, text_removelanguage"Language", "Remove language"Libellé du bouton et première ligne du menu.

Une liste plus courte, avec un code régional :

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

Avec un module de langue chargé, les entrées intégrées sont nommées dans sa langue (via Intl.DisplayNames) ; un label défini par vous-même s’affiche tel quel.

Utilisation

  • Sélectionnez le texte, ouvrez Language et choisissez une langue. Choisir celle que la sélection possède déjà la retire.
  • Avec le curseur dans un passage marqué (sans sélection), choisir une autre langue modifie ce passage ; « Remove language » retire son conteneur. Hors d’un passage marqué, le curseur seul ne produit rien : le plugin ne crée jamais de span vide.
  • Une sélection couvrant plusieurs paragraphes, éléments de liste ou cellules est marquée bloc par bloc, avec un span dans chacun, sans scinder les blocs.
  • Clavier : à l’ouverture du menu, le focus va sur la langue courante ou sur « Remove language ». Flèche haut et Flèche bas naviguent en boucle, Début et Fin vont aux extrémités, Entrée ou Espace choisissent, Échap ferme le menu et rend le focus à la zone d’édition. Chaque ligne possède role="menuitemradio" et aria-checked.
  • L’annulation retire en une étape une langue définie depuis le menu ou l’API.

API pour votre propre interface :

MéthodeFonctionnement
editor.setTextLanguage("fr")Marque la sélection, comme le menu.
editor.removeTextLanguage()Retire la langue au niveau du curseur ou dans la sélection.
editor.getTextLanguage()Langue au niveau du curseur, par exemple "fr", ou null.
editor.getMarkedLanguages()Toutes les langues utilisées dans le document, par exemple [{"code":"fr","label":"French"},{"code":"he","label":"Hebrew"}].
editor.listTextLanguages()Une copie de la liste du menu.

À savoir

Le HTML enregistré est un simple span sans classe : il ne dépend donc d’aucune feuille de style. Les langues de droite à gauche reçoivent aussi dir="rtl", car lang seul ne change pas la direction. Dans l’exemple ci-dessus :

<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>
  • Les filtres de nettoyage doivent conserver lang et dir sur span. Si votre serveur les retire, le document perd silencieusement son balisage de langue.
  • La langue du document entier est un réglage distinct (le lang de la page affichant le contenu). Ce plugin marque uniquement les parties qui en diffèrent.
  • Depuis le code, utilisez setTextLanguage(), et non execCommand("textpartlanguage", "de") : dans la version 2.6.12, la valeur ne parvient pas au plugin ; cet appel retire donc la langue au lieu de la définir.
  • Les spans marqués dans une nouvelle sélection sont d’abord retirés : un passage ne contient donc jamais deux langues imbriquées.
  • En mode suggestion (suivi des modifications), la langue ne peut pas changer : cette modification ne peut pas encore être suivie et le plugin la refuse avec un message.

Voir aussi : déclaration d’accessibilité, vérificateur d’accessibilité, interface de droite à gauche, démonstration d’accessibilité et de langues.