Сьогодні я провів кілька годин, намагаючись відтворити інтерфейс з нашого дизайну в Figma. Незважаючи на те, що я точно скопіював усі стилі з Figma, з'являлися загадкові проблеми з відступами в реалізації.
Після ретельного розслідування ці проблеми зазвичай пов'язані з тим, як браузери обробляють відступи в типографіці в порівнянні з тим, як це робить Figma. Це мене зацікавило, і я заглибився в це питання, виявивши проблему «Leading space & Vertical trimming».
Що таке Leading space & Vertical trimming 🤔?
Давайте спершу розглянемо кілька понять типографіки, щоб зрозуміти основну проблему.
Типографічні відступи (джерело зображення: wikipedia)
- Базова лінія: Невидима лінія, на якій "сидять" літери
- Висота капітелів (Cap-height): Висота великих літер від базової лінії
- x-висота: Висота малих літер, як «x»
- Спадні елементи: Частини літер, що виходять за межі базової лінії (наприклад, у «g», «j»)
- Висхідні елементи: Частини літер, що виходять вище за базову лінію (наприклад, у «h», «l»)
Тепер, коли ми ознайомились з основними поняттями типографіки, розуміння вертикального обрізання та leading стане набагато простішим.
Основна проблема: Leading space
Leading (вимовляється як «леддінг») — це вертикальний відступ між рядками тексту. Його назва походить від свинцевих смужок, які історично використовувалися для кращого вирівнювання та відступів між рядками.
Анатомія типографії: висота рядка = фактична висота рядка + верхня половина leading + нижня половина leading. (Зображення: Medium.com (microsoft design))
Наші сучасні браузери обчислюють висоту тексту на основі висоти рядка, яка включає фактичну висоту тексту та відступи (leading). Через це вирівнювання тексту стає важким, оскільки візуальний центр рядка зазвичай не збігається з математичним центром тексту. Як показано на зображенні нижче, навіть якщо кнопка здається вертикально вирівняною, насправді вона не є математично центрованою.
Кнопка вертикально центрована (Джерело зображення: Figma.com)
Рішення Figma: Vertical Trimming
Щоб вирішити цю проблему, Figma додала функцію Vertical trimming. Vertical trimming враховує лише висоту капітелів при обчисленнях, що робить їх точнішими та допомагає дизайнерам краще вирівнювати текст. Це пояснює, чому дизайн виглядає ідеально в Figma, але виникають проблеми з відступами в інтерфейсі.
Це чудово! Тепер ми можемо отримати той самий ідеальний інтерфейс, який ми завжди хотіли, але є одне «але». CSS властивості, які дозволяють досягти цього, ще не підтримуються основними браузерами.
Рішення через CSS (скоро)
CSS властивості, які будуть підтримувати це:
.text {
/* Обрізати простір над великими літерами */
text-edge: cap alphabetic;
/* Видалити стандартні відступи */
leading-trim: both;
text-overflow: trim;
/* Альтернатива через нову властивість */
text-box-trim: both;
}
Які є варіанти до того, як ці властивості будуть підтримані основними браузерами.
1. Від'ємні маржі
Підхід: Застосовувати від'ємні маржі для компенсації зайвого простору
Плюси: Простий у реалізації
Мінуси: Вимагає точних розрахунків; стає складним для більших проєктів
Кращий для: Швидких виправлень у малих компонентах
2. Нульова висота рядка
Підхід: Встановити висоту рядка на 0%
Плюси: Добре працює для однорядкового тексту
Мінуси: Проблеми з багаторядковим текстом; впливає на міжрядкові відступи
Кращий для: Однорядкових заголовків або ярликів
3.
**React бібліотеки
Рішення: Використовувати бібліотеку leading-trim
Плюси: Послідовне рішення, яке підтримується
Мінуси: Додається додаткова залежність
Кращий для: Великомасштабних додатків, які потребують послідовної типографіки
Висновок
Хоча розрив між вертикальним обрізанням у Figma та рендерингом браузерів може бути дратівливим, розуміння основних причин допомагає у впровадженні ефективних рішень. З розвитком підтримки сучасних CSS властивостей типографіки в браузерах ці проблеми будуть легше вирішуватися. До того часу, вибір правильного варіанту для вашого конкретного випадку є ключовим.
Перекладено з: What I Learned After 3 Hours of Typography Debugging