Contribute to this guide

guideText part language

The TextPartLanguage feature provides the ability to mark the language of selected text fragments as well as automatically set the text direction based on the language choice. It makes working with multilingual content convenient and ensures that user agents can correctly present the content written in multiple languages, so graphical browsers and screen readers are able to identify how to pronounce text and display characters.

This feature is especially useful when your content includes text sections written in different text directions, e.g. when the whole content is written in English but includes some citations in Arabic.

The text part language feature implements the WCAG 3.1.2 Language of Parts specification.

# Demo

Use the editor below to see the text part language plugin in action. Select a text fragment and use the toolbar dropdown to choose from predefined available languages that can be applied to the content.

Language is the human ability to acquire and use complex systems of communication, and a language is any specific example of such a system. The scientific study of language is called linguistics.

שפה היא דרך תקשורת המבוססת על מערכת סמלים מורכבת בעלת חוקיות, המאפשרת לקודד ולארגן מידע בעל משמעויות רבות ומגוונות. נהוג להבדיל בין הסמל השפתי המסמן לבין המושג או התוכן המסומן בו, אשר יכול להיות מציאותי או מופשט.

Un lenguaje (del provenzal lenguatge y este del latín lingua) es un sistema de comunicación estructurado para el que existe un contexto de uso y ciertos principios combinatorios formales. Existen contextos tanto naturales como artificiales.

اللغة نسق من الإشارات والرموز، يشكل أداة من أدوات المعرفة، وتعتبر اللغة أهم وسائل التفاهم والاحتكاك بين أفراد المجتمع في جميع ميادين الحياة. وبدون اللغة يتعذر نشاط الناس المعرفي.

There are other language-related CKEditor 5 features you may want to check:

# Installation

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-langauge package:

npm install --save @ckeditor/ckeditor5-langauge

And add it to your plugin list configuration:

import TextPartLanguage from '@ckeditor/ckeditor5-langauge/src/textpartlanguage';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ TextPartLanguage, ... ],
        toolbar: [ 'textPartLanguage', ... ]
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

# Common API

The TextPartLanguage plugin registers:

The command can be executed using the editor.execute() method:

// Applies the language to the selected text part with the given language code.
editor.execute( 'textPartLanguage', { languageCode: 'es' } );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-language.