CSS - font-variant-east-asian Property

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>
Advertisements