layout-grid

layout-grid は、グリッドの指定をまとめて行う時に使います。 「layout-grid-mode」→ 「layout-grid-type」→ 「layout-grid-line」→ 「layout-grid-char」 の順で指定します。（IE独自プロパティ）

「layout-grid-mode」の値（行・文字グリッドの有効・無効）

Value（値）

both
初期値 両方とも有効にする
none
両方とも無効にする
line
行グリッド「layout-grid-line」のみ有効にする
char
文字グリッド「layout-grid-char」のみ有効にする

「layout-grid-type」の値（テキストをグリッドに合わせる）

Value（値）

loose
初期値 「layout-grid-char」で指定されたの値が適用され幅を空けて表示される
strict
英数字はそのままで全角文字・半角カナをグリッドに合わせる
fixed
全ての文字をグリッドに合わせる

「layout-grid-line」の値（行グリッドの高さ）

Value（値）

none
初期値 高さを指定しない
auto
最も大きな文字に合わせて高さ(縦書きの場合は幅)が決められる
数値＋単位
数値＋単位（px、em、ex、pt、mm、cm、in、pc）で指定
数値+％
親ボックスに対する割合を指定

「layout-grid-char」の値（文字グリッドの幅）

Value（値）

none
初期値 幅を指定しない
auto
最も大きな文字に合わせて幅(横書きの場合は高さ)が決められる
数値＋単位
数値＋単位（px、em、ex、pt、mm、cm、in、pc）で指定
数値+％
親ボックスに対する割合を指定

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { layout-grid: both fixed 15px 15px; }
   p.test2 { layout-grid: both fixed 30px 30px; }
  </style>
 </head>
 <body>
   <p class="test1">（文章）</p>
   <p class="test2">（文章）</p>
 </body>
</html>

display

ABCDEFGHIJKLMNOPQRSあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん安似宇衣於加機久計己左之寸世曽太知州天止ｱｲｳｴｵｶｷｸｹｺ

ABCDEFGHIJKLMNOPQRSあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん安似宇衣於加機久計己左之寸世曽太知州天止ｱｲｳｴｵｶｷｸｹｺ

上に戻る