text-decoration-skip-ink:装飾線が文字を通過する祭の処理を指定する
初期値 | auto |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
text-decoration-skip-inkプロパティの説明
text-decoration-skip-ink
は、装飾線が文字のアセンダーやディセンダーを通過する祭の処理を指定します。既定値では、可読性を損なわないように装飾線を区切って表示しますが、これをスキップせずに一直線に表示させることもできます。
文字に装飾線を加える場合は、まず初めにtext-decoration-line
で線の種類を指定します。初期値では、これがnone
になっているため、色や太さを変えても表示されません。
text-decoration-skip-ink
は装飾線に関するプロパティですが、一括指定のtext-decoration
には含まれない機能です。
text-decoration-color
:装飾線の色text-decoration-line
:装飾線の種類text-decoration-style
:装飾線の形状text-decoration-thickness
:装飾線の太さ
text-decoration-skip-inkに指定できる値
- auto
- 装飾線は、文字の
x-height
からはみ出す部分を通過する祭に、上書きしてしまわないようにスキップします。これは書体の一部がアセンダーやディセンダーを含む表現である場合に機能します。 - all
- 装飾線は、文字の上を通過する際に必ずスキップします。これは
auto
の機能が適用対象外の言語やフォントにも同様の効果を期待するものです。 - none
- 装飾線は、アセンダーやディセンダーの上を通過する祭も中断せずに一直線に引かれます。
text-decoration-skip-inkの使い方とサンプル
text-decoration-skip-ink
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;
text-decoration-skip-ink: none;
/* グローバルキーワード */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: unset;
text-decoration-skip-inkの実例
それでは実際にtext-decoration-skip-ink
プロパティの書き方を見ていきましょう。以下の例は、英文書体の小文字でx-height
からはみ出す部分を用意し、装飾線を加えた時の表示です。
装飾線がアンダーラインの場合は、文字に触れる部分をスキップしますが、打ち消し線はそのまま一直線に引かれます。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background: #fff;
}
section > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: .5rem 0 0;
font-size: 3rem;
}
p > span {
margin-right: 1rem;
}
p > span:nth-child(1) {
text-decoration-line: underline overline;
text-decoration-style: solid;
text-decoration-color: currentcolor;
text-decoration-thickness: auto;
}
p > span:nth-child(2) {
text-decoration-line: underline overline;
text-decoration-style: wavy;
text-decoration-color: blue;
text-decoration-thickness: 2px;
}
p > span:nth-child(3) {
text-decoration-line: line-through;
text-decoration-style: double;
text-decoration-color: #f00;
text-decoration-thickness: from-font;
}
.tdsi_auto > p {
text-decoration-skip-ink: auto;
}
.tdsi_all > p {
text-decoration-skip-ink: all;
}
.tdsi_none > p {
text-decoration-skip-ink: none;
}
HTML
<div class="samp_box">
<section class="tdsi_auto">
<h2>text-decoration-skip-ink: auto;</h2>
<p>
<span>xpkgf</span>
<span>xpkgf</span>
<span>xpkgf</span>
</p>
</section>
<section class="tdsi_all">
<h2>text-decoration-skip-ink: all;</h2>
<p>
<span>xpkgf</span>
<span>xpkgf</span>
<span>xpkgf</span>
</p>
</section>
<section class="tdsi_none">
<h2>text-decoration-skip-ink: none;</h2>
<p>
<span>xpkgf</span>
<span>xpkgf</span>
<span>xpkgf</span>
</p>
</section>
</div>
text-decoration-skip-inkに関連するCSSプロパティ
テキスト関連 | |
---|---|
text-align | ボックスに含まれる内容の横位置の揃え方を指定する |
text-align-last | ボックスに含まれる内容の最後の行を揃える位置を指定する |
text-combine-upright | 一文字分の空間に挿入する文字の組み合わせを指定する |
text-decoration | 文字の装飾線に関する値を一括で指定する |
text-decoration-color | 文字に加えられた装飾線の色を指定する |
text-decoration-line | 文字に加えられた装飾線の種類を指定する |
text-decoration-skip-ink | 装飾線が文字を通過する祭の処理を指定する |
text-decoration-style | 文字に加えられた装飾線の形状を指定する |
text-decoration-thickness | 文字に加えられた装飾線の太さを指定する |
text-emphasis | テキストに付加する圏点、傍点、脇点に関する値を一括で指定する |
text-emphasis-color | テキストに付加する圏点、傍点、脇点の色を指定する |
text-emphasis-position | テキストに付加する圏点、傍点、脇点の位置を指定する |
text-emphasis-style | テキストに付加する圏点、傍点、脇点の記号を指定する |
text-indent | テキストの一行目に挿入するインデントの幅を指定する |
text-justify | テキストの行端揃えに対して均等割り付けの方法を指定する |
text-orientation | 縦書きモードの文字の向きを指定する |
text-overflow | 行からテキストが溢れている状態の表現方法を指定する |
text-shadow | 文字に影(ドロップシャドウ)を付ける |
text-transform | テキストの大文字・小文字の表記を指定する |
text-underline-position | 文字の下に引かれる装飾線の位置を指定する |