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

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

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

 テキストの書字方向に合わせて罫線を表示するのと同じように、マージンとパディングで余白を挿入することも可能だ。現在のところ、FirefoxとSafariが対応している。

 Firefoxでは-moz-margin-startと-moz-padding-startでテキストの文頭の側に、-moz-margin-endと-moz-padding-endプロパティでテキストの文末の側にマージンとパディングを挿入する。

 一方、Safariでは-webkit-margin-startと-webkit-padding-startプロパティでテキストの文頭の側にマージンとパディングを挿入する。テキストの文末の側にマージンとパディングを挿入する-webkit-margin-endと-webkit-padding-endはサポートしていない。

 たとえば、次のように記述すると、テキストの文頭の側に50ピクセルのマージンとパディングを挿入する。なお、ここではdirectionプロパティを利用して、テキストの書字方向を上の

では「左から右」に、下の
では「右から左」に設定している。

Firefoxでの表示 Firefoxでの表示
Safariでの表示 Safariでの表示
div{
-moz-margin-start: 50px;
-moz-padding-start: 50px;
-webkit-margin-start: 50px;
-webkit-padding-start: 50px;
border: solid 2px greenyellow;
}

div#ltr{
direction: ltr;
}

div#rtl{
direction: rtl;
}
ブラウザで表示を確認する

 また、Firefoxの-moz-margin-endと-moz-padding-endを利用して、テキストの文末の側に50ピクセルのマージンとパディングを挿入すると次のような表示になる。

Firefoxでの表示 Firefoxでの表示
div{
-moz-margin-end: 50px;
-moz-padding-end: 50px;
border: solid 2px greenyellow;
}

div#ltr{
direction: ltr;
}

div#rtl{
direction: rtl;
}
ブラウザで表示を確認する

テキストの書字方向に合わせてリストの余白を調節する

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