text-emphasis (CSS3 Text decoration)

作成:
更新:

圏点のスタイル指定についてまとめてみた。長らくWebKit/Blinkのみの実装であったが、Firefox Nightly 45に実装された。

対応状況の概要

property IE Edge Firefox Blink WebKit
text-emphasis ××△ (*1)△ (*2)

目次

text-emphasis-style

圏点の字形を指定する。

仕様で規定された字形として、dot(小さい円)、circle(大きい円)、double-circle(二重丸)、triangle(三角)、sesame(ゴマ)の5種類が用意されている。これらについて、filled(塗りつぶし)、もしくはopen(中抜き)との組み合わせで計10種類の圏点を明示的に指定できる。表示される字形は次の通り。

value 記号 名称 Unicode
dot filledビュレットU+2022
dot open白ビュレットU+25E6
circle filled黒丸U+25CF
circle open白丸U+25CB
double-circle filled蛇の目U+25C9
double-circle open二重丸U+25CE
triangle filled黒三角U+25B2
triangle open三角U+25B3
sesame filledゴマU+FE45
sesame open白ゴマU+FE46

noneとすれば圏点をなくすことができる。また、上記の表にはない任意の一文字を圏点として指定することもできる。

仕様書には、以下のことも定められている。

filledを指定

ぼくもできなかった。Linux がぼくのレーダー画面に泳ぎ着いたのは 1993 年の頭だったけれど、その頃ぼくはすでに Unix やフリーソフト開発に 10 年以上も関わってきていた。1980 年代半ば、ぼくは最初期の GNU 協力者の一人だったし、ネット上にかなりのフリーソフトもリリースして、最初期いまでも広く使われているようなプログラムをいくつか(nethack、 Emacs VC モードと GUD モード、xlife など)単独または共同で開発してきた。だから、もうやり方はわかってるもんだと思いこんでいた。

openを指定

ぼくもできなかった。Linux がぼくのレーダー画面に泳ぎ着いたのは 1993 年の頭だったけれど、その頃ぼくはすでに Unix やフリーソフト開発に 10 年以上も関わってきていた。1980 年代半ば、ぼくは最初期の GNU 協力者の一人だったし、ネット上にかなりのフリーソフトもリリースして、最初期いまでも広く使われているようなプログラムをいくつか(nethack、 Emacs VC モードと GUD モード、xlife など)単独または共同で開発してきた。だから、もうやり方はわかってるもんだと思いこんでいた。

coding

div.open .dot {
 -webkit-text-emphasis-style: open dot ;
 text-emphasis-style: open dot ;
}
div.open .circle {
 -webkit-text-emphasis-style:open circle ;
 text-emphasis-style:open circle ;
}
div.open .double-circle {
 -webkit-text-emphasis-style: open double-circle ;
 text-emphasis-style: open double-circle ;
}
div.open .triangle {
 -webkit-text-emphasis-style: open triangle ;
 text-emphasis-style: open triangle ;
}
div.open .sesame {
 -webkit-text-emphasis-style: open sesame ;
 text-emphasis-style: open sesame ;
}
/* 任意の一文字を指定 */
div.open .star {
 -webkit-text-emphasis-style: '☆' ;
 text-emphasis-style: '☆' ;
}
...
<div class="open">
<p><code>open</code>を指定</p>
<p><em class="dot">ぼくもできなかった</em>。Linux がぼくの<em class="circle">レーダー画面</em>に泳ぎ着いたのは 1993 年の頭だったけれど、その頃ぼくはすでに Unix や<em class="double-circle">フリーソフト開発</em>に 10 年以上も関わってきていた。1980 年代半ば、ぼくは<em class="triangle">最初期の GNU 協力者</em>の一人だったし、ネット上にかなりのフリーソフトもリリースして、<em class="sesame">最初期いまでも広く使われているような</em>プログラムをいくつか(nethack、 Emacs VC モードと GUD モード、xlife など)単独または共同で開発してきた。だから、<em class="star">もうやり方はわかってる</em>もんだと思いこんでいた。
</p></div>

text-emphasis-color

その名の通り、圏点の色を指定する。

ぼくもできなかった。Linux がぼくのレーダー画面に泳ぎ着いたのは 1993 年の頭だったけれど、その頃ぼくはすでに Unix やフリーソフト開発に 10 年以上も関わってきていた。

coding

.color1, .color2, .color3 {
    -webkit-text-emphasis-style: filled circle;
    text-emphasis-style: filled circle;
}
.color1 {
    -webkit-text-emphasis-color:red;
    text-emphasis-color:red;
}
.color2 {
    -webkit-text-emphasis-color:hotpink;
    text-emphasis-color:hotpink;
}
.color3 {
    -webkit-text-emphasis-color:rgba(255,160,122,0.5);
    text-emphasis-color:rgba(255,160,122,0.5);
}
...
<p><em class="color1">ぼくもできなかった</em>。Linux がぼくの<em class="color2">レーダー画面</em>に泳ぎ着いたのは 1993 年の頭だったけれど、その頃ぼくはすでに Unix や<em class="color3">フリーソフト開発</em>に 10 年以上も関わってきていた。</p>

text-emphasis

短縮記法。圏点の字形と色を一度に指定できる。

coding例

.test {
    -webkit-text-emphasis:circle red;/* 赤丸 */
    text-emphasis:circle red;
}
...
<p><em class="test">ぼくもできなかった</em></p>

text-emphasis-position

横書き時のvalueとしてover,underで指定する。Blinkと仕様の構文が違うため、書き方が異なっている。Todo:縦書きはleftrightで指定できるが、未調査。

例文

ぼくもできなかった

ぼくもできなかった

coding

.above, .below {
    -webkit-text-emphasis-style: filled circle;
    text-emphasis-style: filled circle;
}
.above {
    -webkit-text-emphasis-position: over;
    text-emphasis-position: over left;
}
.below {
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under right;
}
...
<p><em class="above">ぼくもできなかった</em></p>
<p><em class="below">ぼくもできなかった</em></p>

検証に使用したブラウザ

Windows 10で検証した。

Internet Explorer
11.0.26 Trident/7.0(リリース版)
MS Edge
Edge/13.10586 (リリース版)
Firefox Nightly
Firefox/45.0(ナイトリービルド)
Blink
AppleWebKit/537.36 Chrome/48.0.2564.48 Vivaldi/1.0.357.5(スナップショット版)
WebKit
AppleWebKit/602.1 Epiphany/3.18.1(リリース版)

仕様書とリファレンス

CSS Text Decoration Module Level 3 3.圏点
http://momdo.github.io/css-text-decor-3/#emphasis-marks
日本語組版処理の要件(日本語版) (W3C 技術ノート ) 3.3.9 圏点の処理
http://www.w3.org/TR/2012/NOTE-jlreq-20120403/ja/#ja-subheading2_3_9
text-emphasis - CSS | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis
text-emphasis-position - CSS | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position
圏点 - Wikipedia
http://ja.wikipedia.org/wiki/%E5%9C%8F%E7%82%B9
The Cathedral and the Bazaar(邦題:伽藍とバザール)
http://cruel.org/freeware/cathedral.html
使用した文章は邦訳からコピーした。