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

text-emphasis-positionプロパティは 強調マーク（emphasis mark = 圏点）の「位置」を指定します。
横書きなら「上」か「下」のどちらか、縦書きなら「右」か「左」かを指定できます。

圏点は、日本語の他に 韓国語・モンゴル語・中国語でも使うそうですが、中国語の横書きの場合は 圏点を「下」につけるらしいです。

text-emphasis-positionプロパティの値は、text-emphasisショートハンドに含まれないので、ショートハンドによって値がリセットされることはありません。

emphasis mark関連のプロパティは、このように記事を分けています。

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

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

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

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

text-emphasis-positionプロパティは、Firefox, Chrome, Safari, iOS Safari, Android版の各種ブラウザが対応していますが、Firefox以外はベンダープレフィックス「-webkit-」付きで対応しています。（参考：MDN　2019年12月記）
IE, Edge は未対応です。（参考：Can I use　2019年12月記）

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

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

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

text-emphasis-positionプロパティの値
キーワード	over rightがデフォルト値。 over と under のどちらか1つと、right と left のどちらか1つを半角スペースで区切って指定します。
グローバル値	text-emphasis-position: inherit; 親の値を継承（コレ書かなくても継承するけど） text-emphasis-position: initial; 継承した親の値を解消しデフォルト値に戻す text-emphasis-position: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

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

それぞれのキーワードは、以下の意味があります。

over

横書きモードでテキストの「上」に圏点を表示します。

under

横書きモードでテキストの「下」に圏点を表示します。

right

縦書きモードでテキストの「右」に圏点を表示します。

left

縦書きモードでテキストの「左」に圏点を表示します。

指定のしかたは少し変わっています。
over と under のどちらか1つと、right と left のどちらか1つを半角スペースで区切って必ずペアで指定します。
over rightがデフォルト値です。
というわけで、指定は下の4パターンになります。

text-emphasis-position: over right;  /*横書きでは上に、縦書きでは右に表示。デフォルト*/
text-emphasis-position: over left;   /*横書きでは上に、縦書きでは左に表示*/
text-emphasis-position: under right; /*横書きでは下に、縦書きでは右に表示*/
text-emphasis-position: under left;  /*横書きでは下に、縦書きでは左に表示*/

例えば、横書きモードで圏点を下に表示したくて「text-emphasis-position: under」と指定したらNG。デフォルトの「over right」が効いて圏点は上に表示されます。
下に表示させたいなら「text-emphasis-position: under right」か「text-emphasis-position: under left」と指定しなきゃなりません。

text-emphasis-positionの指定サンプル

text-emphasis-positionプロパティの値を使ってみます。IE, Edge は未対応です。

text-emphasis-position: 未指定（over right） 圏点（けんてん）の位置を指定します。

text-emphasis-position: over left 圏点（けんてん）の位置を指定します。

text-emphasis-position: under right 圏点（けんてん）の位置を指定します。

text-emphasis-position: under left 圏点（けんてん）の位置を指定します。

text-emphasis-position: 未指定（over right） 圏点（けんてん）の位置を指定します。

text-emphasis-position: over left 圏点（けんてん）の位置を指定します。

text-emphasis-position: under right 圏点（けんてん）の位置を指定します。

text-emphasis-position: under left 圏点（けんてん）の位置を指定します。

サンプルのHTMLはこちら。

<div class="mihon">
<p>
<b>text-emphasis-position: 未指定（over right）</b>
<span class="sample1">圏点（けんてん）の位置</span>を指定します。</p>
<p>
<b>text-emphasis-position: over left</b>
<span class="sample2">圏点（けんてん）の位置</span>を指定します。</p>
<p>
<b>text-emphasis-position: under right</b>
<span class="sample3">圏点（けんてん）の位置</span>を指定します。</p>
<p>
<b>text-emphasis-position: under left</b>
<span class="sample4">圏点（けんてん）の位置</span>を指定します。</p>
</div>

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

サンプルのCSSはこちら。

.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}
.sample1 {
	-webkit-text-emphasis:filled red;
	text-emphasis:filled red}
    /*text-emphasis-position は無指定（over right はデフォルトなので）*/
.sample2 {
	-webkit-text-emphasis:triangle open hsl(100,100%,25%);
	text-emphasis:triangle open hsl(100,100%,25%);
	-webkit-text-emphasis-position: over left;
	text-emphasis-position: over left}
.sample3 {
	-webkit-text-emphasis:'＊' #f0f;
	text-emphasis:'＊' #f0f;
	-webkit-text-emphasis-position: under right;
	text-emphasis-position: under right}
.sample4 {
	-webkit-text-emphasis:double-circle rgb(0,30,255);
	text-emphasis:double-circle rgb(0,30,255);
	-webkit-text-emphasis-position: under left;
	text-emphasis-position: under left}

「ルビ」と「圏点」の関係

ちょっとポジションとは関係ないんですけど、
「ルビ」と「圏点」を同時に指定したらどうなるか、やってみました。

ルビと圏点を同時指定 圏点けんてんの 位置いちを指定します。

これは、ブラウザによって表示が違いました。

Firefox の「ルビが内側、圏点が外側」に表示されるのが、W3C の仕様どおりみたい。

ただしこれ、両方付くと行間も自動的に広がるるので、どっちかだけにしたほうが良さそうですね。
CSSでルビか圏点のどっちかだけ付けるように調整できます。
「圏点のあるときはルビを非表示にする」、逆に「ルビが有るときには圏点を非表示にする」指定の例です（W3C仕様書から）。

/*ルビを非表示にする場合は*/
/*例えばこのように↓ em要素に圏点を指定していたなら*/
em { 
    -webkit-text-emphasis:triangle #f0f; 
    text-emphasis:triangle #f0f;
    }
em rt {
    display: none; /*em要素内の rt要素（ルビテキスト）を非表示にしておく*/
    }

/*圏点のほうを非表示にする場合は*/
ruby {
    text-emphasis: none;/*ルビ要素に、圏点なしの指定をしておく*/
    }

プレビューはこちら。下の「圏点非表示」は、Safari, Chrome のビューと同じですね。（ルビの無い「の」にだけ圏点が付いて変だけどね）

ルビ非表示 圏点けんてんの 位置いちを指定します。

圏点非表示 圏点けんてんの 位置いちを指定します。

「下線・上線」と「圏点」の関係

今度は「上線（text-decoration: overline）」と「圏点」を同時に指定してみます。

上線と圏点を同時指定 圏点（けんてん）の位置を指定します。

これは、対応ブラウザ（Chrome, Safari, Firefox）では同じ表示で、「ラインが内側、圏点が外側」に表示されるようです。

まあ上線と圏点は同時に表示できるってことです。めったに無いこととは思うけど。

ちなみに上のサンプルのソースコードを一応 貼っておきます。

<div class="mihon">
<p>
<b>上線と圏点を同時指定</b>
<span class="empDeco">圏点（けんてん）の位置を指定します。</p>
</div>

<style>
.empDeco {
	-webkit-text-emphasis:double-circle blue;
	text-emphasis:double-circle blue;
	text-decoration: overline; /*ショートハンド未対応ブラウザ用*/
	text-decoration: red solid overline;}
</style>

次回予告

次回から、UI（User Interface ユーザーインターフェイス）のためのプロパティを使ってみよう。

最初はcursorプロパティ。
これは「カーソル」（こんなやつ→）の種類を指定できます。
自分で作った画像をカーソルにできたりします。