# Text part language

The text part language feature lets you mark the language of text fragments. This way browsers and screen readers can correctly interpret parts written in different languages.

<a id="demo">

## Demo

In the demo below, select a text fragment. Next, use the language toolbar dropdown to choose from predefined languages.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="additional-feature-information">

## Additional feature information

The text part language feature is especially useful when your content includes text sections written in different text directions, for example, when the whole content is in English but includes some citations in Arabic.

The text part language feature implements the [WCAG 3.1.2 Language of Parts](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html) specification.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, TextPartLanguage } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ TextPartLanguage, /* ... */ ],
		toolbar: [ 'textPartLanguage', /* ... */ ]
		language: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, TextPartLanguage } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ TextPartLanguage, /* ... */ ],
		toolbar: [ 'textPartLanguage', /* ... */ ]
		language: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuring-available-languages">

## Configuring available languages

To modify the list of available languages displayed in the language dropdown use the [`config.language.textPartLanguage`](../api/module_core_editor_editorconfig-LanguageConfig.md#member-textPartLanguage) configuration option.

The example below shows the configuration used for the [demo](#demo) above:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		language: {
			textPartLanguage: [
				{ title: 'Arabic', languageCode: 'ar' },
				{ title: 'French', languageCode: 'fr' },
				{ title: 'Hebrew', languageCode: 'he' },
				{ title: 'Spanish', languageCode: 'es' }
			]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="related-features">

## Related features

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

* [UI Language](../getting-started/setup/ui-language.md) – Set the UI language.
* [Spelling and grammar checking](spelling-and-grammar-checking.md) – Employ multi-language spell check for flawless content.

<a id="common-api">

## Common API

The [`TextPartLanguage`](../api/module_language_textpartlanguage-TextPartLanguage.md) plugin registers:

* The `'textPartLanguage'` UI dropdown component implemented by the [text part language UI feature](../api/module_language_textpartlanguageui-TextPartLanguageUI.md).
* The `'textPartLanguage'` command implemented by the [text part language editing feature](../api/module_language_textpartlanguageediting-TextPartLanguageEditing.md).

You can execute the command using the [`editor.execute()`](../api/module_core_editor_editor-Editor.md#function-execute) method:

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

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../framework/development-tools/inspector.md) 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.

<a id="contribute">

## Contribute

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

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)