предисловие
Вертикальное центрирование, которого мы обычно добиваемся, на самом деле не является вертикальным центрированием? как ты это сказал! Много раз, я часто четко и правильно реализую вертикальное центрирование, но UI/UX все равно говорит, что проблема с вашим вертикальным центрированием, а потом я присматриваюсь и кажется, что есть какие-то отклонения в визуальном эффекте, но посмотрите внимательно на код вертикального центрирования, который я реализовал, но это не проблема. Сегодня мы собираемся исследовать истоки этой интересной проблемы, ее решение и будущее типографики.
проблема найдена
Есть много способов центрирования по вертикали, здесь мы используем его в родительском элементе. display:flex;align-items:centerАтрибут вертикально центрирует дочерние элементы, как показано ниже:
Кажется, что вертикальное центрирование идеально, но вы получили отзывы и вопросы от UI/UX.
UI/UX: 咦? У вас проблема в этом вертикальном центре ~ 🥴
Разработка: Где проблема, с кодом проблем нет~
UI/UX: если вы мне не верите, посмотрите сами, верхняя половина текста на 1 пиксель больше, чем нижняя.
Разработка: Правда...😑 Ведь мне не скрыться от глаз дизайна~
И то, что мы действительно хотим, это следующее
Предварительные вопросы
Осторожные друзья, скоро вы обнаружите, что виновником является атрибут line-height текста. Тогда мы теперь используем<p>содержит три разныхfont-familyиз<span>Получил эффект, как на картинке ниже, правильноfont-sizeидентичныйfont-familyРазличные текстовые элементы будут иметь разную высоту.
Проблема найдена, первопричиной вертикального центрирования является только приблизительное вертикальное центрирование по высоте строки! В стандартном текстовом поле всегда есть дополнительное пространство над и под текстом, а дополнительное пространство, зарезервированное высотой строки по умолчанию, приводит к тому, что текст не всегда центрируется в текстовом поле. Поэтому реализуемое нами вертикальное центрирование не оправдает ожиданий, и чем больше высота строки, тем очевиднее будет проблема. В то же время разные шрифты имеют разную высоту строки по умолчанию, поэтому изменение шрифта также приведет к выравниванию текста, когда размер шрифта, высота строки и положение текстового поля остаются неизменными.
🤯 Это конец вопроса? Нет, мы пока не знаем, почему line-height именно такой и почему он должен быть именно таким. 🤷🏻♂️
Отслеживание источника
Около 140 лет назад типографика все еще использовала один лид-бокс для ручной установки шрифтов. При печати наборщики вставляют интерлиньяж в пробелы, чтобы сделать текст более читабельным. Следовательно, сумма высоты печатного текста и высоты интерлиньяжа составляет общую высоту строки.
Программное обеспечение для графического дизайна начала 80-х сохранило ту же традицию, когда люди могли добавлять нижнюю часть напрямую.leadingдля управления расстоянием между базовыми линиями, что также приводит к увеличению высоты строки. Другое программное обеспечение позволяет людям напрямую регулировать высоту строки. Например, в первой версии Photoshop, выпущенной в 1990 году, пользователи могли определятьleadingзначение, а затем добавить его к размеру шрифта. Многие инструменты также определяют расстояние между двумя базовыми линиями, называемоеline-height.
Когда Берт Бос и Хокон Виум Ли разработали первое предложение для CSS в 1989 году, сначала они все еще следовали «старым» методам печатного мира. Но вскоре они решат внести логическое и фундаментальное изменение, разделив интерлиньяж на две части и поместив его над и под каждой строкой, назвав его «половинным интерлиньяжем». почему ты хочешь сделать это? Цель состоит в том, чтобы текстовое поле выглядело единообразным.Я 3.org/TR/CSS1/#dayhou….
«половина опережения» очень сложна, чтобы избежать неровностей верхней и нижней границ, но также приносит некоторые проблемы. Каждый размер шрифта в семействе шрифтов имеет высоту строки по умолчанию. Чтобы разместить определенные символы и акценты, высота строки по умолчанию обычно устанавливается выше, чем текст, который она содержит. Увеличьте высоту строки по умолчанию, а затем добавьте два «половина интерлиньяжа», что сделает текстовое поле больше. После этой операции мы теперь сталкиваемся с самой фундаментальной причиной, почему текст не может быть центрирован по вертикали.
В течение многих лет инструменты веб-дизайна не поддерживали полуведущие технологии, поэтому многие команды обсуждали, почему дизайн экрана и макет так сильно различаются в разных браузерах. К тому же не все знают о таких сложных технических тонкостях, что часто приводит к размолвкам между дизайнерами и разработчиками 🤦🏻♂️
решение
Ручная настройка соответствующих свойств CSS
Вручную настройте соответствующие свойства CSS, но это приведет к ряду магических действий.marginилиpaddingЗначение при этом тоже случайное и только для конкретного шрифта, браузера, операционной системы. Очевидно, что это не очень хорошее решение.
Инструмент для обрезки
Выберите шрифт из инструмента или загрузите собственный шрифт, затем используйте ползунки, чтобы измерить желаемую верхнюю и нижнюю обрезку. Инструмент вычисляет свойства и формулы, просто скопируйте и вставьте сгенерированный миксин SCSS, LESS или Stylus в исходный код.
Зачем ориентироваться только на один шрифт, а не на все шрифты?
Инструмент работает, определяя отрицательные поля с помощью псевдоэлементов до и после, которые удаляют верхний и нижний пробелы, сохраняя при этом высоту строки между строками в многострочном текстовом блоке.
// Top crop:
$ top-crop +（$ desired-line-height-$ line-height-crop）*（$ font-size-with-crop / 2）），0）/ $ font-size-with-crop;
//Bottom crop:
$ bottom-crop +（$ desired-line-height-$ line-height-crop）*（$ font-size-with-crop / 2）），0）/ $ font-size-with-crop;
Конечным результатом является гибридный шрифт, который работает независимо от размера шрифта и требует только безразмерной высоты строки для выполнения вычислений. Но когда миксин применяется к другим шрифтам, он работает не так хорошо.
То, что реализует инструмент, - это обрезать Em Square до базовой линии шрифта и высоты прописной буквы, однако каждый шрифт имеет другое определение Em Square. Таким образом, «магические числа», которые работают для одного шрифта, не обязательно будут работать для другого.
новый черновик CSS
Многие люди сталкивались с подобными проблемами на ранних этапах и сообщали об этом W3C, мы не первые, кто столкнулся с этой проблемой.
Чтобы исправить проблемы, связанные с текстовым макетом CSS, Lead-trim является частью черновика встроенного макета CSS.
h1 {
text-edge: cap alphabetic;
leading-trim: both;
}
С помощью ведущей обрезки все загадочные проблемы с выравниванием, замеченные на сайте, наконец могут быть решены. Шрифты могут быть изменены без нарушения замысла дизайна.
Ниже приведен соответствующий проект атрибута ведущей обрезки (еще не норма)
| Name: | leading-trim |
|---|---|
| Value: | normal | start | end | both |
| Initial: | normal |
| Applies to: | block containers and inline boxes |
| Inherited: | no |
| Percentages: | N/A |
| Computed value: | the specified keyword |
| Canonical order: | per grammar |
| Animation type: | discrete |
| Name: | text-edge |
|---|---|
| Value: | leading | [ text | cap | ex | ideographic | ideographic-ink ] [ text | alphabetic | ideographic | ideographic-ink ]? |
| Initial: | leading |
| Applies to: | inline boxes |
| Inherited: | yes |
| Percentages: | N/A |
| Computed value: | the specified keyword |
| Canonical order: | per grammar |
| Animation type: | discrete |
Ref
Leading-Trim: The Future of Digital Typesetting
Базовая сетка 4 пикселя — настоящее время
Getting to the bottom of line height in Figma
Deep dive CSS: font metrics, line-height and vertical-align
CSS Inline Layout Module Level 3
Cropping Away Negative Impacts of Line Height
css-inline Leading control at start/end of block #3240
Для более качественного контента буддийская система обращает внимание на паблик аккаунт: [Front-end iron egg]