Как лучше всего стабилизировать вертикальный ритм текста?

Question

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

Я использовал SASS/Compass. Это хорошо и очень легко, но не идеально...

Answer 1

Согласно комментарию, "вертикальный ритм текста", по-видимому, относится к линейной сетке. Линейная сетка, как правило, игнорируется в CSS, в основном потому, что она в основном относится к печатным СМИ и к многостолбцовой разметке текста. По сути, способ заставить вещи привязываться к линейной сетке - это использовать согласованные размеры в вертикальном направлении, используя те же единицы измерения. Например, если вы установите высоту строки в em единицы, установить высоту и вертикальные поля в этих единицах тоже. Чтобы изображение поместилось в линейную сетку, оберните его в контейнер с высотой в em единицы. В качестве альтернативы, сделайте все вертикальные размеры в px единицы.

Это правда, что округление может вызвать проблемы, так как em размерные вещи в конечном итоге преобразуются в пиксели. Так что, если вы установите высоту строки в 1.3em и в высоте контейнера изображения до 3.9emпоследний может не дать ровно в 3 раза больше пикселей, чем первый, но на один пиксель меньше или больше. Если это важно и вы планируете использовать пиксели, помните, что пиксель CSS не обязательно должен соответствовать физическому пикселю в устройстве.

В модуле CSS Line Grid, который в настоящее время существует только как черновик редактора, есть свойства для использования реальной линейной сетки. Они были частично реализованы в Chrome, с -webkit- префикс. Если требуется линейная сетка, вряд ли повредит добавить код, который пытается привязать контент к сетке и может сделать это в Chrome:

body {
  line-grid: yourNameForLineGrid;
  line-snap: baseline;
  -webkit-line-grid: yourNameForLineGrid;
  -webkit-line-snap: baseline;
}