Skip to main content

font-variant-east-asian

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

{{EmbedInteractiveExample("pages/css/font-variant-east-asian.html")}}

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:

      KeywordStandard defining the glyphsOpenType equivalent
      jis78JIS X 0208:1978jp78
      jis83JIS X 0208:1983jp83
      jis90JIS X 0208:1990jp90
      jis04JIS X 0213:2004jp04
      simplifiedNone, use the simplified Chinese glyphssmpl
      traditionalNone, use the traditional Chinese glyphstrad
  • <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โ€‹

Formal syntaxโ€‹

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 style="border:0;">
<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โ€‹

td {
font-family: "Yu Gothic";
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โ€‹

{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}

Specificationsโ€‹

Browser compatibilityโ€‹

See alsoโ€‹