CSS font-variant-east-asian Property
Description
The font-variant-east-asian
CSS property is used to control the rendering of East Asian characters (such as those in Chinese, Japanese, and Korean scripts) within a text element. It allows web developers to specify how these characters should be styled, including options like 'normal' for default rendering, 'ruby' for applying ruby text styling, 'jis78' and 'jis83' for specific Japanese character set variants, and more. This property is particularly useful when fine-tuning the appearance of East Asian text to ensure proper legibility and typographic consistency within a web page or application.
- Initial value
- normal
- Applies to
- All elements
- Inherited
- Yes
- Computed value
- As specified
- Animatable
- No
- JavaScript syntax
- object.style.fontVariantEastAsian
Interactive Demo
JIS78とJIS83以降では、檜と桧、籠と篭など、一部の文字の入れ替えが行われている。また、「唖然」や「躯体」などの書体が変更されている。
Syntax
font-variant-east-asian: normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]
Values
- normal
- <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
- <east-asian-width-values> = [ full-width | proportional-width ]
- ruby
Example
<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>
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;
}
Browser Support
The following table will show you the current browser support for the CSS font-variant-east-asian
property.
Desktop | |||||
79 | 63 | 34 | 50 | 9.1 |
Tablets / Mobile | |||||
63 | 34 | 46 | 9.3 | 8 | 63 |
Last updated by CSSPortal on: 2nd January 2024