ほんっとにはじめての 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プロパティの値は以下のものがあります。

text-underline-positionプロパティの値
キーワード	autoがデフォルト値。 under、left、right
グローバル値	text-underline-position: inherit; 親の値を継承（コレ書かなくても継承するけど） text-underline-position: initial; 継承した親の値を解消しデフォルト値に戻す text-underline-position: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

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

値の構文はこうなっています。
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プロパティを使ってみよう。
用意された形の他に、任意のテキスト（★とか）も使えてけっこう楽しいです。

関連記事

• 【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
• （ちょっとメモ）縦書きでの字下げ・下線・リストなどを試してみた
• 【45-3】縦書きで「縦中横」ができる text-combine-upright
• 【45-2】縦書きでの文字の向きを決める text-orientation
• 【45-1】日本語の縦書きもできちゃう writing-modeプロパティ
• 【44】タブ文字の幅を決める tab-sizeプロパティ
• 【43】テキストを大文字・小文字に変換する text-transform
• 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation