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

エ・ビスコム・テック・ラボ
2008-07-11 10:35:02
  • このエントリーをはてなブックマークに追加

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

 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での表示 Firefox 3での表示
div{
-moz-border-start: solid 5px red;
-moz-border-end: solid 5px blue;
}
こんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちはこんにちは
ブラウザで表示を確認する

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

Firefox 3での表示 Firefox 3での表示
div{
direction: rtl;
-moz-border-start: solid 5px red;
-moz-border-end: solid 5px blue;
}
ブラウザで表示を確認する

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

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]