text-underline-position

text-underline-position は CSS のプロパティであり、text-decoration プロパティの underline の値で設定される下線 (傍線) の位置を指定します。

試してみましょう

構文

css
/* 単一のキーワード */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* 複数のキーワード */
text-underline-position: under left;
text-underline-position: right under;

/* グローバル値 */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: unset;

値

auto

ユーザーエージェントは、傍線を文字のベースラインの位置に配置するか、その下に配置するかを独自のアルゴリズムで決定します。

from-font

フォントファイルに推奨される位置についての情報があった場合、その値を使用します。フォントファイルにこの情報がない場合は、auto が設定された場合の動作と同様、ブラウザーが適切な位置を選択します。

under

文字のベースラインの下、ディセンダーを越えない位置に強制的に傍線を設定します。これは、下付き文字が多用される化学式や数式の読みやすさを確保するのに便利です。

left

縦書きモードでは、このキーワードは強制的に傍線をテキストの左端に配置します。横書きモードでは、under と同じです。

縦書きモードでは、このキーワードは強制的に傍線をテキストの右側に配置します。横書きモードでは、under と同じです。

auto-pos

auto と同じですので、代わりにそちらを使用してください。

above

強制的に傍線をテキストの上部に配置します。東アジアのテキストで使用すると、auto キーワードが同様の効果になります。

below

強制的に傍線をテキストの下部に配置します。アルファベットのテキストで使用すると、auto キーワードが同様の効果になります。

公式定義

初期値auto
適用対象すべての要素
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

text-underline-position = 
  auto                           |
  [ under || [ left | right ] ]

例

単純な例

2 つの段落の例を見てみましょう。

html
<p class="horizontal">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

<p class="vertical">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

CSS はこのようになります。

css
p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.horizontal {
  text-underline-position: under;
}

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

この例では、どちらの段落にも太い下線を引いています。横書きのテキストでは text-underline-position: under; を使用して、下線をすべてのディセンダーの下に引いています。

writing-mode を縦書きに設定した場合、必要に応じて left または right を使用して、傍線をテキストの左と右のどちらに引くか決めることができます。

ライブサンプルはこのようになります。

グローバルに text-underline-position を設定する

text-underline-position プロパティは継承され、text-decoration 一括指定プロパティでリセットされないため、グローバルレベルでこの値を設定する方が適切かもしれません。例えば、数多くの化学式や数式があり、下付き文字をたくさん使用している文書では、 under の値が適切かもしれません。

css
:root {
  text-underline-position: under;
}

仕様書

Specification
CSS Text Decoration Module Level 3
# text-underline-position-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報