-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
147 lines (112 loc) · 4.66 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
---
title: font-variant-east-asian
slug: Web/CSS/font-variant-east-asian
page-type: css-property
browser-compat: css.properties.font-variant-east-asian
---
{{CSSRef}}
The **`font-variant-east-asian`** CSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.
{{EmbedInteractiveExample("pages/css/font-variant-east-asian.html")}}
## Syntax
```css
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: revert;
font-variant-east-asian: revert-layer;
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 specify a set of logographic glyph variants which should be used for display. Possible values are:
| Keyword | Standard defining the glyphs | OpenType equivalent |
| ------------- | --------------------------------------------------------------------------- | ------------------- |
| `jis78` | [JIS X 0208:1978](https://en.wikipedia.org/wiki/JIS_X_0208#First_standard) | `jp78` |
| `jis83` | [JIS X 0208:1983](https://en.wikipedia.org/wiki/JIS_X_0208#Second_standard) | `jp83` |
| `jis90` | [JIS X 0208:1990](https://en.wikipedia.org/wiki/JIS_X_0208#Third_standard) | `jp90` |
| `jis04` | [JIS X 0213:2004](https://en.wikipedia.org/wiki/JIS_X_0213) | `jp04` |
| `simplified` | None, use the simplified Chinese glyphs | `smpl` |
| `traditional` | None, use the traditional Chinese glyphs | `trad` |
- `<east-asian-width-values>`
- : These values control the sizing of figures used for East Asian characters. Two values are possible:
- `proportional-width` activating the set of East Asian characters which vary in width. It corresponds to the OpenType values `pwid`.
- `full-width` activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType values `fwid`.
## Formal definition
{{cssinfo}}
## Formal syntax
{{csssyntax}}
## Examples
### Setting East Asian glyph variants
This example require font "Yu Gothic" installed in your OS, other fonts may not support OpenType features.
#### HTML
```html
<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>
```
#### CSS
```css
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;
}
```
#### Result
{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [`font-variant`](/en-US/docs/Web/CSS/font-variant)
- [`font-variant-alternates`](/en-US/docs/Web/CSS/font-variant-alternates)
- [`font-variant-caps`](/en-US/docs/Web/CSS/font-variant-caps)
- [`font-variant-emoji`](/en-US/docs/Web/CSS/font-variant-emoji)
- [`font-variant-ligatures`](/en-US/docs/Web/CSS/font-variant-ligatures)
- [`font-variant-numeric`](/en-US/docs/Web/CSS/font-variant-numeric)
- [`font-variant-position`](/en-US/docs/Web/CSS/font-variant-position)