css властивість font-variant-east-asian

Властивість font-variant-east-asian дозволяє контролювати заміщення гліфів та їх розмір у текстах, які написані мовами Східної Азії.

Властивість font-variant-east-asian є однією з властивостей, представлених у CSS3, для того, щоб увімкнути різні функції, пов'язані з шрифтами, які можуть покращити зовнішній вигляд тексту на сторінці. Ця власність використовується для керування замінами та розмірами символів в східноазіатському тексті, наприклад, японською та китайською мовами.

правити

+ додати пораду чи нотатку

Синтаксис

font-variant-east-asian: normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]

Властивість font-variant-east-asian може отримувати 4 значень:

normal

Вказує, що жодна з наведених нижче функцій не активована.

автор: Svitlana

правити

<east-asian-variant-values>

Ці значення контролюють відображення альтернативних гліфів:

• normal
• jis78
• jis83
• jis90
• jis04
• simplified
• traditional

автор: Svitlana

правити

<east-asian-width-values>

Ці значення контролюють розмір цифр, що використовується для східноазіатських символів. Можливі два значення:

• proportional-width, що активізує набір фігур, де всі цифри різних розмірів. Це відповідає значенню OpenType pwid;
• full-width, що активує набір фігур, де всі цифри мають однаковий розмір, що дозволяє їх легко вирівнювати, як у таблицях. Це відповідає значенням OpenType fwid.

автор: Svitlana

правити

ruby

Це ключове слово зумовлює використання спеціальних гліфів для рубінових символів.

Оскільки вони зазвичай менші, творці шрифтів часто розробляють спеціальні форми, для поліпшення контрасту. Це ключове слово відповідає значенню OpenType ruby.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	63	34	9.1	50	79	—

Підтримка: мобільні переглядачі

Переглядач
	63	63	34	9.3

Приклади

+ запропонувати свій приклад у пісочниці

<p class="normal">звичайно: 漢字 і цифри 0123</p>
<p class="fw">full-width: 漢字 і цифри 0123</p>

.fw {
    font-variant-east-asian: full-width;
}

<p>Цей приклад показує як працює властивість <code>font-variant-east-asian</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення літер нижче. Зверніть увагу, що властивість може не підтримуватися Вашим браузером.</p>

<div class="inputs">
  <input id="normal" checked name="font-variant-east-asian" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Без задання. Використовуються лігатури.</message>
  
  <input id="proportional-width" name="font-variant-east-asian" type="radio"/>
  <label for="proportional-width">proportional-width</label>
  <message for="proportional-width">Активізує набір фігур, де всі цифри різних розмірів.</message>
  
  <input id="ruby" name="font-variant-east-asian" type="radio"/>
  <label for="ruby">ruby</label>
  <message for="ruby">Це ключове слово зумовлює використання спеціальних гліфів для рубінових символів.</message>
  
  <input id="traditional" name="font-variant-east-asian" type="radio"/>
  <label for="traditional">traditional</label>
  <message for="traditional">Значення контролює відображення альтернативних гліфів.</message>
  
</div>

<p id="message">Без задання. Використовуються лігатури.</p>

<hr>

<p id="block">「日本語」の文字詰め！カナ</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
}

#block {
  font-size: 40px; 
  line-height: 1;
  margin-top: 0;
  text-align: center;
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
}

message {
  display: none;
}

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  document.querySelectorAll('#message').forEach((n) => n.textContent = messageText?.textContent ?? '');

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('font-variant-east-asian', this.id));

}));

<p class="text">font-variant-east-asian: normal</p>
<p class="text2">「日本語」の文字詰め！カナ</p>

<p class="text">font-variant-east-asian: proportional-width</p>
<p class='text2 pwid'>「日本語」の文字詰め！カナ</p>

<p class="text">font-variant-east-asian: ruby</p>
<p class='text2 pkna'>「日本語」の文字詰め！カナ</p>

.text2{
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 36px;
  text-align: center;
}
.text{
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
.palt {
  font-variant-east-asian: normal;
  font-feature-settings : "normal";
}
.pwid {
  font-variant-east-asian: proportional-width;
  font-feature-settings : "proportional-width";
}
.pkna { 
 font-variant-east-asian: ruby;
 font-feature-settings : "ruby";
}