【50-1】テキストの強調マークの種類を決める text-emphasis-style

強調マーク（emphasis mark）とは、日本語で「圏点（けんてん）」と言って、文章の重要な部分に 1文字ずつ「﹅」などを付けるアレです。

「emphasis（エンファシス）」は「強調・重点」と言った意味。

「圏点（けんてん）」以外に「傍点（ぼうてん）」「脇点（わきてん）」とも言います。
強調のために文字に点を打つのは日本語だけ（？）っぽいです。中国語などで文字に打つ点は発音（イントネーション）のためのものらしいです。

CSSで強調マーク（emphasis mark）の「形（種類）」と「色」を指定できます。

今回はまず「形（種類）」を指定する text-emphasis-styleプロパティを使ってみよう。
﹅ とか ● とか ◉ とか好きな形を指定できます。

Emphasis mark 関連のプロパティは、下記のように記事を分けて掲載します。
最後のtext-emphasis ショートハンドプロパティで まとめて指定できます。

【50-1】テキストの強調マークの種類を決める text-emphasis-style　←今日はココ

【50-2】テキストの強調マークの色を決める text-emphasis-color

【50-3】テキスト強調マークの種類と色のショートハンド text-emphasis

【51】テキストの強調マークの位置を決める text-emphasis-position

text-emphasis-styleプロパティは、Firefox, Safari（iOS Safari も含む）は対応。
Chromeは、ベンダープレフィックス「-webkit-」付きで対応。
IE, Edge は未対応です。（参考：Can I use　2019年9月記）

参考：
・CSS Text Decoration Module Level 3 | W3C Candidate Recommendation
・text-emphasis-style - CSS | MDN

text-emphasis-styleプロパティの値

text-emphasis-styleプロパティの値は以下のものがあります。

text-emphasis-styleプロパティの値
キーワード	noneがデフォルト値。 filled、open、dot、circle、double-circle、triangle、sesame
文字列	任意の文字列を指定することもできます。
グローバル値	text-emphasis-style: inherit; 親の値を継承（コレ書かなくても継承するけど） text-emphasis-style: initial; 継承した親の値を解消しデフォルト値に戻す text-emphasis-style: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	すべての要素

それぞれの値は、以下の意味があります。

none

テキストに圏点を付けません。これがデフォルト

filled と open

filled は「中が塗りつぶされたスタイル（• ● ◉ ▲ ﹅）」
open は「輪郭だけのスタイル（◦ ○ ◎ △ ﹆）」
圏点の「種類のキーワード」と合わせて使います。
例：text-emphasis-style: circle open
どっちも指定せずに、種類のキーワードが指定されていれば、デフォルト値は filled（塗りつぶし）です。

dot

小さい丸。
filledなら「•（ユニコードで U+2022）」、openなら「◦（U+25E6）」

circle

大きい丸。
filledなら「●（U+25CF）」、openなら「○（U+25CB）」
filled か open しか指定されていない場合は、横書きモードなら この circle がデフォルトになります。

double-circle

二重丸。
filledなら蛇の目「◉（U+25C9）」、openなら「◎（U+25CE）」

triangle

三角。
filledなら「▲（U+25B2）」、openなら「△（U+25B3）」

sesame

ゴマ。
filledなら「﹅（U+FE45）」、openなら白ゴマ「﹆（U+FE46）」
filled か open しか指定されていない場合は、縦書きモードなら この sesame がデフォルトになります

'任意の文字列'

たいていは記号（*とか ★とか）で「1文字」だけ指定します。
（複数の文字を指定しても、ブラウザは2文字目以降を切り捨てて使ったり、文字列そのものを無視しても良いようになってます）
文字列なので、「' '（シングルクォート）」か「" "（ダブルクォート）」で囲んで使います。
この場合、filled・openは指定不可（指定するとエラーになります）。

text-emphasis-styleプロパティの指定サンプル

text-emphasis-styleプロパティの値を使ってみます。

text-emphasis-style: 指定なし（ = none） text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: filled text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: open text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: dot open text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: double-circle text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: triangle open text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: open sesame text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: "★" text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: 'けんてん' text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: 指定なし（ = none） text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: filled text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: open text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: dot open text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: double-circle text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: triangle open text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: open sesame text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: "★" text-emphasis-style はテキストに圏点（けんてん）を付けます。

text-emphasis-style: 'けんてん' text-emphasis-style はテキストに圏点（けんてん）を付けます。

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

<div class="mihon">
<p>
<b>text-emphasis-style: 指定なし（ = none）</b>
text-emphasis-style はテキストに<span>圏点（けんてん）</span>を付けます。</p>
<p>
<b>text-emphasis-style: filled</b>
text-emphasis-style はテキストに<span class="sample1">圏点（けんてん）</span>を付けます。</p>
<p><b>text-emphasis-style: open</b> <!--テキスト省略。sample2 で指定しています--> </p>
<p><b>text-emphasis-style: dot open</b> <!--テキスト省略。sample3 で指定しています--> </p>
<p><b>text-emphasis-style: double-circle</b> <!--テキスト省略。sample4 で指定しています--> </p>
<p><b>text-emphasis-style: triangle open</b> <!--テキスト省略。sample5 で指定しています--> </p>
<p><b>text-emphasis-style: open sesame</b> <!--テキスト省略。sample6 で指定しています--> </p>
<p><b>text-emphasis-style: "★"</b> <!--テキスト省略。sample7 で指定しています--> </p>
<p><b>text-emphasis-style: 'けんてん'</b> <!--テキスト省略。sample2 で指定しています--> </p>
</div>

<div class="mihon v-rl"> <!--縦書きのブロック-->
 <!--上と同じ内容をコピペしています-->
</div>

<style>
.mihon {
	color:black;
	margin:1.5em 0;
	border:solid 1px #ccc;
	padding:.6em 1.4em;
	}
.mihon b {display:block; color:#579961; font-size:smaller}
.v-rl {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	height:28rem;
	-ms-writing-mode: tb-rl; /* for IE */
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	overflow:auto}
.mihon p {font-size:1rem; margin:0 0 1em}
.mihon p:last-child {margin-bottom:0}
.sample1 {
	-webkit-text-emphasis-style:filled;
	text-emphasis-style:filled}
.sample2 {
	-webkit-text-emphasis-style:open;
	text-emphasis-style:open}
.sample3 {
	-webkit-text-emphasis-style:dot open;
	text-emphasis-style:dot open}
.sample4 {
	-webkit-text-emphasis-style:double-circle;
	text-emphasis-style:double-circle}
.sample5 {
	-webkit-text-emphasis-style:triangle open;
	text-emphasis-style:triangle open}
.sample6 {
	-webkit-text-emphasis-style:open sesame;
	text-emphasis-style:open sesame}
.sample7 {
	-webkit-text-emphasis-style:"★";
	text-emphasis-style:"★"}
.sample8 {
	-webkit-text-emphasis-style:'けんてん';
	text-emphasis-style:'けんてん'}
    /* ↑ あえて4文字指定してみました。最初の1文字が使われるブラウザが多いようです*/
</style>

任意の文字列も指定できるのが面白いですね。
サンプルの最後では 'けんてん' と指定しましたが、大抵のブラウザでは最初の「け」が圏点として使われるようです。

次回予告

この「圏点」は、デフォルトでは「文字の色」と同じ色になります。
CSSで 圏点だけ文字色と違う色に変えることができます。
次回は、text-emphasis-colorプロパティを使って圏点の色を変えてみよう。