CSS - font-variant-east-asian Property

Quiz

The font-variant-east-asian CSS property is used to control the usage of alternate glyphs for East Asian scripts, such as Chinese and Japanese.

Possible Values

normal: Deactivates usage of alternate glyphs.
ruby: Forces the use of special glyphs for ruby characters. Corresponds to OpenType values ruby.
<east-asian-variant-values>: Specifies a set of logographic glyphic variants for display.
- jis78
- jis83
- jis90
- jis04
- simplified: Uses simplified Chinese glyphs.
- traditional: Uses traditional Chinese glyphs.
<east-asian-width-values>: Controls the sizing of figures that are used in East Asian characters.
- proportional-width: Activates the usage of East Asian characters that vary in width. Corresponds to OpenType value pwid.
- full-width: Activates the usage of East Asian characters that have fixed width. Corresponds to OpenType value fwid.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontVariantEastAsian = "normal | ruby";

CSS font-variant-east-asian - Basic Example

Here is an example:

<html>
<head>
<style>
   p.trad {
    font-variant-east-asian: traditional;
   }
   p.ruby{
    font-variant-east-asian: ruby;
   }
   p.jis78 {
    font-variant-east-asian: jis78;
   }
   p.pwid {
    font-variant-east-asian: proportional-width;
   }
</style>
</head>
<body>
   <h2>Font-variant-east-asian property example</h2>
   <p class="trad">  </p>
   <p class="ruby">  </p>
   <p class="jis78">  </p>
   <p class="pwid">  </p>
</body>
</html>

Print Page