【49】アンダーラインの位置を決める text-underline-position

最終更新日:2019年07月31日  (初回投稿日:2019年07月31日)

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

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

text-underline-positionプロパティはもともと CSS2 での IE の独自仕様でした。
しかも IE での値は「above(テキストの上または右)・below(テキストの下または左)」の2つで、CSS3 での値とは異なります。
今のところ対応ブラウザは IEだけみたい。しかも上記の値のみ対応です。
ただ、このプロパティは Text Decoration Module Level 3(勧告候補)に上がっているので記事にしておきます。(2019年7月記)

参考:
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 でご覧ください)

縦書き(writing-mode: vertical-rl)

縦書きのテキストでリンクHyperlink文字もじにルビを付けたい場合の例です。

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

<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 では、縦書きモードで右側にラインが来るので、そこにルビが付くとこんなかんじ。

縦書き(writing-mode: vertical-rl)

縦書きのテキストでリンクHyperlink文字もじにルビを付けたい場合の例です。

まあ読めなくもないので別に気にならないという場合はこっちでも。
ただ、値を 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プロパティを使ってみよう。
用意された形の他に、任意のテキスト(★とか)も使えてけっこう楽しいです。

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

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

関連記事

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

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

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

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2019/08 | 09
- - - - 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 31
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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