Як побудувати "малі цифри" (тобто текстові фігури)?


12

Чи є прийнятим способом коригування гліфів шрифту, щоб імітувати текстові фігури ?

введіть тут опис зображення

Фон

Текстові фігури - це "малі" цифри. Зазвичай ви використовуєте малі цифри, де ви також використовуєте малі тексти (наприклад, у середині речення).

Клавіатури ніколи не створювалися з великих і малих цифр; а Unicode спеціально не кодує їх, оскільки "вони не вважаються окремими символами від підкладкових фігур, лише іншим способом написання одних і тих же символів".

Що підводить мене до мого питання; який прийнятий спосіб створення малих фігур із стандартних "великих" шрифтів?

Вікіпедія згадує, що зазвичай :

  • 012є x-висота
  • 68 мати сходження
  • 34579 мати спуски

введіть тут опис зображення

Моєю першою спробою (у фотошопі) було б:

  • smush 012
  • підштовхувати 34579 вниз
  • залиште 68, де вони є:

введіть тут опис зображення

введіть тут опис зображення

Але виплетені фігури (0, 1, 2) виглядають виразно неприємно.

Якщо консорціум Unicode припускає, що "малі цифри" можуть бути просто побудовані з "великих літер" - що вони рекомендують робити?

Ідеально в HTML

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

введіть тут опис зображення

Але я не запитую, як перейти до використання Грузії ; я запитую, як побудувати фігури підкладки з непрокладкових.

А оскільки це призначено для відображення в Інтернеті, я розумію, що мені, мабуть, доведеться застосувати форматування персонажів:

<!doctype html">
<html>
<head>
    <style type="text/css">
        body {
            font-family: "Segoe UI", "Calibri", sans-serif;
            font-size: larger;
        }

        .xheight {
            font-size: 1.5ex;
        }

        .descender {
            position: relative;
            bottom: -0.4ex;
        }
    </style>
</head>
<body>
    <p>In the year <span class="xheight">21</span><span class="descender">5</span><span>6</span> the Romulan war...
</body>
</html>

Візуалізація як:

введіть тут опис зображення

Що, знову ж таки, виглядає не так приємно, як я думаю, що це повинно.

Гей дивись, копійки!

введіть тут опис зображення

Відповіді:


11

Дуже коротка відповідь - «Ні».

Фігури "старого стилю" ("малі") спеціально малюються саме так. Legacy Postscript та TrueType шрифти, здебільшого, містять лише табличні фігури, які підкладки або старий стиль відповідно до способу оформлення шрифту.

Консорціум Unicode не припускає, що фігури підкладки можуть бути перекручені на фігури старого стилю, просто що існує лише один набір значень Unicode для цифр 0-9, незалежно від того, чи є кілька гліфів для кожної цифри.

Багато шрифтів OpenType містять як фігури підкладки, так і фігури старого стилю, як у табличній, так і в пропорційній ширинах, звичайні типові фігури підкладки є типовими. Це все доступні для програм, які обізнані з OpenType, як правило, через налаштування параметрів у стилі символу чи абзацу. Вони поділяють значення Unicode, але окремо малюються альтернативними гліфами, які існують (або відсутні) як контури програмного забезпечення для шрифту. (З сімейства шрифтів у вашій CSS у Calibri є фігури старого стилю, але інтерфейс Segoe - ні.)

З типографічної точки зору, не тільки немає прийнятого способу робити те, що ви просите, я б сказав, що немає і прийнятного способу. Як ви виявили, спроба потрапити туди, зміщуючи базові лінії та перекручуючи фігури підкладки, виглядає жахливо.


Хороша відповідь, але, здається, напрошується питання про те, коли браузери будуть повністю обізнані з OpenType, настільки, що вони зможуть вказати в CSS, який стиль номерів використовувати, коли шрифт містить обидва.
e100

1
Важливо також зазначити, що немає способу гарантувати, що "Segoe UI", "Calibri", ні навіть sans-serif є фактичним шрифтом, що відображається. Точні базові значення та значення висоти, що використовуються, можуть виглядати ще жахливіше у довільному стилі Olde, який встановив користувач.
horatio

Будь-яке уявлення про те, чому консорціум Unicode не кодують окремі гліфи для малих і великих літер цифр, але зробив закодувати окремі гліфи верхнього регістру A( U+0041), нижній регістр a( U+0061), і навіть sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ ( U+1D00)? Тобто, що може бути міркуванням, яке виключає окремі великі та малі цифри, але включає окремі великі та малі літери?
Ян Бойд

І нарешті, чи можете ви назвати шрифт OpenType, який містить як «великі», так і «малі» цифри?
Ян Бойд

1
@IanBoyd: Регулярні великі та малі символи відрізняються за значенням, тому перемикання між ними набагато більше, ніж стилістичний вибір. Однак великі і малі цифри однакові за значенням, і, отже, Unicode просто не є тим, що Unicode хоче кодувати - з тієї ж причини, що немає специфічних кодувань для курсиву, малих ковпачків, малих літер і подібних. Знайдені вами символи з маленькими ковпачками кодуються лише тому, що вони мають чітке значення у фонетиці і не повинні використовуватися для наголосу (для цього слід використовувати функції OpenType або подібні).
Wrzlprmft

5

Правильний спосіб відображення малих цифр / цифр або "фігур у старому стилі" - це використання CSS для вибору відповідної функції шрифту. Очевидно, що використаний шрифт повинен підтримувати цю функцію в першу чергу. Реальна підтримка веб-шрифтів не є надто сильною.

Налаштування CSS, яку ви шукаєте, це

font-feature-settings: "onum";

та документація:

Документацію функцій OpenType, onumзокрема особливості, можна знайти в реєстрі тегів Microsoft OpenType Layout .

Альтернативна документація про функції шрифту доступна у статті Як кодувати функції OpenType у CSS .

Офіційно ви повинні використовувати

font-variant-numeric: oldstyle-nums;

але підтримка цього здається ще слабшою, згідно з посиланням на Mozilla Browser Compatibility .

Теоретично це краще, оскільки він не посилається безпосередньо на функції OpenType, тому він також повинен працювати і з не-OpenType шрифтами. Таким же чином слід використовувати:

font-variant: small-caps; 

щоб увімкнути невеликі ковпачки . Ви НЕ використовувати функцію OpenType настройки , такі як

font-feature-settings: "smcp";

щоб досягти цього ефекту, оскільки font-variantвластивість уже добре підтримується.


Ні, ви ніколи не хочете використовувати, font-variant: small-caps;тому що це створює FAKE маленькі ковпачки. Завжди використовуйте інший і завжди використовуйте шрифти OpenType. Просте і вирішене.
tchrist

Відповідно до визначення ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ), acceptableякщо small-capsфункція підроблена. Це не є вимогою, і високоякісний агент користувача зробив би правильно (відобразити його на функцію OpenType). Я погоджуюсь, що якщо ви швидше не маєте змін замість підроблених маленьких ковпачків, вам слід скористатися font-feature-settings. Зазвичай підроблені маленькі ковпачки краще, ніж взагалі ніякого ефекту.
Мікко Ранталайнен
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.