Комментарии 54
Очень правильная статья, я тоже постоянно везде замечаю кривое центрирование, но, к сожалению, вряд ли что-то изменится в ближайшем будущем, так как по моим прикидкам 90-95% людей этого просто не замечают пока не нарисуешь направляющие линии. Не знаю почему так, но факт - всем плевать
Не знаю почему так
Наверное потому что
в норме у здорового человека возможна разница в длине нижних конечностей до 0,5 см
Аналогично с остальными частями тела и общей симметрией.
А не надо рисовать никаких направляющих. Речь как раз о визуальном восприятии, а направляющими вы пытаетесь подменить понятия))
Аналогия - заваленный горизонт в фотографии. Можно выставить линию горизонта по уровню, но если у вас одна часть кадра "визуально перегружена", то у зрителя будет создаваться стойкое ощущение заваленного горизонта. Азы композиции, как бы))
Один раз надо было быстро перенести отсканированную растровую электрическую схему в Autocad и сделать в ней существенные изменения. Цифровой оригинал неизвестно было у кого искать, у заказчика было только ТЗ в виде мутноватого скана. Надо было отразить внесенные изменения, приложить схему к паспортам изделия, ну и на производство передать тоже - в бумажном виде. Автоматически распознать не получилось, делать самому с нуля слишком долго. Скопировал в модель растровый рисунок и обвел его примитивами, потом этот рисунок удалил. Если смотреть на мониторе, то кажется что все жутко криво и косо, отклонения от прямых углов и от параллельности адские, но на распечатанном чертеже было вообще незаметно. Впоследствии еще несколько модификаций было.
В дизайне есть такая бесполезная штука как визуальный вес. Когда человек видит объекты определённой формы как будто они не по центру когда по границе они отцентрированы. Например лого youtube. Тогда например полезно расчитать вес не по граничной рамке а по другим алгоритмам. Так же с шрифтами. Неравномерные шрифты легче читаются. Про это наука есть. Просто всё центрировать чтобы всё было центрировано - подход дилетанта.
Хабр:
О господи, кто нибудь подарите им прибор для балансировки стрелочек!
Это ж Хабр, ему можно. Вы вспомните его первый логотип :-D
Это случайно не firefox? был у меня такой же баг, который встречался только в лисе.
Да Хабр даже редиректы при авторизации через oauth правильно настроить не может, а на дизайн и подавно нет времени.
Омг. Как развидеть статью? Я раньше не видел проблем, а теперь меня везде в интерфейсах раздражает то же самое
xkcd-1015: Kerning
Нет, надо чтобы на всю жизнь въелось: https://method.ac/type/
Управление стрелками на клавиатуре.
И ещё в копилку: Can't Unsee
В университете студент подходит к бородатому профессору и спрашивает:
— Добрый день! Извините, а можно вас спросить?
— Конечно, спрашивайте, молодой человек.
— Скажите, профессор, вот Вы, когда спать ложитесь, бороду на одеяло или под одеяло кладёте?
Профессор после небольшой паузы отвечает:
— А вот, знаете, молодой человек, ответить я вам не смогу. Как-то не задумывался.
— Ну, извините, пожалуйста.
Через неделю профессор с кругами под глазами встречает в коридоре того же студента и хватает за грудки:
— Ну ты и сволочь! Неделю уже спать не могу — и так неудобно, и так неудобно!
Давно слышал шутку про центрирование в css (примерно звучала так: в css есть 12 способов центрировать div, и ни один не работает), а тут этой теме посвящен целый пост, браво!
Эта проблема встречается так часто, что я стал думать, что это такой новомодный дизайнерский стиль. Будто специально смещают центрирование.
Спасибо, что не скупился на примеры! Тоже мозолит глаза когда что-то не по центру в приложении, которое разрабатываем. На счет логотипа Apple и кнопок на GitHub'е думаю что это фича — иногда асимметрия выглядит более выигрышно, поскольку мы привыкли ее видеть в реальной жизни.
Надо ли говорить, что в $mol таких проблем нет, благодаря использованию MDD?
И, кстати, правильное центрирование блока в CSS выглядит так:
margin: auto
Но что-то пошло не так
Hidden text
Это не правильное центрирование. Для подобного "центрирования" вам необходимо обойти довольно серьёзные ограничения:
Для того чтобы свойство
margin: autoпозволило бы нам соответствующим образом выровнять элемент, нужно, чтобы были бы выполнены следующие условия:
Заданы ширина и высота элемента.
Задано свойство элемента
position: absolute.
Самый простой работающий способ в CSS:
{
display: flex;
justify-content: center;
align-items: center;
}Не знаю, что вы цитируете, но этот текст устарел не менее чем на 10 лет. А ваш код может приводить к обрезанию контента. Перечитайте внимательнее доки по css-flexbox модели.
Не знаю, что вы цитируете
https://habr.com/ru/companies/ruvds/articles/494716/
Проблема с флексбоксами обычно как раз противоположная - не хотят они никак контент обрезать, так и норовят растянуться до максимума (название технологии как бы обязывает).
кто меншье)
{
display: grid:
place-items: center;
}
Пожалуй это можно занести в анналы:
Сложнейшие проблемы программирования:
- Инвалидация кеша
- Именование
- Нентрирование
Справедливости ради, во многих приведенных вами примерах было корректное центрирование либо по телу, либо по обводу шрифта.
К сожалению иногда и это смотрится криво.
Отличная статья, спасибо
Тоже постоянно вижу эту боль, пусть и держу ее внутри.
Как говорится, хочешь сделать плохо другу - научи его видеть плохой кернинг
Проблема очень актуальная и та еще головная боль для верстальщика, но корень проблемы в том, что всем плевать, особенно конечному пользователю. Людей нисколько не смущает в край уехавшая верстка, отвалившиеся шрифты, цветовые схемы и прочее, лишь бы данные отображались, кнопки нажимались. Современный тренд на ребрендинги так же усугубляет ситуацию, люди очень быстро привыкают, что не важно как и что выглядит, через время все равно поменяется...
Но главный нюанс в том, что такие вещи не то что беспокоят, а хотя бы оказываются замеченными в основном специалистами. Для обывателя это вещи из разряда "всю жизнь этого не замечал, но вот прочитал пост, и боже, как теперь это развидеть".
P.S. Параграф с "неправильным" и "исправленным" чекбоксом немного расстроил, ибо у дизайнера он как раз был "правильный". Центрирование это не всегда выравнивание по границам, порой это выравнивание по ключевой точке/элементу аля центру тяжести, с чем дизайнер как раз вполне себе справился, а в "исправленной" версии этот принцип нарушен.
Посмотрел, практически всё можно либо не заметить (я специально вглядывался, чтобы понять, что же по мнению автора статьи не так с отдельными изображениями), либо посчитать легкой асимметрией, то есть самостоятельным дизайном, с которым все хорошо, так и задумывалось. Дизайнерский перфекционизм?...
Вы затронули очень обширный пласт. Давайте для начала разберёмся с центрированием текста по вертикали в банальной кнопке. Сместить для какого-то конкретного шрифта не является проблемой. Но в какую сторону нужно смещать? Если центрировать по заглавным буквам, то надпись будет казаться ниже. Если центрировать по прописным, то надпись будет казаться выше. Т.е. нужно где-то посередине. Но как именно?
Выравнивание иконок с текстом по baseline (нижний край текста без выступающих вниз "закорючек") выглядит очень даже хорошо. Не факт, что выравнивание иконок с центровкой какой-то части текста, без учёта baseline, выглядит лучше. Поэтому часть примеров в статье весьма спорные.
Что интересно никто даже не упомянул что в случае смены языка например на арабский то вся эта центровка вообще лесом)
Крутой совет - использовать изображение вместо шрифтов и прочее. А потом удивляемся почему у нас приложоение весит 1 гиг, а функционала на 10кб. Компрьютер спосбоной расчитать траекторию сотен ракетиза мгновенеие меньше секунды, не может открыть эксель. Неплоха иметь графические эти навороты за нулевую стоимость.
Но реальность такова, что я сейчас не могу пользоваться обычным вай-фай дома из-за перегрузки частот. Хоть сайт обычного сбербанка конечно похарашел. Но грузиться уже ощутимое время. С вот этой дебильной приветсвенной страницей. С учетом того, им стало пользоваться сложнее из-за, в целом изменения для меня - отрицательные.
Сейчас появляется стойкое чувство, что консоль - лучший человеко-машинный интерфейс. А не вот эти интерфейс от Татьяныча, не превращаюсь я в деда?
Примеры шикарные и богатые, на любой вкус и цвет конечно
На прошлой неделе как раз с центрированием иконок боролся на проекте. Ещё часто раздражают кривые анимации иконок (пример с иконкой Хабра). Или замена одной иконки на другую. Вот вроде бы обе иконки 20х20 px, но при смене каждая иконка нарровит сместить текст вправо/влево. Бесит.
Сложнейшая проблема компьютерных наук: центрирование