Статьи

О верстке вертикального ритма

Ритм в теории музыки — соотношения длительностей
звуков (нот) в их последовательности.

— Википедия

В вебе вертикальный ритм можно охарактеризовать соотношениями вертикальных размеров визуальных элементов и отступов между ними.

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

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

В общем случае, строчный блок — это прямоугольник с минимально возможными размерами, в который можно вписать элемент.

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

При форматировании и отрисовке страницы, браузер рассчитывает размеры строчного блока для каждого элемента, исходя из совокупности его CSS-свойств.

Расчет интересующей нас высоты линейного блока происходит по следующему алгоритму:

  1. Определяется высота каждого строчного блока в линейном блоке.

  2. В соответствии со свойством vertical-align строчные блоки выстраиваются по вертикали.

  3. Определяется высота линейного блока как расстояние от верхней границы самого верхнего строчного блока до нижней границы самого нижнего блока.

Следует помнить, что пустые строчные блоки так же влияют на расчет высоты линейного блока, поскольку, несмотря на отсутствие содержимого, имеют внутренние и внешние отступы (padding и margin), границу (border), высоту строки (line-height), а также заданные размеры (width и height).

Таким образом, значимыми CSS-свойствами для расчета высоты линейного блока являются:

  • padding-top, padding-bottom

  • margin-top, margin-bottom

  • border-top, border-bottom

  • height

  • font-size

  • line-height

  • vertical-align

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

Padding, margin, border

Свойства padding-top, padding-bottom, margin-top, margin-bottom, border-top и border-bottom не увеличивают высоту строчного блока на собственное значение, однако учитываются при расчете высоты линейного блока.

Height

Жестко заданное значение свойства height задает фиксированную высоту строчного блока. При этом стоит учитывать то факт, что высота блока не изменится даже в том случае, когда содержимое не помещается в указанные пределы.

Line-height и font-size

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

Важно понимать, что свойства line-height и font-size связаны между собой понятием интерлиньяжа.

В CSS, интерлиньяж — это разница между размером шрифта и вычисляемым значением line-height. Эта разница в виде свободного пространства распределяется сверху и снизу от отображаемых глифов поровну (дробные значения округляются до целых). Образованные части называются половинным интерлиньяжем.

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

Vertical-align

Свойство vertical-align смещает строчные блоки внутри линейного блока по вертикали, «растягивая» его высоту

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

При верстке вертикального ритма хорошим тоном считается использование техники reset css, которая помогает убрать нежелательное влияние стилей, заданных в браузерах по-умолчанию. Это, в свою очередь, влечет за собой необходимость разработчику самостоятельно задавать значения для свойств, относящихся к размеру шрифта и отступам.

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

Пример из жизни

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

Для определения требуемых стилевых правил воспользуемся упомянутым выше (или любым другим) генератором вертикального ритма.

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

Причина проблемы в выравнивании по базовой линии (навязано набором правил из reset css) и фиксированном line-height (определен генератором). Уменьшение размера шрифта ведет к увеличению половинного интерлиньяжа и к смещению второго строчного блока вниз, что, в свою очередь, приводит к увеличению высоты линейного блока.

Для решения проблемы можно переопределить значение line-height для второго элемента, согласовав его с нижней границей первого блока.

Ссылки по теме

Генераторы вертикального ритма:

http://topfunky.com/baseline-rhythm-calculator/
http://drewish.com/tools/vertical-rhythm
http://toki-woki.net/p/Boks/
http://baselinecss.com/

Рекомендуемые к прочтению статьи о верстке вертикального ритма:

http://www.alistapart.com/articles/settingtypeontheweb
http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.1/
http://24ways.org/2006/compose-to-a-vertical-rhythm
http://thegrids.ru/literature/31
http://habrahabr.ru/blogs/typography/78322/

Реклама
Стандартный

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s