Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

font-variant-east-asian

Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!

Summary

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

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderorder 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

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

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

Result

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

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Basic support 34 (34) [1] ? ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 34.0 (34)[1] ? ? ?

[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.

Document Tags and Contributors

 Contributors to this page: Ruggero, Sebastianz, fscholz, teoli
 Last updated by: Ruggero,