2週間前に投稿

Styling Real Underlines

2019年9月3日

この記事は約 5 分で読めます。

3.5

新しいCSSプロパティで
下線のスタイルを設定してみました。

two new CSS properties

  • text-underline-offset 
    下線の位置を制御します。
  • text-decoration-thickness 
    下線、上線、および線の太さを制御します。
a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}

サンプルコードでemユニットを
使用していることに気付くでしょう。
この仕様では、ピクセルではなく
フォントを使用して、フォントに合わせて
太さを調整することを
強く推奨しています。

Example displayed in supported browsers

text-decoration-thickness: .125em;
text-underline-offset: 1.5px;
Great green gobs of greasy, grimy gopher guts

a {
  text-decoration: none;
  border-bottom: #EA215A 0.125em solid;
}

この偽の下線は、文字「g」のディセンダーの
下に明確にあることに注意してください。

これらのプロパティは既にSafariに含まれており、
Firefox 70に含まれています。

Microsoft Edgeの Chromiumへの移行により、
最終的に cross browser
text-decoration-style プロパティが
サポートされるようになります。

このプロパティは、
solid (the default), 
doubledotteddashed, and wavy.
のオプションを提供します。
これらの新しいプロパティを組み合わせると、
さまざまな可能性が広がります。

text-decoration-skip-ink

text-decoration-skip-ink プロパティは、
上線や下線が文字のアセンダーや
ディセンダーを通過するときに
どのように引くのかを指定します。

  • none 下線と上線は、
    アセンダーとディセンダーの部分を含め、
    テキストコンテンツの全体に渡って引かれます。
  • auto 既定値です。
    下線と上線は文字に接したり
    近づいたりしない部分にのみ引かれます。
    つまり、文字を横切ろうとするところで中断されます。

defaultでは、
ブラウザは次のように、
キャラクターの「ink」が
下線と交差する領域を「skip」します。

この動作を変更して、
text-decoration-skip-inknoneに設定することで、
下線/上線に強制的に文字を通過させることができます。

text-decoration-skip-ink: auto | none;

Example displayed in supported browsers

text-decoration-skip-ink: auto;
Great green gobs of greasy, grimy gopher guts

text-decoration-skip-ink: none;
Great green gobs of greasy, grimy gopher guts

Example CodePen

text-decoration-skip-ink
サポートしていないブラウザ
CodePenのResult
以下のような囲み枠が表示されます。

Heads up: It doesn’t look like your browser supports
text-decoration-skip-ink!
Check Can I use for current browser support.
Maybe try opening this CodePen in a different browser that supports
text-decoration-skip-ink?

See the Pen text-decoration-skip-ink example by Andy Adams (@andyadams) on CodePen.

Can I use – Browser Support

This browser support data is from Caniuse.

Can I Use text-decoration? Data on support for the text-decoration feature across the major browsers from caniuse.com.

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Styling Real Underlines