Chinese, Japanese, and Korean text

Chinese, Japanese, and Korean (CJK) document text uses the same editor in React and Vue. Configure interface translations and document fonts separately.

Interface language

The package includes Japanese (ja) and Simplified Chinese (zhCN) interface catalogs. They translate editor controls. They do not translate document text or install document fonts.

These examples show Japanese controls and regional date input:

import { DocxEditor } from '@docx-editor.dev/react';
import { ja } from '@docx-editor.dev/i18n';

<DocxEditor document={bytes} i18n={ja} locale="ja-JP" />;

<script setup lang="ts">
import { DocxEditor } from '@docx-editor.dev/vue';
import { ja } from '@docx-editor.dev/i18n';

defineProps<{ bytes: Uint8Array }>();
</script>

<template>
  <DocxEditor :document="bytes" :i18n="ja" locale="ja-JP" />
</template>

For Simplified Chinese controls, use zhCN with locale="zh-CN".

A Korean interface catalog is not included. You can edit Korean document text with another interface language or supply a custom catalog. For catalog setup and fallback behavior, see Interface translations.

Setting locale alone changes regional behavior, not interface translations. In composed editors, pass translations to LocaleProvider, rather than DocxEditor.Root.

Document fonts

Choose fonts that cover the document's characters and regional glyph forms. Chinese, Japanese, and Korean fonts can draw the same Unicode character differently.

The font picker lists available choices. A listed family does not confirm that its font files loaded. If the font notice reports a missing family, supply its files or choose an appropriate substitute.

A run can name one font for East Asian characters and another for Latin letters and numbers. The font picker shows the font of the selected characters. If the selection contains both kinds of characters with different fonts, the picker is blank. If the selection contains East Asian text, spaces, punctuation, and numbers do not count. So a selection of Korean words, or a date such as 2024년 3월, reads the Korean font.

If you choose an East Asian font, such as SimSun or MS Mincho, it applies to all selected characters, including Latin letters and numbers. If you choose a Latin font, such as Arial, it applies only to Latin letters and numbers, including numbers the picker does not show. East Asian characters keep their font, because a Latin font has no East Asian characters to draw them with.

The editor treats a font as East Asian in any of these cases:

• Its name is a known East Asian font, such as Noto Sans SC or PingFang SC.
• Its name is written in East Asian characters.
• Its name contains a region word: CJK, JP, or KR.

Every other font counts as Latin, including a custom East Asian font with another Latin name. Choosing such a font does not change East Asian text.

Use the same font configuration in React and Vue. For resolver examples, see Load your own fonts. For the document's East Asian font selection rules, see Faces that no style names.

Google-hosted regional fonts

If the document's CJK fonts are unavailable and your app can load fonts from a third party, use googleFonts() with the cjk option:

import { packagedFonts } from '@docx-editor.dev/fonts';
import { googleFonts } from '@docx-editor.dev/fonts/google';

const fontResolvers = [packagedFonts(), googleFonts({ cjk: true })];

The resolver loads one Noto Sans face for each region the document's families belong to: Japanese, Simplified Chinese, Traditional Chinese, or Korean. Each face is 4.6 to 8.5 MB and keeps that region's glyph forms. Files come from a pinned Google Fonts revision and are checked against a recorded hash.

Packaged browser fallback

To keep every font download on your own origin, install @docx-editor.dev/fonts-cjk. Use cjkFonts() from its browser entry:

import { packagedFonts } from '@docx-editor.dev/fonts';
import { cjkFonts } from '@docx-editor.dev/fonts-cjk/browser';

const fontResolvers = [packagedFonts(), cjkFonts()];

The font is about 16 MB. Your bundler emits the asset; the resolver makes no third-party request. This fallback supplies one regular Japanese regional face for every supported family.

Common behavior

Pass these resolvers to useFonts() or the fonts option of useDocxSource() in either adapter. Keep preferred font sources first. Use one CJK source. If you list both, both fonts download and the source listed first paints the text. For a complete hook example, see Render Chinese, Japanese, and Korean text.

Both resolvers fetch fonts only when the document requests a supported family. Both substitute one regular face for the family's bold and italic variants. If you need other weights or styles, supply the corresponding font files.

Both resolvers load in the background by default. The first paint does not wait for the CJK faces, and the document lays out again when they arrive. To install them with the document's other fonts instead, use googleFonts({ cjk: { loading: 'wait' } }) or cjkFonts({ loading: 'wait' }). For more information, see Choose when large fonts load.

Input and typography

Use your operating system's input method to compose text. Keep custom keyboard handlers from intercepting composition keystrokes in the document surface.

Document language, fonts, and typography properties determine line breaking and mixed-script spacing. Changing the interface language does not change these document properties.

The interface has no dedicated controls for East Asian typography settings. For vertical-text limits and individual spacing, punctuation, and line-breaking rules, see Word feature support.

PDF export

Browser font configuration does not configure a separate PDF server. Supply suitable server fonts or install the optional @docx-editor.dev/fonts-cjk package.

The converter discovers the package without resolver configuration. Browser loading requires the separate cjkFonts() setup described here. Substitution can change regional glyph forms and pagination.

For installation, regional font limits, and missing-glyph diagnostics, see Add Chinese, Japanese, and Korean text to PDF export.

Check your integration

Open the default example document and find the “Chinese Japanese and Korean text” section. Compare its Chinese, Japanese, and Korean paragraphs with their Latin names and numbers.

Check input, font notices, save and reopen, and exported PDF output with your deployment's fonts. For Arabic or Hebrew controls and mixed-direction text, see Right-to-left support.