annotation() у CSS — гліфи-анотації, цифри в кружечках

Опис

Функція annotation() є специфічним інструментом в CSS, який дозволяє додавати до тексту анотації, такі як цифри у колах або інвертовані символи. Ця функція є частиною гнучкої системи стилізації тексту, яка надає дизайнерам можливість прикрашати текст або надавати йому додатковий семантичний вміст. Параметром функції annotation() є назва, специфічна для шрифту, яка відповідає числовому значенню, наприклад, nalt 2.

annotation() можна використовувати для додавання особливого візуального ефекту до тексту або для надання інформації, яка доповнює відображений контент. Кожна анотація пов'язана з певним числовим індексом, який визначається шрифтом. Інтеграція цієї функції в CSS дозволяє вказати використовувану анотацію для конкретних символів у тексті.

Один із простих способів застосування цієї функції полягає у використанні значення user-defined-ident у властивості font-variant-alternates. Наприклад:

p {
  font-variant-alternates: annotation(user-defined-ident);
}

У цьому прикладі, user-defined-ident є значенням, яке визначається користувачем і відповідає конкретній анотації. Воно пов'язане з числовим індексом, визначеним у @font-feature-values at-rule для відповідного шрифту. Це дозволяє застосувати відповідну анотацію до вибраних символів у тексті, додаючи до них візуальний акцент або додаткову інформацію.

Загалом, функція annotation() дозволяє використовувати анотації, такі як цифри у колах або інвертовані символи, що прикрашають або надають додаткову інформацію до тексту. Це відкриває нові можливості для креативного оформлення текстового контенту в веб-дизайні.

правити

Загальний опис

правити

Нотатка

Значення, передане в annotation(), повинно бути визначено в @font-feature-values для даного шрифту.

автор: Bond правити

Нотатка

Не всі шрифти підтримують варіанти анотації. Перед використанням цієї функції важливо перевірити, чи підтримує шрифт цю можливість.

автор: Bond правити

Нотатка

Підтримка цієї функції може відрізнятися в різних браузерах.

автор: Bond правити

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

Синтаксис

annotation(<feature-value-name>)

Функція annotation може отримувати єдине значення:

<feature-value-name>

Назва варіанту анотації, який був визначений в директиві @font-feature-values для даного шрифту.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	111	34	16.2	97	111

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

Переглядач
	111	111	34	16.2

Приклади

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

<p>Звичайні цифри: 0123456789</p>
<p class="variant">З annotation(salt): 0123456789</p>

@font-feature-values "Custom Font" {
    @annotation {
        salt: 1;
    }
}

p {
    font-family: "Custom Font", serif;
}

p.variant {
    font-variant-alternates: annotation(salt);
}

<h4 class="cap">1. Два кроки: оголосити ім'я — потім скористатися</h4>
<div class="cols">
    <div class="card">
        <p class="lbl">без правила</p>
        <p class="big plain">1 2 3 4 5</p>
    </div>
    <div class="card">
        <p class="lbl">annotation(circled)</p>
        <p class="big circled">1 2 3 4 5</p>
    </div>
    <div class="card">
        <p class="lbl">annotation(boxed)</p>
        <p class="big boxed">1 2 3 4 5</p>
    </div>
</div>
<p class="note">⚠️ Якщо всі три рядки виглядають однаково — так і має бути: у
    вашому шрифті немає таблиці альтернативних гліфів. Функція розібралася й
    обчислилася, але підставляти їй нічого. Ані попередження, ані запасного
    варіанта тут не передбачено.</p>

<h4 class="cap">2. Те, що працює в будь-якому шрифті</h4>
<div class="cols">
    <div class="card">
        <p class="lbl">символи Юнікоду</p>
        <p class="big">① ② ③ ④ ⑤</p>
    </div>
    <div class="card">
        <p class="lbl">кола з розмітки й css</p>
        <p class="big"><span class="kolo">1</span><span class="kolo">2</span><span class="kolo">3</span></p>
    </div>
    <div class="card">
        <p class="lbl">той самий вмикач напряму</p>
        <p class="big nalt">1 2 3 4 5</p>
        <p class="lbl small">font-feature-settings: "nalt" 2</p>
    </div>
</div>

/* КРОК 1: прив'язуємо власні імена до номерів анотацій у конкретному шрифті */
@font-feature-values "DejaVu Sans" {
    @annotation {
        circled: 1;
        boxed: 4;
    }
}

.big {
    margin: 4px 0;
    font-family: "DejaVu Sans", sans-serif;
    font-size: 1.7rem;
    letter-spacing: .1em;
}

/* КРОК 2: користуємося іменами, оголошеними вище */
.circled {
    font-variant-alternates: annotation(circled);
}

.boxed {
    font-variant-alternates: annotation(boxed);
}

/* нижчий рівень: та сама таблиця напряму, без @font-feature-values */
.nalt {
    font-feature-settings: "nalt" 2;
}

.kolo {
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    margin-right: .2em;
    border: 2px solid #2f6fd0;
    border-radius: 50%;
    color: #2f6fd0;
    font-size: .7em;
    line-height: 1.5em;
    text-align: center;
}

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.card {
    flex: 1 1 180px;
    max-width: 220px;
    padding: 2px 14px 10px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.lbl {
    margin: 10px 0 0;
    color: #5a6472;
    font-size: .8rem;
}

.lbl.small {
    font-size: .72rem;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}