W3cubDocs

/CSS

font-variant-east-asian

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

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

Try it

font-variant-east-asian: normal;

font-variant-east-asian: ruby;

font-variant-east-asian: jis78;

font-variant-east-asian: proportional-width;

<section id="default-example">
  <div id="example-element">
    <p>
      JIS78とJIS83以降では、檜と桧、籠と篭など、一部の文字の入れ替えが行われている。また、「唖然」や「躯体」などの書体が変更されている。
    </p>
  </div>
</section>

section {
  font-family:
    "YuGothic Medium", YuGothic, "Yu Gothic Medium", "Yu Gothic", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

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: revert;
font-variant-east-asian: revert-layer;
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 specify a set of logographic glyph variants which should be used for display. Possible values are:

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

<east-asian-width-values>

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

proportional-width activating the set of East Asian characters which vary in width. It corresponds to the OpenType values pwid.
full-width activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType values fwid.

Formal definition

Initial value	`normal`
Applies to	all elements and text. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

font-variant-east-asian = 
  normal                                              |
  [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]  

<east-asian-variant-values> = 
  jis78        |
  jis83        |
  jis90        |
  jis04        |
  simplified   |
  traditional  

<east-asian-width-values> = 
  full-width          |
  proportional-width

Examples

Setting East Asian glyph variants

This example require font "Yu Gothic" installed in your OS, other fonts may not support OpenType features.

HTML

<table>
  <thead></thead>
  <tbody>
    <tr>
      <th>normal/jis78:</th>
      <td>麹町</td>
      <td class="jis78">麹町</td>
    </tr>
    <tr>
      <th>normal/ruby:</th>
      <td>しんかんせん</td>
      <td class="ruby">しんかんせん</td>
    </tr>
    <tr>
      <th>normal/traditional:</th>
      <td>大学</td>
      <td class="traditional">大学</td>
    </tr>
  </tbody>
</table>

CSS

tbody {
  border: 0;
}

td {
  font-family: "Yu Gothic", fantasy;
  font-size: 20px;
}
th {
  color: grey;
  padding-right: 10px;
}

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

.jis78 {
  font-variant-east-asian: jis78;
}

.traditional {
  font-variant-east-asian: traditional;
}

Result

Specifications

Specification
CSS Fonts Module Level 4> # font-variant-east-asian-prop>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`font-variant-east-asian`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`full-width`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`jis04`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`jis78`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`jis83`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`jis90`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`normal`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`proportional-width`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`ruby`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`simplified`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3
`traditional`	63	79	34	50	9.1	63	34	46	9.3	8.0	63	9.3