От автора: каждый веб-шрифт включает пустые пространства выше и ниже текста, что затрудняет управление отображением пространства в компонентах пользовательского интерфейса. Я создал инструмент Text Crop Tool, чтобы предоставить разработчикам и дизайнерам возможность удалять эти пустые пространства, от которых больше не будет зависеть высота строки, и точнее отображать компоненты. Вот как я это сделал.
Как это работает
Я добавил красную рамку вокруг этого абзаца, чтобы проиллюстрировать пространство, которое я хочу удалить.
Чтобы удалить пустое пространство, добавьте к элементу текста псевдо-элементы :before и :after, каждый с отрицательными полями. В оригинале элементы :before и :after имеют высоты, ширину и цвет фона, но не имеют отрицательных отступов.
В приведенном примере применение к псевдо-элементам отрицательных отступов устраняет нежелательное пространство. Ключевым преимуществом этого метода является то, что он удаляет верхний и нижний пробелы, сохраняя высоту строки в блоке текста с несколькими строками:
Сохраняет внутреннюю высоту строки, но убирает верхнее и нижнее пустое пространство
Поиск формулы
Экспериментируя с несколькими размерами шрифтов и отмечая смещения, необходимые для обрезки текста при каждом размере, я вывел миксин:
// Top crop: $top-crop + ($desired-line-height - $line-height-with-crop) * ($font-size-with-crop / 2)), 0) / $font-size-with-crop; // Bottom crop: $bottom-crop + ($desired-line-height - $line-height-with-crop) * ($font-size-with-crop / 2)), 0) / $font-size-with-crop;
Миксин включал два «магических числа», постоянные значения, представляющие обрезку сверху и снизу. В результате я объединил их так, чтобы формула работала независимо от размера шрифта и для выполнения расчетов ей требовалась только высота строки без единиц измерения. Но моя уверенность была разбита, когда я применил формулу к другому шрифту.
Обеспечение работы для любого шрифта
Миксин не работал, когда применялся к различным шрифтам, и я не мог понять, почему. После нескольких месяцев головной боли и экспериментов я натолкнулся на замечательную статью, описывающую Размеры шрифтов для веб. В статье Винсент Де Оливейра описывает Площадь Em.
Теперь я мог сформулировать в правильных типографических терминах то, что я намеревался сделать: обрезать площадь em до базовой линии и верхней линии заглавных букв. Однако разный шрифт имеет разное определение площади em. Поэтому «магические числа», которые работают для одного шрифта, не обязательно работают для других шрифтов.
С этим новым пониманием я создал инструмент для измерения величины обрезки, необходимой для площади em шрифта. Он выводит код для реализации этой обрезки через SCSS, LESS или Stylus.
Результатом этих усилий стал инструмент EightShapes Text Crop Tool.
Выберите в инструменте шрифт Google или загрузите пользовательский шрифт, а затем используйте ползунки для измерения нужного уровня обрезки сверху и снизу. Инструмент вычисляет свойства и формулы, просто скопируйте их и вставьте созданный миксин в исходный код SCSS, LESS или Stylus и получайте удовольствие! Это не идеально, но это намного лучше, чем раньше.
Предостережения
Обрезка площади em с помощью этой техники не является панацеей. Оказывается, шрифты (и площади em) визуализируются по-разному в разных операционных системах. Обрезав точно шрифт для Mac, мы может получить слишком обрезанный или недостаточно обрезанный шрифт в браузере на Windows. Даже на своем локальном компьютере я видел, что обрезка отклоняется на пиксель или два в зависимости от того, просматриваю ли я изображение на обычном разрешении или на мониторе с высоким разрешением.
Несмотря на эти недостатки, инструмент для обрезки текста позволил мне решить множество проблем, связанных с вертикальным выравниванием, которое ранее требовало указание размеров пикселях. Универсальность этого инструмента особенно полезна при совместном использовании с токенами пространстра в системе дизайна. Вот несколько общих случаев использования обрезки текста:
Вертикальное выравнивание иконок и текста в кнопке и обеспечение согласованного внутреннего заполнения.
Вертикальное выравнивание медиа и описательного текста в компоненте Media Object.
Три совета по обрезке текста
Вот несколько советов по использованию миксина для шрифта любой формы с помощью Text Crop Tool.
1. Используйте его только тогда, когда это необходимо.
Используйте обрезку текста только в ситуациях, которые это действительно необходимо. Не делайте следующего:
* { @include text-crop;
}
Это повлияет на все существующие псевдо-элементов :before и :after, которые вы используете, и создаст нежелательные эффекты для нетекстовых элементов.
2. Создавайте только текстовые HTML-элементы.
В большинстве случаев лучше всего применить text-crop к элементу, содержащему только текстовый контент, а не к элементу, содержащему дочерние элементы. Если у вас есть родительский элемент, содержащий текст и другой контент, попробуйте обернуть текст, который вы хотите обрезать, в span и применить миксин только к этому span.
3. Всегда проверяйте себя!
Обязательно проверьте все браузеры, которые необходимо поддерживать. Протестируйте работу миксина в разных операционных системах. Благодаря этому тестированию вы получите уверенность в том, что обрезка дает желаемый эффект.
Автор: Kevin Powell
Источник: https://medium.com/
Редакция: Команда webformyself.
