CSS font-variant-east-asian Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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
Edge Chrome Firefox Opera Safari
796334509.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
6334469.3863

Last updated by CSSPortal on: 2nd January 2024