Как вычислять отступы от символов

[userlogoff]

Никогда не задумывался об отступах между элементами серьезно (потому что не верстальщик). Ну, конечно, margin от padding отличал, но вот недавно столкнулся с тем, что необходимо было перевести шаблон из PSD html\css с точностью до пикселя. "Раньше я делал как:" (с) Федор Лошадкин) - открываешь шаблон в фотошопе и выделяешь, к примеру, от верхней границы начертания символа (глифа) до нижней границы верхнего блока (каламбур, но см. рис.). На рисунке это зеленая линия (вроде по-умному это называется верхняя линия шрифта). Затем смотришь высоту выделения и вбиваешь ее в отступ. Браузеры же думают иначе (и логичнее), и любой текст обрамляется рамкой, откуда они и начинают высчитывать отступы (синия стрелка).

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

Ну и напоследок вопрос - как в фотошопе сделать выделение текста цветом (как, например, в Ворде - выделяешь цветом и сразу понятно, где идет верхняя рамка. Так можно в принципе быстро вычислить отступ - выделил цветом и посчитал)

Вот как-то так.

Спасибо заранее.

[Vlad]

Со шрифтами есть определённая проблемка. Изначально буквы печатались на металлической литере, которая смачивалась краской и затем оставляла оттиск на бумаге. Так вот, высота это литерной площадки для разных шрифтов одного размера одинакова. А вот высота самих букв для разных шрифтов может различаться. Поэтому если взять шрифт Arial, Times и Courier, установить у них один размер, допустим, 20 пикселов, то визуально размер символов будет разный. То, что у вас обозначено синей стрелкой и есть литерная площадка, установить её размеры легко и они будут одинаковы независимо от выбранной гарнитуры. С зелёной стрелкой всё не так, этот размер зависит от применяемого шрифта. Тут только метод Подборского применять.

[userlogoff]

Со шрифтами есть определённая проблемка. Изначально буквы печатались на металлической литере, которая смачивалась краской и затем оставляла оттиск на бумаге. Так вот, высота это литерной площадки для разных шрифтов одного размера одинакова. А вот высота самих букв для разных шрифтов может различаться. Поэтому если взять шрифт Arial, Times и Courier, установить у них один размер, допустим, 20 пикселов, то визуально размер символов будет разный. То, что у вас обозначено синей стрелкой и есть литерная площадка, установить её размеры легко и они будут одинаковы независимо от выбранной гарнитуры. С зелёной стрелкой всё не так, этот размер зависит от применяемого шрифта. Тут только метод Подборского применять.

Когда я попытался вычислить расстояние между верхней границей начертания шрифта и границей литерной площадки то у меня получались разные расстояния для различных кеглей. Где-то 3пикселя, где-то 4. Неужели для каждого кегля мне нужно будет что-то вроде таблицы таких расстояний, чтобы вычислять правильные отступы?

Ну и вообще, какой способ-то является самым оптимальным, если надо пиксель-в-пиксель отступы между блоком и шрифтом сделать? А то я как дурак делаю скриншоты, сравниваю расстояния и потом разницы заношу в css...

[Vlad]

Ещё забыл про методы сглаживания шрифтов, которые в итоге тоже дают разброс в 1-2 пиксела, они для каждой системы и браузера могут различаться.

Вам нужен плагин PixelPerfect для Firefox.

[userlogoff]

Ещё забыл про методы сглаживания шрифтов, которые в итоге тоже дают разброс в 1-2 пиксела, они для каждой системы и браузера могут различаться.

Вам нужен плагин PixelPerfect для Firefox.

Со сглаживанием я сначала мучился, но потом просто начал отключать в фотошопе (Anti-Alias None).

В итоге, т.к. я работаю в Опере (и использую DragonFly вместо FireBug)? шрифты выглядят одинаково (Опера не сглаживает).

Edited September 6, 2011 by userlogoff

[Vlad]

У вас задача сделать шаблон с точностью до пиксела в Опере?

[userlogoff]

У вас задача сделать шаблон с точностью до пиксела в Опере?

Нет С точностью до пикселя во всех популярных _современных_ браузерах. Firefox 5,6, Opera > 9.50, Chrome, IE >= 8

Разве это нереальная задача?

P.S. Есть, кстати, js-библиотека crosspixel, которую можно сделать как javascript букмарклет, делает то же самое, что и PixelPerfect, только кроссбраузерно

Edited September 6, 2011 by userlogoff

[Vlad]

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

[Zverushka]

Та же проблема. Вычисляю высоту от одного блока до самой верхней границы заглавной буквы. Допустим 108 пикселей.

Размер шрифта 18 пикселей. Замеряю параметры шрифта, вижу, что на самом деле высота 17 и 1пиксель сверху теряется, он невидим. Поэтому уменьшаю разница до 107 пикселей. Вроде все правильно, но, путем наложения прозрачной страницы на макет фотошопа - вижу, что отступ должен быть еще на 1 пиксель меньше. Откуда он берется? Сами буквы один в один - как в фотошопе - одинаковые по высоте. Маргины и паддинги обнулены, границы нет, высота линии равна размеру шрифта. Пока у меня есть формула - от отступа в фотошопе отнять 1 пиксель. Хотелось бы иметь более четкое понимание, куда делся 2й пиксель.

Блин, сижу и улыбаюсь. Я поняла). В хтмл тоже высота видимого шрифта 17 пикселей (хоть и указано 18) и при высоте линии 18 пикселей - у нас появляется еще один лишний пиксель сверху и отодвигает шрифт дальше. Поэтому формула - взять отступ и отнять 2 пикселя . Сейчас верстка пойдет быстрее, а то полчаса сижу и проставляю циферки, чтобы аккуратно все стало), терь точно знаю, что ставить.

Edited April 19, 2013 by Zverushka

[Zverushka]

Все равно все не то, нужна просто таблица для каждого шрифта. Пока достоверно известно, что Arial 18пикселей - 5 верхний вынос, 3 нижний вынос. Если бы знать эти выносы для каждого шрифта - стало бы очень легко верстать. Пока не могу найти таблицы, на крайняк буду составлять свою...

[Zverushka]

Для Ариал (очень легко делается - хтмл таблица с разными шрифтами, скриншот, а потом в фотошопе пиксели мерить).

Arial Goggle chrome Windows 7.

Arial Top  Bottom
8px 2  1
10px 3 2
12px 3 2
14px 4 2
16px 5 2
18px 5 3
20px 6 3
22px 6 4
24px 6 5
26px 8 4
28px 9 4
30px 9 5

7px 2 1
9px 2 2 
11px 3 2 
13px 4 2
15px 5 2
17px 5 3
19px 6 3
21px 6 4
23px 6 4
25px 8 4
27px 8 4
29px 10 4 
31px 10 5

Edited April 19, 2013 by Zverushka

[Zverushka]

Как вычислить отступ между двумя блоками с разными шрифтами?

Рассмотрим ситуацию

<div><h1>текст</h1></div>

<div><p>текст</p></div>

h1 {

font-size: 18px;

line-height: 20px

}

p {

font-size: 11px;

line-height: 20px

}

Алгоритм. Замеряем высоту блока от нижней границы строчной буквы h1 (без всяких хвостиков по базовой линии) до верхней границы строчной буквы p (не включая хвостики). Допустим это 100px.

Итоговая настоящая высота между блоками:

100px - 3px (нижнее значение в моей таблице на 18пиксель шрифте) - 1px (половина от разницы между разницой размера шрифта и высотой линии (20-18) - 3px (верхнее значение в моей таблице соответсвующее 11 пкс шрифту) - 5пикселей ( половина от разницы между размером шрифта и высотой линии (20-11) с округлением в большую сторону)

Итого 100 -3 - 1 -3 -5 = 88пикселей.

Если разница между размером строки и размером шрифта нечетная - то лишний пиксель мы прибавляем для отступа сверху - по моим наблюдениям.

[Zverushka]

Наткнулась на очень интересную инфу

http://www.cs.tut.fi...a/x-height.html

Используя ее я так понимаю можно создать програмку (н-р онлайн), вычисляющие отступы.

Edited October 17, 2013 by Zverushka

[advokatua]

Стесняюсь спросить ребята. А вам доплачивают за это?

Разные движки по своему рендерят и отображают многие элементы, в чем тогда состоит суть такой идеальной подгонки?

У вас задача сделать шаблон с точностью до пиксела в Опере?

Нет С точностью до пикселя во всех популярных _современных_ браузерах. Firefox 5,6, Opera > 9.50, Chrome, IE >= 8

Мне такое даже во сне не снится, а кто-то еще и сделать хочет

Впринципе, чудеса бывают. Надо просто верить

Edited October 20, 2013 by advokatua