text-emphasis-styleプロパティは、テキスト傍点のスタイルを指定する際に使用します。
傍点とはテキストの各文字の隣に付ける強調記号のことで、日本語などの東アジア言語の文書で伝統的に行われています。
text-emphasis-styleプロパティの値のうち、filled と open は傍点を塗りつぶかどうかを指定するキーワードです。
filled は傍点を塗りつぶし、open は傍点を中空にします。
filled または open を省略すると filled となります。
また、 filled または open のみを指定すると横書きモードでは circle 、縦書きモードでは sesame となります。
text-emphasis-style: filled; //'●'(縦書きでは'﹅') text-emphasis-style: open; //'○'(縦書きでは'﹆') text-emphasis-style: dot; //'•' text-emphasis-style: circle; //'●' text-emphasis-style: double-circle; //'◉' text-emphasis-style: triangle; //'▲' text-emphasis-style: sesame; //'﹅' text-emphasis-style: 'A'; //'A' text-emphasis-style: triangle filled; //'▲' text-emphasis-style: triangle open; //'△'
p.sample1 {text-emphasis-style: none;} p.sample2 {text-emphasis-style: filled;} p.sample3 {text-emphasis-style: open;} p.sample4 {text-emphasis-style: dot;} p.sample5 {text-emphasis-style: circle;} p.sample6 {text-emphasis-style: double-circle;} p.sample7 {text-emphasis-style: triangle;} p.sample8 {text-emphasis-style: sesame;} p.sample9 {text-emphasis-style: 'A';} p.sample10 {text-emphasis-style: dot open;} p.sample11 {text-emphasis-style: circle open;} p.sample12 {text-emphasis-style: double-circle open;} p.sample13 {text-emphasis-style: triangle open;} p.sample14 {text-emphasis-style: sesame open;}
<p class="sample1">text-emphasis-style: none; を指定。</p> <p class="sample2">text-emphasis-style: filled; を指定。</p> <p class="sample3">text-emphasis-style: open; を指定。</p> <p class="sample4">text-emphasis-style: dot; を指定。</p> <p class="sample5">text-emphasis-style: circle; を指定。</p> <p class="sample6">text-emphasis-style: double-circle; を指定。</p> <p class="sample7">text-emphasis-style: triangle; を指定。</p> <p class="sample8">text-emphasis-style: sesame; を指定。</p> <p class="sample9">text-emphasis-style: 'A'; を指定。</p> <br> <p class="sample10">text-emphasis-style: dot open; を指定。</p> <p class="sample11">text-emphasis-style: circle open; を指定。</p> <p class="sample12">text-emphasis-style: double-circle open; を指定。</p> <p class="sample13">text-emphasis-style: triangle open; を指定。</p> <p class="sample14">text-emphasis-style: sesame open; を指定。</p>
text-emphasis-style: none; を指定。
text-emphasis-style: filled; を指定。
text-emphasis-style: open; を指定。
text-emphasis-style: dot; を指定。
text-emphasis-style: circle; を指定。
text-emphasis-style: double-circle; を指定。
text-emphasis-style: triangle; を指定。
text-emphasis-style: sesame; を指定。
text-emphasis-style: ‘A’; を指定。
text-emphasis-style: dot open; を指定。
text-emphasis-style: circle open; を指定。
text-emphasis-style: double-circle open; を指定。
text-emphasis-style: triangle open; を指定。
text-emphasis-style: sesame open; を指定。
p.prefix_sample1 { -webkit-text-emphasis-style: none; -moz-text-emphasis-style: none; -ms-text-emphasis-style: none; } p.prefix_sample2 { -webkit-text-emphasis-style: filled; -moz-text-emphasis-style: filled; -ms-text-emphasis-style: filled; } p.prefix_sample3 { -webkit-text-emphasis-style: filled; -moz-text-emphasis-style: filled; -ms-text-emphasis-style: filled; } p.prefix_sample4 { -webkit-text-emphasis-style: filled; -moz-text-emphasis-style: filled; -ms-text-emphasis-style: filled; } p.prefix_sample5 { -webkit-text-emphasis-style: filled; -moz-text-emphasis-style: filled; -ms-text-emphasis-style: filled; } p.prefix_sample6 { -webkit-text-emphasis-style: filled; -moz-text-emphasis-style: filled; -ms-text-emphasis-style: filled; } p.prefix_sample7 { -webkit-text-emphasis-style: triangle; -moz-text-emphasis-style: triangle; -ms-text-emphasis-style: triangle; } p.prefix_sample8 { -webkit-text-emphasis-style: sesame; -moz-text-emphasis-style: sesame; -ms-text-emphasis-style: sesame; } p.prefix_sample9 { -webkit-text-emphasis-style: 'A'; -moz-text-emphasis-style: 'A'; -ms-text-emphasis-style: 'A'; } p.prefix_sample10 { -webkit-text-emphasis-style: dot open; -moz-text-emphasis-style: dot open; -ms-text-emphasis-style: dot open; } p.prefix_sample11 { -webkit-text-emphasis-style: circle open; -moz-text-emphasis-style: circle open; -ms-text-emphasis-style: circle open; } p.prefix_sample12 { -webkit-text-emphasis-style: double-circle open; -moz-text-emphasis-style: double-circle open; -ms-text-emphasis-style: double-circle open; } p.prefix_sample13 { -webkit-text-emphasis-style: triangle open; -moz-text-emphasis-style: triangle open; -ms-text-emphasis-style: triangle open; } p.prefix_sample14 { -webkit-text-emphasis-style: sesame open; -moz-text-emphasis-style: sesame open; -ms-text-emphasis-style: sesame open; }
<p class="prefix_sample1">text-emphasis-style: none; を指定。</p> <p class="prefix_sample2">text-emphasis-style: filled; を指定。</p> <p class="prefix_sample3">text-emphasis-style: open; を指定。</p> <p class="prefix_sample4">text-emphasis-style: dot; を指定。</p> <p class="prefix_sample5">text-emphasis-style: circle; を指定。</p> <p class="prefix_sample6">text-emphasis-style: double-circle; を指定。</p> <p class="prefix_sample7">text-emphasis-style: triangle; を指定。</p> <p class="prefix_sample8">text-emphasis-style: sesame; を指定。</p> <p class="prefix_sample9">text-emphasis-style: 'A'; を指定。</p> <br> <p class="prefix_sample10">text-emphasis-style: dot open; を指定。</p> <p class="prefix_sample11">text-emphasis-style: circle open; を指定。</p> <p class="prefix_sample12">text-emphasis-style: double-circle open; を指定。</p> <p class="prefix_sample13">text-emphasis-style: triangle open; を指定。</p> <p class="prefix_sample14">text-emphasis-style: sesame open; を指定。</p>
text-emphasis-style: none; を指定。
text-emphasis-style: filled; を指定。
text-emphasis-style: open; を指定。
text-emphasis-style: dot; を指定。
text-emphasis-style: circle; を指定。
text-emphasis-style: double-circle; を指定。
text-emphasis-style: triangle; を指定。
text-emphasis-style: sesame; を指定。
text-emphasis-style: ‘A’; を指定。
text-emphasis-style: dot open; を指定。
text-emphasis-style: circle open; を指定。
text-emphasis-style: double-circle open; を指定。
text-emphasis-style: triangle open; を指定。
text-emphasis-style: sesame open; を指定。