血統の森: Homeweb実験小屋CSS3ウェブブラウザ実装メモLine Decoration (CSS Text Decoration 3)

xreaの広告です。

hosting by xrea.com

Line Decoration (CSS Text Decoration 3)

作成:
更新:

CSS2.2においてtext-decorationプロパティーは、線を引く(下線・上線・打ち消し線)または点滅させるとされているが、CSS Text Decoration Module Level 3においてtext-decorationプロパティーは、線の種類や色を指定する略式記法として再定義され、拡張された。

なお、text-decoration-skipプロパティーについては at-risk扱いなので、ここでは取り上げない。

また、CSS/HTMLコードについてはベンダー接頭辞のために冗長になってしまうので、一部省略して記載していることをあらかじめ断っておく。

対応状況

property IE Edge Firefox Blink WebKit
text-decoration △ (*1)△ (*1)△ (*1)△ (*2)
text-decoration-line ×××△ (*2)
text-decoration-color ×××△ (*2)
text-decoration-style ×××△ (*2)
text-underline-position△ (*3)△ (*3)×××

text-decoration

上がCSS3の個別プロパティーをそれぞれ指定、下がCSS3の略式プロパティーで一括指定したものである(CSS3対応が完全ならば、上下同じレンダリング結果になる)。

互換性のテスト

互換性のテスト

coding

.line1 {
    color: steelblue;
    text-decoration: underline;
    -webkit-text-decoration-color: brown;
    -webkit-text-decoration-style:wavy;
    text-decoration-color: brown;
    text-decoration-style: wavy;
}
.line21 {
    color: steelblue;
    -webkit-text-decoration: underline wavy brown;
    text-decoration: underline wavy brown;
}
...
<p class="line1">互換性のテスト</p>
<p class="line21">互換性のテスト</p>

blinkについて

CSS2.1に定義されているblinkについては、現在の主要なブラウザーでは点滅しないようになっている。CSS Text Decoration 3仕様訳2.1節によると、

テキストを点滅させる(可視と不可視の間で交互に)。適合ユーザーエージェントは単にテキストを点滅させなくてもよい。テキストを点滅させないことが、WAI-UAAGのチェックポイント3.3を満たすための1つの手法であることに注意する。この値は、Animationsを支持して推奨されない [CSS3-ANIMATIONS]

と、点滅することはアクセシビリティーの観点から好ましいものではないために、ブラウザーはblinkを指定されても無視することができるとされる。実際に点滅させたい場合は、CSSアニメーションを使用するように述べられている。

text-decoration-line

text-decoration-lineの値として、noneunderlineoverlineline-throughが定義されている。未対応のブラウザーでは線は表示されない。

text-decoration-lineのテスト

text-decoration-lineのテスト

text-decoration-lineのテスト

text-decoration-lineのテスト

text-decoration-color

線に色をつける。CSS2対応していれば単に黒線が、CSS3に対応していれば線に前景色と別の色が付いているはずである。

text-decoration-colorのテスト

text-decoration-colorのテスト

coding

.line6 {
    text-decoration: underline;
    -webkit-text-decoration-color: red;
    text-decoration-color: red;
}

.line7 {
    text-decoration: line-through;
    -webkit-text-decoration-color: rgba(199, 21, 133, 0.6);
    text-decoration-color: rgba(199, 21, 133, 0.6);
}
...
<p class="line6">text-decoration-colorのテスト</p>
<p class="line7">text-decoration-colorのテスト</p>

text-decoration-style

線種を指定する。デフォルトの一重線に加えて、二重線、点線、破線、波線の4種類が用意されており、対応していればレンダリングされるはずである。

text-decoration-styleのテスト

text-decoration-styleのテスト

text-decoration-styleのテスト

text-decoration-styleのテスト

coding

.line8, .line9, .line10, .line11 {
 text-decoration:underline;
}
.line8 {
    -webkit-text-decoration-style:double;
    text-decoration-style:double;
}
.line9 { text-decoration-style: dotted; ... }
.line10 { text-decoration-style: dashed; ... }
.line11 { text-decoration-style: wavy; ... }
...
<p class="line8">text-decoration-styleのテスト</p>
<p class="line9">text-decoration-styleのテスト</p>
<p class="line10">text-decoration-styleのテスト</p>
<p class="line11">text-decoration-styleのテスト</p>

text-underline-position

現在のところ、IEのみが独自実装で対応。ここでは、もっぱら縦書きについて検討を行う。

縦書きモードで傍線を左に指定するleft、および右に指定するrightが用意されている。しかし、IE/Edgeでは現在のところ古い草案のプロパティー値(belowabove)が使用されている。

縦書きモードで右側にアンダーラインが来る。

縦書きモードで左側にアンダーラインが来る。

coding

.vertical {
    -ms-writing-mode: tb-rl; /* IE8+ */
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
.line12 {
    text-underline-position: above;
    -ms-text-underline-position: right; /* reserved IE */
    -moz-text-underline-position: right; /* reserved Firefox */
    -webkit-text-underline-position: right; /* reserved webkit */
    text-underline-position: right;
}
.line13 {
    text-underline-position: below; 
    text-underline-position: left; 
...
}
...
<div class="line-pos">
<p class="line12">縦書きモードで右側にアンダーラインが来る。</p>
<p class="line13">縦書きモードで左側にアンダーラインが来る。</p>
</div>

付録:text-decoration-lineと縦書き時の位置

縦書きの条件下で、text-decoration-lineunderlineまたはoverlineを指定するのと、言語指定(lang属性)を組み合わせた場合にどのような挙動を示すのかをまとめた。

lang属性 text-decoration-line IE Edge Firefox Blink WebKit
未指定 underline
overline
lang="en" underline
overline
lang="ja" underline
overline

上の表を言葉で表すならば、次のようになる。

また、仕様によれば、文字サイズが異なったとしても連続した同じ太さの線が引かれることが示唆されている(が、仕様どおりにレンダリングがされないブラウザーが多数を占める)。

二酸化炭素(CO2)。

立法メートル(m3)。

検証に使用したブラウザ

Internet Explorer
11.0.26 Trident/7.0(リリース版)
MS Edge
Edge/13.10586 (リリース版)
Firefox
Firefox/43.0(リリース版)
Blink
AppleWebKit/537.36 Chrome/47.0.2526.80 Vivaldi/1.0.352.3(スナップショット版)
WebKit
AppleWebKit/602.1 Epiphany/3.18.1(リリース版)

参考リンク

2. 行の装飾: 下線、上線、および打ち消し線(CSS Text Decoration Module Level 3)
http://momdo.github.io/css-text-decor-3/#line-decoration
text-decoration-line - CSS | MDN
https://developer.mozilla.org/en-US/CSS/text-decoration-line
text-decoration-color - CSS | MDN
https://developer.mozilla.org/en-US/CSS/text-decoration-color
text-decoration-style - CSS | MDN
https://developer.mozilla.org/en-US/CSS/text-decoration-style
text-underline-position - CSS | MDN
https://developer.mozilla.org/en-US/docs/CSS/text-underline-position