Пиксельный перфекционизм

[basist]

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

Значит верстаю я, верстаю.. и всё-то мне кажется, что недостаточно всё ровненько.. то там буковка вылезет, то здесь интервал между словами большой..

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

 

Или вот, например просто текст. первое и последнее слово совпадает, в середине непонятно что. 

Почему такое происходит и как это решать? И нужно ли решать..

Ведь делать

#slovo_1{margin: 0 2px 0 23px; letter-spacing: -0.08em;}#slovo_2{margin: 0 1px 0 0; letter-spacing: 0.11em;}и т.д.

как минимум глупо и, по-моему, неоправданно..

[Xenia Wanger]

Только вчера столкнулась с такой проблемой. Хотелось бы, действительно, услышать совет опытных людей. А то мне начальство сказало забить на значения в psd макете и подгонять, чтобы с картинкой было похоже 

 

Как раз похожая ситуация, как на втором скриншоте

Edited December 12, 2013 by Xenia Wanger

[Great Rash]

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

[npofopr]

а как вы это делаете? строку на строку накладываете что ли?

[bvvell]

а как вы это делаете? строку на строку накладываете что ли?

Есть браузерный плагин pixel perfect, там картинку загружаешь и она поверх верстки накладывается

[basist]

я делал просто слоем картинку, а сверху верстал с opacity: 0.7

про плагин не в курсе, буду знать, спасибо)

[swandev]

Как уже сказали, шрифты вы никогда не сделаете 100% 1в1. В любом случае у всех разные ОС,браузеры и т.п

 

Если где-то это требуют, то я шрифты ровняю по первой букве, ну и отступы соответственно.

[Zverushka]

На изображениях в 1м посте все сверстано идеально - пиксель перфектно.

Если подгонять строки (каждую строку) из 1й картинки - это уже будет говноверстка =)....

[npofopr]

ой. я подумал, что вы такой эффект текста делаете :-D типа тень. ахах.

про pixelPerfect знаю конечно. Вот этим пользуюсь

[swandev]

Кстати где-то видел эту анкетку, как тестовое задание на удаленку в вебстудию

[Ludwig Voltman]

Я большим опытом похвастаться не могу, но если верстаю, то без попиксельного задротства. Главное чтобы блоки были на месте. В статье про чек-лист верстки фигурировало такое требование: погрешность в пределах пяти пикселей. Мне кажется этого достаточно.

Пиксельперфект увы, не работает на новых версиях мозиллы(или фаербага?), поэтому использую javascript modulargrid.

[basist]

Кстати где-то видел эту анкетку, как тестовое задание на удаленку в вебстудию

 

http://www.csssr.ru 

[cyklop77]

Пиксельперфект увы, не работает на новых версиях мозиллы(или фаербага?

 

существует аналогичный плагин для googlechrome

[Ludwig Voltman]

 

Пиксельперфект увы, не работает на новых версиях мозиллы(или фаербага?

 

существует аналогичный плагин для googlechrome

 

Да, есть. Но он привязан к браузеру, а скриптом можно и в других браузерах смотреть макет.

[swandev]

 

 

Пиксельперфект увы, не работает на новых версиях мозиллы(или фаербага?

 

существует аналогичный плагин для googlechrome

 

Да, есть. Но он привязан к браузеру, а скриптом можно и в других браузерах смотреть макет.

 

А чем хром плох? Какая разница где будет окно с версткой

[Ludwig Voltman]

Хром хорош. Но как в других браузерах проверять? Взять, например, формы. В одном браузере нормально, в другом какие-то странные отступы появляются, которые надо исправлять.

 

 

 

 

Пиксельперфект увы, не работает на новых версиях мозиллы(или фаербага?

 

существует аналогичный плагин для googlechrome

 

Да, есть. Но он привязан к браузеру, а скриптом можно и в других браузерах смотреть макет.

 

А чем хром плох? Какая разница где будет окно с версткой

 

[Zverushka]

Но как в других браузерах проверять?

 

в других не надо  - если глаз не заметил, что блок уехал - значит нормально все.

[swandev]

 

Хром хорош. Но как в других браузерах проверять? Взять, например, формы. В одном браузере нормально, в другом какие-то странные отступы появляются, которые надо исправлять.

 

 

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

[Z1gnet]

я работал в конторе в которой по дефолту шла опция пиксель перфект. тестеры придерались ужас как. и диз на верстку накладывали, и браузер на браузер... но при все при этом были своеобразные правила решения спорных вопросов. к примеру, то что у вас на первом скрине - там все отлично, просто дизайнер немного промахнулся. мы это называли - "привел к общему виду" . тоесть если есть однотипные блоки, то выравниваешь первые 2 (или первый и последний, по ситуации) и все, у вас получается ровнее чем в дизайне. по поводу шрифтов. вы никогда не подгоните идеально ширину текста, даже если в одно браузере сойдется - то в другом нет. вам нужно выставить font-size и line-height правильный, это прежде всего. конечно если по задумке увеличен отступ между буквами или словами - то нужно его тоже сделать. а со шрифтом такая фигня получается потому что дизайнеры любят ставить всякие эффекты на текст, типа sharp, что в версте повторить не получится.

Заключение: во всем должен быть здравый смысл, выравнивать каждую строчку и гамнокодить это очень плохо. так что не партесь, вы все сделали хорошо