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

最終更新日:2019年12月10日  (初回投稿日:2019年12月10日)

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プロパティ
これは「カーソル」(こんなやつ→)の種類を指定できます。
自分で作った画像をカーソルにできたりします。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2020/04 | 05
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.