CSS font-variant-east-asian Property
The CSS font-variant-east-asian property controls glyph substitution and sizing for East Asian scripts. Learn its values with examples.
The CSS font-variant-east-asian property controls the use of alternate glyphs for East Asian scripts such as Chinese, Japanese, and Korean (CJK). It lets you select between historical or regional character forms (for example traditional vs. simplified Chinese, or different Japanese JIS standards) and control the width of figures — all without changing the underlying text.
It is one of the CSS3 properties and one of the longhands that make up the shorthand font-variant property.
Why use it
A single Unicode code point can be rendered with several different glyphs in East Asian typography. The same character may have a historical (traditional) form and a modern (simplified) form, and Japanese fonts often ship glyphs that follow a specific JIS standard (jis78, jis83, jis90, jis04). font-variant-east-asian asks the font to pick the appropriate variant from its OpenType features, so you keep the original characters in your markup while presenting the form you want.
Use it when:
- You display Chinese text and want to force traditional or simplified forms regardless of which characters the author typed.
- You target a particular Japanese JIS glyph standard for consistency.
- You mix CJK with Latin text and need full-width or proportional-width figures so columns line up.
- You render annotated text and want the smaller ruby glyph forms.
Because this relies on font features, it only has a visible effect when the active font actually contains those alternate glyphs. If the font has no traditional variant, for instance, the text renders unchanged.
| Initial Value | normal |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.fontVariantEastAsian = "ruby"; |
Syntax
Syntax of CSS font-variant-east-asian Property
font-variant-east-asian: normal | <east-asian-variant-values> | <east-asian-width-values> | ruby | initial | inherit ;Example of the font-variant-east-asian property:
Example of CSS font-variant-east-asian Property with traditional value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-variant-east-asian: traditional;
}
</style>
</head>
<body>
<h2>Font-variant-east-asian property example</h2>
<h2>大学 → 大學</h2>
</body>
</html>You can see here that the font-variant-east-asian property is set to traditional. You can change it to any of the values mentioned in the table below this page, including the simplified variant. Note: Browser support for this property is limited. The example relies on system fonts that include traditional East Asian variants.
Result
![CSS font-variant-east-asian Property](/uploads/media/default/0001/04/b5335cfd42c67834e22ae4ebce451467997f57b6.png "CSS font-variant-east-asian Property" =420x)
Combining width and variant values
You may set one variant value and one width value at the same time. The keywords can be listed in any order:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.cjk {
font-variant-east-asian: simplified full-width;
}
</style>
</head>
<body>
<p class="cjk">図書館 1234</p>
</body>
</html>Here simplified selects the simplified glyph variant while full-width forces full-width forms for the digits, so they occupy the same cell width as the surrounding CJK characters.
Values
| Value | Description |
|---|---|
| normal | The use of alternate glyphs is not enabled. |
<east-asian-variant-values> | Selects a logographic glyph variant. One of jis78, jis83, jis90, jis04, simplified, or traditional. |
<east-asian-width-values> | Controls the sizing of figures used for East Asian characters: proportional-width (proportionally spaced) or full-width (full-width forms). |
| ruby | Forces the use of special, smaller glyphs designed for ruby (annotation) characters. |
| initial | Makes the property use its default value (normal). |
| inherit | Inherits the property from its parent element. |
A valid value combines at most one variant keyword and one width keyword (for example jis90 full-width), or the single keywords normal or ruby.
Related properties
font-variant— the shorthand that includes this longhand.font-feature-settings— low-level control of the same OpenType features.font-family— choose a font that actually contains East Asian variant glyphs.