Начав учиться верстать страницы, мне хотелось стать профессионалом, и тут я прочитала на хабрабаре статью, что профессионал должен уметь верстать попиксельно. Ну что ж, собравшись с силами, я решила сверстать макет пиксель в пиксель.
И тут же столкнулась с проблемой — а какую же высоту отступа указать от блока до текста? Я обратилась с этой проблемой на форум, но услышала ответ:
— Шрифты в фотошопе и браузере сильно отличаются и сделать попиксельную верстку самого текста невозможно.
— Что же делать? Как определить высоту отступа?
— На глазок — все равно результат будет везде разный.
И я засела с работой «на глазок» надолго. Я прикидывала значение отступа, ставила его и щепетильно пыталась подобрать нужную высоту. Но я не понимала, по какому принципу вычислить высоту отступа, пусть даже для одного браузера? Должен же быть какой-то алгоритм или формула? Перелопатив кучу информации, я не нашла решения. Прочитала книжку «Инлайновый контекст форматирования» — результат был тем же. Ответа не было. А я ненавижу работу с такими вот невнятностями и неточностями.
В итоге я сама нашла решение и вывела нужную формулу.
Давайте рассмотрим следующую ситуацию.
Какую же высоту отступа нам сделать между двумя этими надписями? Может 34px, или 30px? Верстаем — не подходит?!
А может быть вычислять нужно вот так?
26 пикселей. При этом, представляете сколько времени уходит на подобные выделения и создание направляющих линий?!
И 26 пикселей тоже неверный ответ!
А теперь, идем к верному ответу сами!
Для начала я решила определить, какую же реальную, а не видимую высоту занимает текст в пикселях.
Небольшой код в хтмл дал мне такую картинку:
Заметьте, границы желтой заливки не совпадают даже с границей заглавных букв. На самом деле шрифт занимает больше места, чем нам могло показаться с первого взгляда. А сколько именно я смогла вычислить лишь опытным путем (данных о параметрах шрифта для windows я не нашла).
Сделав скриншот, загрузив картинку в фотошоп и сильно увеличив, я записала, сколько пикселей занимает расстояние от верхней границы строчных букв до конца желтой заливки сверху (top) и расстояние от нижней границы строчных букв до конца желтой заливки снизу (bottom). Получилась следующая таблица для шрифта Arial:
Теперь мы знаем сколько пикселей занимают параметры шрифта.
Но помимо этого есть еще одно важное понятие — высота линии. Высота линии также участвует в формировании отступов.
В нашем примере верхний шрифт имеет размер 12 пикселей и его высота линии 20 пикселей.
Нижний шрифт 11 пикселей с такой же высотой линии 20 пикселей.
Текст всегда выравнивается посередине высоты линии, значит при учете ее в расчетах мы должны брать половину высоты линии.
Итак, а теперь, я представляю вашему вниманию готовую формулу:
1) Измеряем начальную высоту как расстояние от нижней границы первого строки до верхней границы строчных букв нижней строки. 34px
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:
Благодаря этому алгоритму и таблице для шрифта Arial, высота текста и отступов до него совпадает пиксель в пиксель, по крайней мере в моей операционной системе и моем браузере. И, для вычисления этого параметра, мне не нужно по 5 минут пытаться подобрать значение на глазок.
И, напоследок, кому интересно:
И тут же столкнулась с проблемой — а какую же высоту отступа указать от блока до текста? Я обратилась с этой проблемой на форум, но услышала ответ:
— Шрифты в фотошопе и браузере сильно отличаются и сделать попиксельную верстку самого текста невозможно.
— Что же делать? Как определить высоту отступа?
— На глазок — все равно результат будет везде разный.
И я засела с работой «на глазок» надолго. Я прикидывала значение отступа, ставила его и щепетильно пыталась подобрать нужную высоту. Но я не понимала, по какому принципу вычислить высоту отступа, пусть даже для одного браузера? Должен же быть какой-то алгоритм или формула? Перелопатив кучу информации, я не нашла решения. Прочитала книжку «Инлайновый контекст форматирования» — результат был тем же. Ответа не было. А я ненавижу работу с такими вот невнятностями и неточностями.
В итоге я сама нашла решение и вывела нужную формулу.
Давайте рассмотрим следующую ситуацию.
Какую же высоту отступа нам сделать между двумя этими надписями? Может 34px, или 30px? Верстаем — не подходит?!
А может быть вычислять нужно вот так?
26 пикселей. При этом, представляете сколько времени уходит на подобные выделения и создание направляющих линий?!
И 26 пикселей тоже неверный ответ!
А теперь, идем к верному ответу сами!
Для начала я решила определить, какую же реальную, а не видимую высоту занимает текст в пикселях.
Небольшой код в хтмл дал мне такую картинку:
Заметьте, границы желтой заливки не совпадают даже с границей заглавных букв. На самом деле шрифт занимает больше места, чем нам могло показаться с первого взгляда. А сколько именно я смогла вычислить лишь опытным путем (данных о параметрах шрифта для 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
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 минут пытаться подобрать значение на глазок.
И, напоследок, кому интересно: