CSS text-underline-positionプロパティ：underlineの基準となる位置の指定

定義と使い方

text-underline-position プロパティは、text-decoration で設定された下線（underline）の基準位置を指定します。

下線がテキストのどの部分を基準に描画されるかを明示的に設定できるため、視認性を高めるのに役立ちます。

基本例

形式構文

値

text-underline-positionプロパティの値
`auto`	ブラウザは独自のアルゴリズムを使用して、アルファベットのベースライン（baseline）、またはベースラインの下に線を配置します。
`from-font`	フォントファイルに推奨される位置に関する情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、ブラウザが適切な位置を選択し、auto（自動）に設定された場合と同様に動作します。
`under`	要素のテキスト内容の下側の端（例えば、下線がアルファベットの `g`、`j`、`p`、`q`、`j` のように、文字のベースライン（baseline）の下にはみ出す部分の下端）に配置されます。
`left`	縦書きモードでは下線の基準位置は `under` と同様になりますが、テキストの左側に配置されます。横書きモードでは `auto` の値と同様になります。
`right`	縦書きモードでは下線の基準位置は `under` と同様になりますが、テキストの右側に配置されます。横書きモードでは `auto` の値と同様になります。

ご確認ください
text-underline-position プロパティで設定された下線の元の位置から、間隔を広げたり狭めたりすることができます。
下線の元の位置から間隔を調整するには、text-underline-offset プロパティを使用してください。

構文

CSS

/* 単一キーワード値 */
text-underline-position: auto;
text-underline-position: from-font;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* 2つのキーワード値 */
text-underline-position: from-font left;
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: revert-layer;
text-underline-position: unset;

形式定義

text-underline-positionプロパティの形式定義
初期値	`auto`
適用要素	すべての要素
継承	はい
アニメーション	いいえ

活用例

以下は text-underline-position プロパティをテキストに適用する際の実践的な例です。これらの例では、単一キーワード値と 2 つのキーワード値を組み合わせた使い方の両方を扱っています。

単一キーワード値の使用

under 値は、要素のテキスト内容の下側に配置されます。下付き文字を多用する化学式や数式の可読性を確保するのに役立ちます。以下は、デフォルトで設定される auto 値と under 値の違いを明確に示しています。

HTML

<div class="example-box">
    <div class="label">text-underline-position: auto;</div>
    <p class="auto-underline">
        Velocity: v<sub>avg</sub> = d / t
    </p>
</div>

<div class="example-box">
<div class="label">text-underline-position: under;</div>
    <p class="under-underline">
        Velocity: v<sub>avg</sub> = d / t
    </p>
</div>

CSS

.example-box {
    font-size: 28px;
    border: 1px solid;
    padding: 1em 1em 0;
}
.example-box + .example-box {
    margin-top: 0.5em;
}
.auto-underline {
    text-decoration: underline;
    text-underline-position: auto;
}
.under-underline {
    text-decoration: underline;
    text-underline-position: under;
}
.label {
    font-size: 16px;
    color: #555;
    margin-bottom: 4px;
}

2つのキーワード値の使用

text-underline-position プロパティは、2 つのキーワード値を組み合わせて使用することができます。これら 2 つのキーワード値を使用する際には注意点があります。以下の形式構文を改めて確認してみましょう。

2 つのキーワード値を使用する際には、以下のような規則が適用されます。

2 つのキーワード値に auto 値を含めることはできません。
2つのうち1つのキーワード値は、必ず from-font または under 値である必要があります。
残りの1つのキーワード値は、left または right 値である必要があります。
半角スペースで区切って 2 つのキーワード値を使用することができ、キーワードの順序は問いません。

これら 2 つのキーワード値が適用される規則は以下の通りです。

from-font と under：横書きと縦書きの両方のモードに適用されます。
left と right：縦書きモードにのみ適用されます。

以下の例で確認してみましょう。