血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > text-emphasis (CSS3 Text)
hosting by xrea.com
作成：2011-10-23
圏点のスタイル指定についてまとめてみた。この文章作成時では、webkitでのみ動作する。
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とopenのいずれも指定されない場合、filledとして扱われる。filledもしくはopenのみ指定した場合、横書きではcircle、縦書きではsesameとして扱う。filledを指定
ぼくもできなかった。Linux がぼくのレーダー画面に泳ぎ着いたのは 1993 年の頭だったけれど、その頃ぼくはすでに Unix やフリーソフト開発に 10 年以上も関わってきていた。1980 年代半ば、ぼくは最初期の GNU 協力者の一人だったし、ネット上にかなりのフリーソフトもリリースして、最初期いまでも広く使われているようなプログラムをいくつか（nethack、 Emacs VC モードと GUD モード、xlife など）単独または共同で開発してきた。だから、もうやり方はわかってるもんだと思いこんでいた。
openを指定
ぼくもできなかった。Linux がぼくのレーダー画面に泳ぎ着いたのは 1993 年の頭だったけれど、その頃ぼくはすでに Unix やフリーソフト開発に 10 年以上も関わってきていた。1980 年代半ば、ぼくは最初期の GNU 協力者の一人だったし、ネット上にかなりのフリーソフトもリリースして、最初期いまでも広く使われているようなプログラムをいくつか（nethack、 Emacs VC モードと GUD モード、xlife など）単独または共同で開発してきた。だから、もうやり方はわかってるもんだと思いこんでいた。
div.open .dot { -webkit-text-emphasis-style: open dot ; } div.open .circle { -webkit-text-emphasis-style:open circle ; } div.open .double-circle { -webkit-text-emphasis-style: open double-circle ; } div.open .triangle { -webkit-text-emphasis-style: open triangle ; } div.open .sesame { -webkit-text-emphasis-style: open sesame ; } /* 任意の一文字を指定 */ div.open .star { -webkit-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 年以上も関わってきていた。
.color1, .color2, .color3 {-webkit-text-emphasis-style: filled circle;} .color1 {-webkit-text-emphasis-color:red;} .color2 {-webkit-text-emphasis-color:hotpink;} .color3 {-webkit-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短縮記法。圏点の字形と色を一度に指定できる。
.test { -webkit-text-emphasis:circle red;/* 赤丸 */ } ... <p><em class="test">ぼくもできなかった</em>。</p>
text-emphasis-position仕様書では、横書き時のvalueとしてadobe belowとなっているが、webkitではover underで指定する。縦書きはleftとrightで指定できるが、未調査。
ぼくもできなかった。
ぼくもできなかった。
.above ,.below {-webkit-text-emphasis-style: filled circle;} .above {-webkit-text-emphasis-position: over;} .below {-webkit-text-emphasis-position: under;} ... <p><em class="above">ぼくもできなかった</em>。</p> <p><em class="below">ぼくもできなかった</em>。</p>
text-emphasis-skip圏点の位置を指示するプロパティ。webkitの実装には存在しない。執筆時のEditor's Draftでも、under brainstormingとあり、まだ案が固まっていないと思われる。Unicodeが参照されていて、文字によって場所を変える？ということらしい。
Windows 7で検証した。