グリッドで配置された文字の間隔や行間を指定する
CSSの書き方
layout-grid-line:値 ;
layout-grid-char:値 ;
|
|||||||||||||||||||||||||||||||||||||||||
解説
「layout-grid-line」プロパティおよび「layout-grid-char」プロパティは、グリッドの間隔を調整することにより、文字の間隔や行間を調節するためのスタイルシートです。「layout-grid-mode」プロパティが指定されている要素に対して有効です。
IE独自のプロパティとなっており、InternetExplorer以外のブラウザでは使用できません。
値(none)
「layout-grid-line」は行間を調節するプロパティ、「layout-grid-char」は文字間を調節するプロパティです。「layout-grid-line:none;」、「layout-grid-char:none;」としたときは、初期値ですので、対象の要素内の文字列はグリッドで配置されません。通常の表示になります。
値(auto)
「layout-grid-line:auto;」、「layout-grid-char:auto;」としたときは、グリッドの間隔は対象の要素内の文字列の中で、最も大きい文字に合わせて、自動的に間隔が決まります。
値(サイズ指定)
両プロパティで指定できる間隔は、サイズで指定することも可能です。ただし、「layout-grid-char」プロパティに設定するサイズは、後に解説する「layout-grid-type」の値によって、何を示すかが異なります。
「layout-grid-type」の値を「strict」または「fixed」としたときは、「layout-grid-char」プロパティのサイズはグリッドのマス目の横幅を表します。一方、「layout-grid-type」の値が「loose」のときは、値は文字の間隔を表します。
CSS/HTMLサンプル
p { layout-grid-mode:both; layout-grid-line:0.5em; layout-grid-char:0.5em; width:500px; background:#ffdff9; }
段落要素内の文字列をグリッド配置 サンプル
