text-underline-position
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2020.
text-underline-position
は CSS のプロパティであり、text-decoration
プロパティの underline
の値で設定される下線 (傍線) の位置を指定します。
試してみましょう
構文
/* 単一のキーワード */
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: revert-layer;
text-underline-position: unset;
値
auto
-
ユーザーエージェントは、傍線を文字のベースラインの位置に配置するか、その下に配置するかを独自のアルゴリズムで決定します。
from-font
-
フォントファイルに推奨される位置についての情報があった場合、その値を使用します。フォントファイルにこの情報がない場合は、
auto
が設定された場合の動作と同様、ブラウザーが適切な位置を選択します。 under
-
文字のベースラインの下、ディセンダーを越えない位置に強制的に傍線を設定します。これは、下付き文字が多用される化学式や数式の読みやすさを確保するのに便利です。
left
-
縦書きモードでは、このキーワードは強制的に傍線をテキストの左端に配置します。横書きモードでは、
auto
と同じです。 right
-
縦書きモードでは、このキーワードは強制的に傍線をテキストの右側に配置します。横書きモードでは、
auto
と同じです。
公式定義
初期値 | auto |
---|---|
適用対象 | すべての要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
単純な例
2 つの段落の例を見てみましょう。
<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 はこのようになります。
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
の値が適切かもしれません。
:root {
text-underline-position: under;
}
仕様書
Specification |
---|
CSS Text Decoration Module Level 3 # text-underline-position-property |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
text-decoration
プロパティは、text-decoration-line
、text-decoration-color
、text-decoration-style
など、ほとんどのテキスト装飾プロパティを設定します。しかし、text-underline-position
は設定しません。