x
 
Игорь Г.
27 января 2014

Лет шесть назад один арт-директор научил меня выравнивать строки в инпутах/табах/кнопках/любых контролах и элементах интерфейсов по вертикали таким образом: необходимо центрировать строку относительно строчных букв. Таким образом по массе строка будет располагаться в центре объекта.

Объяснение логичное, и я взял его за правило.

Но с тех пор много воды утекло. Я применяю это правило и по сей день, но подобных применений не вижу от других специалистов. На картинке пример — строки в инпутах и кэпшн на кнопке авторизации скайпа прибиты к низу, как мне кажется это жутко некрасиво и неправильно.

Хотелось бы услышать ваше мнение относительно выравнивания текста в контролах. Спасибо.



Ваш арт‑дирек­тор был прав, что  «гори­зон­таль­ным стеб­лем» строки слу­жат строч­ные буквы, и при ком­по­новке отдель­ных тек­сто­вых бло­ков, как пра­вило, можно пре­не­бречь рас­ту­щими вверх и вниз «листьями» — про­пис­ными бук­вами и вынос­ными эле­мен­тами. «Сте­бель» огра­ни­чен снизу базо­вой линией, сверху — высо­той строч­ных букв, не име­ю­щих вынос­ных эле­мен­тов, напри­мер х или п. Верх­нюю линию так и назы­вают — линия строч­ных или высота строч­ных, по‑англий­ски — x‑height.

В зави­си­мо­сти от задачи «стебли» вырав­ни­ва­ются по верх­ней, сред­ней или ниж­ней линии:

Конечно, ни один из этих спо­со­бов нельзя счи­тать универсальным.

Пре­не­бре­гать про­пис­ными и вынос­ными эле­мен­тами не все­гда пра­вильно. Чем ближе мас­штаб к отдель­ным сло­вам и стро­кам, тем больше нюан­сов. Иде­аль­ные законы пере­стают дей­ство­вать, как в физике:

Если эле­мент вёрстки имеет мас­штаб слова, он дол­жен при­ни­мать во вни­ма­ние его ана­то­мию. Обра­тите вни­ма­ние, как авто­граф зани­мает отве­дён­ное ему место в пря­мо­уголь­нике на заставке «Везер‑ченела»:

Строки в полях Скайпа стоят низ­ко­вато. Но слова, выров­нен­ные по вашему рецепту без учёта вынос­ных и про­пис­ных, вста­нут слиш­ком высоко:

На мой вкус:

Поле ввода — одно­строч­ный эле­мент управ­ле­ния, то есть легко ста­но­вится в тек­сто­вую строку:


Поделиться
Отправить

Комментарии

Алексей Рытов
27 января 2014

Игорь, программисты и верстальщики обычно не думают об оптическом выравнивании, дли них существует только математическое выравнивание — margin: 10px 0; Большинство дизайнеров смотрят на это спокойно или не имеют достаточного влияния на кодеров (слушай, уйди со своими мелочами, сроки поджимают). И только если дизайнер хороший и имеет власть над разработчиком (например, на уровне авторитета), тогда о таких мелочах думают и делают.

Лично мне физически тяжело смотреть на неправильное выравнивание. Но я отдаю себе отчет, что 99% пользователей никогда не заметят этого и даже не поймут, если им ткнуть пальцем.

Евгений Лысый
27 января 2014

Лучше всего данное вашим арт-директором правило дополнить еще одним действием — после выравнивания опустите текст на 1-2 пк в зависимости от размера поля. Текст в этом случае будет смотреться более гармонично.

При этом если сумма этих расстояний нечетная (поле высотой 20 пк, а строчные — 7 пк), то текст надо опускать еще ниже:


27 января 2014

Пример центровки «стеблей» строк:

Артём Петренков
27 января 2014

Алексей, не вижу проблемы. Margin — это инструмент, а поскольку высота блока и высота шрифта заранее известны, ничего не мешает сделать не margin: 10px 0; а margin: 9px 0 10px; или что-то вроде того.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

9 3




Недавно всплыло

1 Как выжить в дистанционной работе. Инструменты на удалёнке 4 Практика: формулировка полезного действия 9 Что делать, если меня, технического директора, потихоньку отстраняют от дел? 1