【48-2】ライン装飾が文字を横切るかを決める text-decoration-skip-ink

最終更新日:2019年07月29日  (初回投稿日:2019年07月29日)

text-decoration-skip-inkプロパティは、テキストのライン装飾が テキストを横切る時、そのまま線を引くか、テキストの部分の線をスキップするか決めます。

これは、text-decoration-skipプロパティの値だった「ink」がプロパティとして独立したもの。
W3C の Text Decoration Module Level 4(ドラフト)で仕様として上がっています。
というわけで、まだ勧告されてはいませんが一応書いておきます。(2019年7月記)

参考:
Text Decoration Module Level 4 | W3C First Public Working Draft
text-decoration-skip-ink - CSS | MDN

text-decoration-skip-inkプロパティの値

text-decoration-skip-inkプロパティの値は

text-decoration-skip-inkプロパティの値
キーワード autoがデフォルト値。
none
グローバル値 text-decoration-skip-ink: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-decoration-skip-ink: initial; 継承した親の値を解消しデフォルト値に戻す
text-decoration-skip-ink: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 する 適用できる要素 すべての要素

それぞれのキーワードは、以下の意味があります。

auto
デフォルト値です。
テキストのアセンダーやディセンダーを横切らないように、ラインを中断しながら引きます。
英文字の小文字の h や k のように x より上辺より上に出る部分をアセンダー(Ascender)といいます。
逆に g や p のように下にはみ出る部分をディセンダー(Descender)といいます。
上線がアセンダーを横切らないように、下線がディセンダーを横切らないように線を引くのが text-decoration-skip-inkプロパティのデフォルトというわけ。
none
下線も上線も、ライン装飾は何もスキップしません(切れ目なくラインが付く)

text-decoration-skip-inkプロパティの指定サンプル

text-decoration-skip-inkプロパティの値を指定してみます。
今のところ Chrome、Opera、Android標準ブラウザ が実装しているようです。
(参考:Can I use 2019年7月記)

<ins>要素(下線が引かれます)で試しています。

text-decoration-skip-ink: 未指定(= auto) pやqやgのディセンダーに注目

text-decoration-skip-ink: none pやqやgのディセンダーに注目

下は Chrome 75(on MacOS)でのプレビューです。

文字にかからないようにラインが途切れるのがデフォルトなんですね。
文字にかかるのを見慣れているので変な感じ。でも確かにスキップされたほうが読みやすいかもね。

サンプルのソースコードはこちら。

<div class="mihon">
<p>
<b>text-decoration-skip-ink: 未指定(= auto)</b>
<ins>pやqやgのディセンダーに注目</ins></p>
<p>
<b>text-decoration-skip-ink: none</b>
<ins class="sample1">pやqやgのディセンダーに注目</ins></p>
</div>

<style>
.mihon {
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em 1.4em;
	}
.mihon p {font-size:1rem; margin:0 0 1em}
.mihon p:last-child {margin-bottom:0}
.mihon b {display:block; color:#579961}
.mihon ins {font-size:2rem}
.sample1 {
	text-decoration-skip-ink:none}
</style>

これ、auto(下線がアセンダーやディセンダーをスキップする)がデフォルトなので、あんまり使う機会が無さそう。
どうしても下線を切れ目なく引きたい時に「none」を使うってかんじですかね。

次回予告

次回は、text-underline-positionプロパティについて。
これは、text-decorationプロパティの値が「underline」になってるときに、下線の「位置」を指定するプロパティです。
といってもまだ実装しているブラウザは無いようですが、Text Decoration Module Level 4 でも削除される予定が無いようなので記事にしておきます。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.