ほんっとにはじめての HTML5 と CSS3

text-underline-positionプロパティはテキストの下線（underline）の位置を指定します。

このプロパティは、left や right という値もあるので、CKJ（中国語・韓国語・日本語）の 縦書き の時に、ラインを右に引くか左にするかも指定できます。

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

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

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

値の構文はこうなっています。
auto | [ under || [ left | right ] ]

autoは1個しか書けない（他の値と併用できない）けど、under は left か right のどちらか1つと一緒に「半角スペース」区切りで並べることができます。
left と right は同時に指定できず、使うならどっちか1つだけ。
使える書き方はこんなかんじです↓

text-underline-position: auto;
text-underline-position: under;
text-underline-position: under left;  /*順不同 left under でもOK*/
text-underline-position: under right; /*順不同 right under でもOK*/
text-underline-position: left;
text-underline-position: right;

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

auto

underline の位置はブラウザにおまかせ。

under

underline の位置はディセンダー（p や q などの下の方）にかからない位置。

この値は left や right と同時に指定できます。同時に使うと、横書きモードでは underで、縦書きのときは left や right に自動設定されるそうです。

この値は、下付き文字を多用する化学式などを読みやすくする効果があるそうです。

left

underline の位置は「縦書き」の左側
leftが単独で指定されている場合は autoも暗黙的に指定されるんだそうです。
また、横書きモードで使用した場合は underと同じになります。

right

underline の位置は「縦書き」の右側
rightが単独で指定されている場合は autoも暗黙的に指定されるんだそうです。
また、横書きモードで使用した場合は underと同じになります。

text-underline-positionプロパティの指定サンプル

text-underline-positionプロパティを指定してみます。

今のところ under left right の値への対応ブラウザは無いようです（2019年7月記）
IE用に below（下または左）、above（上または右）の値も指定しているので、IEだけはそれで表示しているはず。

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

<div class="mihon">
  <b>横書き（writing-mode: 未指定）</b>
  <p><a href="#">text-underline-position: 未指定（= auto）</a></p>
  <p class="posi1"><a href="#">text-underline-position: under</a></p>
  <p class="posi2"><a href="#">text-underline-position: left（below）</a></p>
  <p class="posi3"><a href="#">text-underline-position: right（above）</a></p>
</div>

<div class="mihon v-rl">
  <b>縦書き（writing-mode: vertical-rl）</b>
  <p><a href="#">text-underline-position: 未指定（= auto）</a></p>
  <p class="posi1"><a href="#">text-underline-position: under</a></p>
  <p class="posi2"><a href="#">text-underline-position: left（below）</a></p>
  <p class="posi3"><a href="#">text-underline-position: right（above）</a></p>
</div>

<style>
.mihon {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em 1.4em}
.mihon b {display:block;line-height:2.8}
.mihon a {color: #06C; text-decoration: underline}
.v-rl {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	height:22rem;
	-ms-writing-mode: tb-rl; /* for IE */
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl}
.mihon p {
	font-size:1rem;
	line-height:2.8;
	margin:0}
.posi1 {
	text-underline-position:below; /* for IE */
	text-underline-position:under}
.posi2 {
	text-underline-position:below; /* for IE */
	text-underline-position:left}
.posi3 {
	text-underline-position:above; /* for IE */
	text-underline-position:right}
</style>

Chrome, Firefox では、「縦書き」で text-decoration: underline だと「右側」にラインが付きます。（ブラウザや ブラウザバージョンによって違うようです）
日本語の縦書きで「ルビ」と「リンク」を同時に付けたい時、リンクのラインは「左側」にしたい場合、text-underline-position:left が効かない今は、text-decoration: overline を使えばイイみたいです。
（Chrome, Firefox でご覧ください）

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

<div class="mihon v-rl">
<b>縦書き（writing-mode: vertical-rl）</b>
<p class="posi4">縦書きのテキストで<a href="#" class="sample4"><ruby>リンク<rt>Hyperlink</rt></ruby>
の<ruby>文字<rt>もじ</rt></ruby></a>にルビを付けたい場合の例です。</p>
</div>

<style>
.mihon a.sample4 {color:#06C; text-decoration:overline}
</style>

text-decoration: underline では、縦書きモードで右側にラインが来るので、そこにルビが付くとこんなかんじ。

まあ読めなくもないので別に気にならないという場合はこっちでも。
ただ、値を overline にするだけでラインが左側に引かれることを知ってると便利かも。

個人的な印象ですが、今回の text-underline-positionプロパティの left・right の値って、すぐ上で使ってみた text-decoration-lineプロパティの underline・overline で事が足りてる気がします。要るのは under の値だけなような。
まだ「勧告候補」段階の仕様なので、勧告されるころには値が変わっているんじゃないかな？と思ってしまいます。（2019年7月記）

次回予告

テキストの underline 関連のプロパティについては今回で終わりです。

後半の3つ
text-decoration-skip
text-decoration-skip-ink
text-underline-position
のプロパティは、まだ仕様が確定していなくて、使えるブラウザが少なかったりします。勧告時に仕様が変わるかもしれませんが、一応現段階での仕様を書いてみました。
（2019年7月記）

次回からは、強調マーク（emphasis mark）関連のプロパティを使ってみます。
日本語では圏点（けんてん）。
こんなかんじで1文字ずつに付ける点みたいなやつね。
（残念ながら IE, Edge は未対応だそうです）

圏点の「形」と「色」を指定できるんですが、まず次回は「形」を指定する text-emphasis-styleプロパティを使ってみよう。
用意された形の他に、任意のテキスト（★とか）も使えてけっこう楽しいです。

関連記事

• （ちょっとメモ）テキスト選択時のハイライトを変える ::selection
• 【53】キャレットの色を変えられる caret-colorプロパティ
• 【52】カーソルの表示をいろいろ変えられる cursorプロパティ
• 【51】テキストの強調マークの位置を決める text-emphasis-position
• 【50-3】テキスト強調マークの種類と色のショートハンド text-emphasis
• 【50-2】テキストの強調マークの色を決める text-emphasis-color
• 【50-1】テキストの強調マークの種類を決める text-emphasis-style
• 【49】アンダーラインの位置を決める text-underline-position
• 【48-2】ライン装飾が文字を横切るかを決める text-decoration-skip-ink
• 【48-1】ライン装飾をしない対象を決める text-decoration-skip
• 【47-4】text-decorationショートハンドプロパティでまとめて指定
• 【47-3】テキストのライン装飾を波線にもできる text-decoration-style
• 【47-2】テキストのライン装飾の色を決める text-decoration-color
• 【47-1】テキストのライン装飾の種類を決める text-decoration-line
• 【46】テキストの方向性を操作する unicode-bidi と direction

Tweet

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