text-underline-position

文字へ引いた下線を、横書きでは文字の近くか全体の下、縦書きでは左右のどこへ置くか決めるプロパティ。横書きと縦書きの見本を同時に見ながら、値ごとの位置の違いを確かめます。

CSSの`text-underline-position`とは？

横書きの下線位置と縦書きの傍線をauto・from-font・under・left・rightで切り替えながら、初期値、継承、使い方を初学者向けに解説します。

遊んでみよう

gyp 文字日本語

左は横書き、右は縦書き。1つの値を両方で比べます

auto：ブラウザーが書字方向に合う位置を選びます

CSS

.element text-underline-position: auto;

値のパターン

下線の位置 text-underline-position

text-underline-positionの構成要素

01auto | from-font

位置を自動で選ぶ

autoはブラウザーへ任せます。from-fontは書体の推奨位置を使い、情報がなければautoと同じように決まります。

02under

文字全体の下へ置く

横書きの下線をディセンダーより下側へ置きやすくし、下付き文字や複雑な字形との重なりを減らします。

03left | right

縦書きの左右を選ぶ

縦書きでは傍線を文字の左側または右側へ置きます。横書きではどちらもautoと同じ扱いです。

04under right

書字方向ごとの位置を組み合わせる

underとleft・rightを組み合わせ、横書きの下側と縦書きの左右を1つの宣言で指定できます。

早見表

初期値はautoです。下線が表示されている要素へ、自動位置・文字全体の下・縦書きの左右を表すキーワードを指定します。

01autoブラウザーが下線の位置を選ぶ初期値

02from-font書体が持つ推奨位置を使う書体に合わせる

03under横書きで文字全体の下へ置く重なりを減らす

04left縦書きで文字の左側へ置く傍線・左

05right縦書きで文字の右側へ置く傍線・右

06under left横書きは下側、縦書きは左側へ置く組み合わせ

07under right横書きは下側、縦書きは右側へ置く組み合わせ

よくある使い方

化学式の下線を下付き文字から離す

underを使い、下付き文字が多い化学式や数式で下線が文字へ重なりにくい位置を選びます。

.formula { text-decoration-line: underline; text-underline-position: under; }

日本語文書の書字方向へ合わせる

横書きでは下側、縦書きでは右側へ線を置く指定を文書やセクション単位で継承させます。

:root:lang(ja) { text-underline-position: under right; }

縦書きラベルの傍線を左へ置く

writing-modeを縦書きにし、leftで傍線を文字の左側へ固定します。

.vertical-label { writing-mode: vertical-rl; text-decoration-line: underline; text-underline-position: left; }

ポイント

横書きと縦書きの両方で、線と文字の重なりを確かめる。

text-underline-positionは下線の位置を指定するため、text-decoration-lineがunderlineでなければ変化が見えません。初期値はautoで、すべての要素に適用でき、子要素へ継承されます。値の変化は離散的です。underは横書きの下線を文字全体の下へ置きますが、書体によってはディセンダーや記号との重なりを完全には防げません。leftとrightは縦書きで傍線の側を選び、横書きではautoと同じ扱いです。underまたはfrom-fontはleft・rightと組み合わせられます。このプロパティはtext-decoration一括指定に含まれないため、一括指定を使っても初期値へ戻らず独立して継承されます。また、この要素から始まる下線には作用しますが、祖先が引いた下線の位置を子要素側から変えることはできません。text-underline-offsetを併用すると、ここで決めた基準位置から距離を追加調整できます。