font-variant-east-asian

The font-variant-east-asian CSS property controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.

Initial value	normal
Applies to	all elements. It also applies to ::first-letter and ::first-line.
Inherited	yes
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	order of appearance in the formal grammar of the values

Syntax

font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78;              /* <east-asian-variant-values> */
font-variant-east-asian: jis83;              /* <east-asian-variant-values> */
font-variant-east-asian: jis90;              /* <east-asian-variant-values> */
font-variant-east-asian: jis04;              /* <east-asian-variant-values> */
font-variant-east-asian: simplified;         /* <east-asian-variant-values> */
font-variant-east-asian: traditional;        /* <east-asian-variant-values> */
font-variant-east-asian: full-width;         /* <east-asian-width-values> */
font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
font-variant-east-asian: ruby full-width jis83;

/* Global values */
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: unset;

Values

normal

This keyword leads to the deactivation of the use of such alternate glyphs.

ruby

This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values ruby.

<east-asian-variant-values>

These values activates the figures defined in specific standard. Possible values are:

Keyword	Standard defining the glyphs	OpenType equivalent
jis78	JIS X 208 version 1978	jp78
jis83	JIS X 208 version 1983	jp83
jis90	JIS X 208 version 1990	jp90
jis04	JIS X 208 version 2004	jp04
simplified	None, use the simplified Chinese glyphs	smpl
traditional	None, use the traditional Chinese glyphs	trad

<east-asian-width-values>

These values controls the sizing of figures used for East Asian characters. Two values are possible:

• proportional-width activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values pwid.
• full-width activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values fwid.

Formal syntax

normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]
where 
<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]

Examples

HTML

<p class="normal">!</p>

CSS

p {
  font-variant-east-asian: ruby;
}

Result

Live sample link

Specifications

Specification	Status	Comment
CSS Fonts Module Level 3 The definition of 'font-variant-east-asian' in that specification.	Candidate Recommendation	Initial definition

Browser Compatibility

[1] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.