CSS3 Pre-Reference



text-underline-position

下線の位置

試す





コード

#containe {
    text-decoration-line: underline;
    text-underline-position: auto;
}

サンプル

その後(けむり)したから火がある。吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。
到底(あと)ってしまった。これは減る、しばらくしているがない。
これをFirefoxアイコン守らなければなら家内(めしびつ)まれた御馳走は人を見出(こたつ)って一間(まった上、朝は我儘(と見えてこれをかぶせたり、今日(かない)ねばよい昼ははなはだ不人望で泣き出すので正当に住んであるまい。しかもあとって行くと。その後(たび)める事やらいくら出してやれといったまま奥へ這入(はい)ったら書生の上から食物(とうてい)いての中である。

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
5.5~(変則)

パラメータ

auto | under | alphabetic | over
初期値 auto
適用 すべての要素
継承 する
レベル 3
%の解釈 -
適用メディア Vidual
参考文献 CSS Text Level 3#10.1.6. Text Underline Position: the ‘text-underline-position’ property

解説

下線の位置を指定します。

このプロパティはInternetExplorerで独自に拡張されたものですが、CSS3で公式に採用される予定です。ただし、キーワードが異なります。

auto
ブラウザ依存です。しかし横書きの場合はアルファベットのベースライン、縦書きの場合は、CJKなら右側にすべきとしています。
alphabetic
アルファベットのベースラインに揃えます。つまり、gやjなどの幾つかのアルファベットでは、下線がグリフの上をまたいでいく可能性があります。
under
横書きの場合は下に、縦書きの場合は左に下線を引きます。下線がグリフ上を跨ることはありません。
over
横書きの場合は上に(下線ですが…)、縦書きの場合は右に下線を引きます。下線がグリフ上を跨ることはありません。

トラックバック

投稿されたコメント