Pull to refresh

Определение высоты отступа от блока до текста

Lumber room
Awaiting invitation
Начав учиться верстать страницы, мне хотелось стать профессионалом, и тут я прочитала на хабрабаре статью, что профессионал должен уметь верстать попиксельно. Ну что ж, собравшись с силами, я решила сверстать макет пиксель в пиксель.

И тут же столкнулась с проблемой — а какую же высоту отступа указать от блока до текста? Я обратилась с этой проблемой на форум, но услышала ответ:
— Шрифты в фотошопе и браузере сильно отличаются и сделать попиксельную верстку самого текста невозможно.
— Что же делать? Как определить высоту отступа?
— На глазок — все равно результат будет везде разный.

И я засела с работой «на глазок» надолго. Я прикидывала значение отступа, ставила его и щепетильно пыталась подобрать нужную высоту. Но я не понимала, по какому принципу вычислить высоту отступа, пусть даже для одного браузера? Должен же быть какой-то алгоритм или формула? Перелопатив кучу информации, я не нашла решения. Прочитала книжку «Инлайновый контекст форматирования» — результат был тем же. Ответа не было. А я ненавижу работу с такими вот невнятностями и неточностями.

В итоге я сама нашла решение и вывела нужную формулу.

Давайте рассмотрим следующую ситуацию.
image
Какую же высоту отступа нам сделать между двумя этими надписями? Может 34px, или 30px? Верстаем — не подходит?!
А может быть вычислять нужно вот так?
image
26 пикселей. При этом, представляете сколько времени уходит на подобные выделения и создание направляющих линий?!

И 26 пикселей тоже неверный ответ!

А теперь, идем к верному ответу сами!

Для начала я решила определить, какую же реальную, а не видимую высоту занимает текст в пикселях.
Небольшой код в хтмл дал мне такую картинку:
image
Заметьте, границы желтой заливки не совпадают даже с границей заглавных букв. На самом деле шрифт занимает больше места, чем нам могло показаться с первого взгляда. А сколько именно я смогла вычислить лишь опытным путем (данных о параметрах шрифта для windows я не нашла).
Сделав скриншот, загрузив картинку в фотошоп и сильно увеличив, я записала, сколько пикселей занимает расстояние от верхней границы строчных букв до конца желтой заливки сверху (top) и расстояние от нижней границы строчных букв до конца желтой заливки снизу (bottom). Получилась следующая таблица для шрифта Arial:
Arial	Top 	Bottom
7px	2	1
8px	2 	1
9px	2	2	
10px	3	2
11px	3	2	
12px	3	2
13px	4	2
14px	4	2
15px	5	2
16px	5	2
17px	5	3
18px	5	3
19px	6	3
20px	6	3
21px	6	4
22px	6	4
23px	6	4
24px	6	5
25px	8	4
26px	8	4
27px	8	4
28px	9	4
29px	10	4	
30px	9	5
31px	10	5

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

Итак, а теперь, я представляю вашему вниманию готовую формулу:

1) Измеряем начальную высоту как расстояние от нижней границы первого строки до верхней границы строчных букв нижней строки. 34px
image

2) Теперь нам нужно отнять высоту засечек текста, которую мы и вычислили в таблице выше.

34px — 2px(bottom у 12 px) — 3px (top у 11px) = 29px

3) Теперь нам осталось учесть высоту линии.
У первой строки шрифт 12 px, а высота линии 20. Значит у нас есть дополнительные 20-12=8 пикселей. И нам нужно взять всего лишь половину от них — то есть 4 пикселя.
У второй строки шрифт 11 px, а высота линии 20. Значит у нас есть дополнительные 20-11=9 пикселей. Постойте, но ведь половина от 9 — это 4,5 пикселя, а мы не можем указывать дробные значения в коде. Что же делать?
Опытным путем я вычислила: если мы работаем с верхней частью шрифта, как в данном случае, то нужно округлить в большую сторону, то есть взять значение в 5px. А если с нижней — то в нижнюю сторону и взять значение 4px. Итак, у нас это значение 5px.

29px — 4px — 5px = 20px.

УРА! Мы вычислили реальный отступ и он оказался равен не 34, не 30, и даже не 26 пикселей. А… 20 пикселей! Теперь остается лишь указать в вашем css:
.row1{
   font-size: 12px;
   line-height: 20px;
}
.row2 {
   margin-top: 20px; /* Вот где собака зарылась! */
   font-size: 11px;
   line-height: 20px;
}

Благодаря этому алгоритму и таблице для шрифта Arial, высота текста и отступов до него совпадает пиксель в пиксель, по крайней мере в моей операционной системе и моем браузере. И, для вычисления этого параметра, мне не нужно по 5 минут пытаться подобрать значение на глазок.
И, напоследок, кому интересно:
image
Tags:
Hubs:
You can’t comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.