テキストの書字方向に合わせて罫線や余白を挿入する--FirefoxとSafariのCSS

テキストの書字方向に合わせて罫線を表示する

　Firefoxは、Firefox 3から-moz-border-startと-moz-border-endというプロパティをサポートした。これらはテキストの書字方向に合わせて罫線を表示するプロパティで、-moz-border-startでは文頭の側に、-moz-border-endでは文末の側に罫線を表示する。

　たとえば、-moz-border-startと-moz-border-endで罫線を表示すると次のように表示される。日本語のテキストは左から右に書き進むため、-moz-border-startで指定した赤色の罫線は左側に、-moz-border-endで指定した青色の罫線は右側に表示される。

Firefox 3での表示

div	{
	-moz-border-start: solid 5px red;
	-moz-border-end: solid 5px blue;
	}

<div>
こんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちは
</div>

※ブラウザで表示を確認する

　directionプロパティを「rtl」と指定して、テキストの書字方向を「右から左」に設定すると、赤色の罫線が右側に、青色の罫線が左側に表示される（ただし、書字方向の設定を実際の文字の表示に反映させるには、unicode-bidi:bidi-overrideを指定しなければならない）。

Firefox 3での表示

div	{
	direction: rtl;
	-moz-border-start: solid 5px red;
	-moz-border-end: solid 5px blue;
	}

※ブラウザで表示を確認する

テキストの書字方向に合わせてマージンとパディングを挿入する