| 属性名 |
layout-grid
layout-grid-mode
layout-grid-type
layout-grid-line
layout-grid-char
|
|---|---|
| 値 |
layout-grid: <mode> <type> <line> <char>
layout-grid-mode: both | none | line | char
layout-grid-type: loose | strict | fixed
layout-grid-line: none | auto | <length> | <percentage>
layout-grid-char: none | auto | <length> | <percentage>
|
| 初期値 | auto |
| 適用可能要素 | 入力可能要素 |
| 継承 | 継承しない |
| メディア | Visual / Text? |
| サポート | e5 |
行間や文字間のスペースを調整します。IE5 で独自に実装された機能です。
<mode> には、行間(line)、文字間(char)のどちらにスペース調整を適用するかを指定します。
| 値 | 説明 |
|---|---|
| both | line と char の両方を適用する。 |
| none | 両方とも適用しない。 |
| line | 行間のみ適用する。 |
| char | 文字間のみ適用する。 |
<type> には、スペース調整の方式を指定します。半角文字と全角文字が混在した時の文字間の開け方が多少異なるようです。
| 値 | 説明 |
|---|---|
| loose | ルーズ方式。日本語や韓国語に適した方式。 |
| strict | 厳格方式。中国語に適した方式。 |
| fixed | 固定方式。 |
<line> には、行間のスペースを指定します。
| 値 | 説明 |
|---|---|
| none | 指定なし。 |
| auto | 自動算出。 |
| <length> | 行間の高さを 1.5em などの長さの単位で指定します。 |
| <percentage> | 行間の高さを 150% などのパーセントで指定します。 |
<char> には、文字間のスペースを指定します。
| 値 | 説明 |
|---|---|
| none | 指定なし。 |
| auto | 自動算出。 |
| <length> | 文字間の長さを 1.5em などの長さの単位で指定します。 |
| <percentage> | 文字間の長さを 150% などのパーセントで指定します。 |
<!DOCTYPE html> を指定した標準モードと、非標準モードで動作が変わるようです。標準モード・非標準モードを切り替えるには、文書の先頭に <!DOCTYPE html> を追記・削除するだけでなく、ブラウザキャッシュのクリアが必要なケースがあるので注意してください。
<div style="layout-grid: both fixed 20px 20px; width:300px; height:100px; border:1px solid gray"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをおん </div>