css - 垂直方向のテキストリズムを安定させるための最良の方法は何ですか？

Question

相対単位の方が絶対単位よりも優れていると聞きましたが、ブラウザが間違って四捨五入し、計算が難しい場合があります。役立つツールを知っていますか？

SASS/コンパスを使用しました。とても簡単ですが、完璧ではありません…</ p>

Answer 1

コメントによると、「縦のテキストリズム」はライングリッドを指しているようです。ライングリッドは、主に印刷メディアや複数列のテキストレイアウトに関連しているため、CSSでは一般的に無視されてきました。基本的に、物事をライングリッドにスナップさせる方法は、同じ単位を使用して、垂直方向に一貫したサイズを使用することです。たとえば、行の高さをem単位で設定する場合は、それらの単位で高さと垂直方向の余白も設定します。画像をライングリッドに合わせるには、高さをem単位で指定したコンテナに画像をラップします。または、すべての垂直方向のサイズ設定をpx単位で行います。

em寸法が最終的にはピクセルに変換されるため、丸めによって問題が発生する可能性があるのは事実です。したがって、行の高さをに設定1.3emし、画像コンテナの高さをに設定すると3.9em、後者は前者の正確に3倍のピクセル数ではなく、1ピクセル以下になる可能性があります。これが重要で、ピクセルの使用を検討している場合は、CSSピクセルがデバイスの物理ピクセルに対応している必要はないことに注意してください。

現在編集者ドラフトとしてのみ存在するCSSライングリッドモジュールには、実際のライングリッドを使用するためのプロパティがあります。-webkit-これらは、プレフィックスを付けてChromeに部分的に実装されています。ライングリッドが必要な場合は、コンテンツをグリッドにスナップしようとするコードを追加しても問題はありません。Chromeでは次のようになります。

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