Photoshop - CSS-правило letter-spacing

Reading time ~3 minutes

Наконец-то у меня дошли руки и пришло время разобраться с палитрой “Символ” в Photoshop.

До сегодняшнего дня о ней знал не полностью. Конечно, с такими полями, как “Шрифт”, “Размер шрифта”, “Цвет шрифта”, “Межстрочное расстояние” я был знаком. Но вот столкнулся в одном из psd-макетов с неизвестным мне полем.

Предположительно, оно должно было означать расстояние между буквами строки. То самое, за которое в CSS отвечает правило letter-spacing.

Еще более загадочным для меня было значение этого поля: -25. То, что знак минуса означает “ужать” слова в строке, можно было догадаться. Но вот что за единицы измерения применяет Photoshop в данном случае? Как мне перевести это значение в CSS? В каких единицах - пикселях или em?

Ответы на эти вопросы в русскоязычной части Интернета я не нашел. Не спорю, может и плохо искал. Но обнаружил их в англоязычной части. Вольный пересказ одной замечательной статьи, посвященной этому вопросу, я привожу в данном небольшом обзоре.

Итак, есть psd-макет, на котором для шрифтов применено загадочное значение -25 в таком же, не менее загадочном, поле:

Letter-spacing в Photoshop

Смотрим внимательно на панельку “Символ”. Здесь собраны воедино все свойства, отвечающие за прорисовку шрифта на макете.

Верхние два поля - “Georgia” и “Regular”. Здесь все просто и понятно - семейство шрифта и его начертание. В CSS данные значения оформляются через правила font-family и font-weight.

Второй ряд из двух полей, со значениями 22px и 24px. Думаю, здесь также не должно возникнуть вопросов. 22px - размер шрифта, 24px - интерлиньяж, межстрочное расстояние. За первое свойство в CSS отвечает правило font-size, за второе - line-height.

Перехожу к третьему ряду. Первое поле в нем - насколько я могу судить - предназначено для единиц измерения, в которых будет производиться изменение межбуквенного расстояния. Второе поле, как вы уже могли догадаться, это межбуквенное расстояние.

В CSS имеется аналогичное правило, которое называется letter-spacing. Не стоит путать его с очень похожим правилом word-spacing. Разница между ними очевидна, хотя сфера применения одинакова - строка текста. Word-spacing задает расстояние между словами, а letter-spacing - расстояние между буквами.

Вернемся к нашим баранам. Видно, что в поле стоит значение -25. О том, как перевести его в CSS, расскажу немного позже. А пока кратко пробежимся по остальным строкам палитры “Символ”.

В четвертом ряду располагаются два поля, назначение которых в оригинале пишется так: “Vertical scalar tool” и “Horizontal scalar tool”. Можно догадаться, что с помощью этих настроек можно масштабировать (растягивать или сжимать) буквы как по-вертикали, так и по-горизонтали.

В последнем (пятом) ряду находится поле изменения расстояния для индексов, и поле цвета шрифта (букв).

Вот, в принципе, и все описание. Краткое - но к чему растягивать его? Полное описание с картинками, полезное для себя, нашел в этой статье.

Перейду к вопросу, который остался открыт - как преобразовать значение letter-spacing в Photoshop в аналогичное правило CSS?

Что за единицы измерения использует Photoshop в данном случае, честно сказать, не знаю. Какие-то загадочные, свои собственные, наверное. Но это и не интересно, если что. Нужно лишь перевести их в одну из двух наиболее популярных единиц измерения CSS - px или em.

Перевод осуществляется с помощью формул. Эти формулы были выведены опытным путем автором статьи - Justin Marsan. На своей собственной практике я пару раз проверил их и пришел к выводу, что они верны.

Формула перевода значения letter-spacing Photoshop в em:

X / 1000

где X - это значение letter-spacing в Photoshop. В конкретном случае оно будет равно:

-25 / 1000 = -0.025em

Формула перевода значения letter-spacing Photoshop в пиксели px:

X * Y / 1000

где X - это значение letter-spacing в Photoshop, Y - размер шрифта там же. То есть, сначала значение межбуквенного расстояния умножается на размер шрифта, а затем полученное значение делиться на 1000.

В конкретном случае формула и результат будет следующим:

-25 * 22 / 1000 = -0.55px

На этом, думаю, что все сказано.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке