Выравнивание элементов по базовой линии

В процессе вёрстки макета страниц разработчики встречаются с типовой задачей — выровнять по базовой линии элементы строки, которым установлен различный размер шрифта (см. пример). Нарушить выравнивание по базовой линии достаточно просто, если элементам задать CSS-свойство overflow со значением hidden или float со значением right или left.

Иногда для решения этой задачи применяется неправильная методика, которая заключается в использовании CSS-свойств margin или padding (см. пример). Однако выравнивание по базовой линии нарушается, если странице задать масштаб 125% или 150%. Это связано с тем, что при изменении масштаба веб-браузер пропорционально изменяет значения margin и padding. Если они получаются дробными числами, то выполняется округление до целого, что в некоторых случаях приводит к нарушению выравнивания.

Универсальное решение задачи заключается в обеспечении целостности базовой линии для любого масштаба страницы и используемых стилей, что достигается только с использованием технологии Flexbox. Для этого родительский контейнер элементов строки сначала следует сделать flex-контейнером с помощью CSS-свойство display со значениями flex или inline-flex. Затем такому контейнеру нужно явно установить выравнивание контента по базовой линии, используя CSS-свойство align-items со значением baseline (см. пример). В таком случае свойство oveflow:hidden не влияет на выравнивание по базовой линии.

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

Задача выравнивания базовых линий в ячейках таблицы

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

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

Учитывая, что базовая линия формируется исходя из характеристик максимального размера шрифта inline-элементов, предлагается следующее решение этой задачи:

  1. Определяем максимально допустимый размер шрифта, используемый в контенте ячеек.
  2. В каждую выравниваемую ячейку добавляется элемент, содержащий спецсимвол, не имеющий ширины (например, "\200b"). Этому спецсимволу устанавливается размер шрифта, определенный в п. 1.

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

На практике задача решается так:

  1. Среди выравниваемых элементов определяется такой, которому задан наибольший размер шрифта, например 26px.
  2. Создается новый класс со следующими свойствами:
    .baseline:before {
       content: '\200b';
       display: inline-block;
       width: 0;
       /* здесь задается наибольший размер шрифта среди 
       выравниваемых блочных элементов */
       font-size: 26px; 
    }
    Примечание: можно использовать другое имя в соответствии со стандартом разработки.
  3. Устанавливается класс на корневые элементы ячеек, участвующие в выравнивании (см. пример).