ほんっとにはじめてのHTML5とCSS3：【30-2】上付き・下付き文字を指定する font-variant-position

【30-2】上付き・下付き文字を指定する font-variant-position

最終更新日：2018年05月30日　（初回投稿日：2018年05月08日）

font-variant-positionプロパティは、下付き文字・上付き文字を表示します。
下付き文字の 要素、上付き文字の 要素のようなスタイルを表示します。

要素・要素は、CSSの font-sizeプロパティ と vertical-alignプロパティ で表示するんですが、今回の font-variant-positionプロパティは、フォントデータに含まれる「下付き文字グリフ・上付き文字グリフ」を使うという違いがあります。

ただしこのプロパティ、対応ブラウザも少なく、W3Cの仕様書でも「Features at risk（リスクのある機能）」の中に入っています。
ショートハンドの font-variantプロパティにもコレは含まれないので、もしかしたら勧告時には無くなるかも...。とにかく流れで一応書いておきます。（2018年5月記）

本日のINDEX

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-variant-position - CSS | MDN

font-variant-positionプロパティの値

font-variant-positionプロパティの値
キーワード	normal ：デフォルト値。代替えのグリフ（字体）を使用しない sub、super
グローバル値	font-variant-position: inherit; 親の値を継承（コレ書かなくても継承するけど） font-variant-position: initial; 継承した親の値を解消しデフォルト値に戻す font-variant-position: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

font-variant 関係のプロパティは、OpenTypeフォントの機能を利用します。
下の表では、それぞれの値で使う OpenType機能タグ値（feature-tag-value）も表示しています。
＊OpenType機能タグ値についての詳細は、
【31】OpenType機能を直接指定できる font-feature-settingsプロパティをご覧ください。

キーワード	OpenType機能タグ値	概要
sub	subs	下付き文字グリフで表示（sub は「SubScript（下付き文字）」の略）
super	sups	上付き文字グリフで表示（super は「SuperScript（上付き文字）」の略）

font-variant-positionプロパティの使い方

試してみます。このプロパティは、Firefox は実装しているようです。

これは font-variant-positionプロパティによる指定。

C2H6O

a[2a], 120m2

比較用に、こっちは , 要素による指定です。

C₂H₆O

a^[2a], 120m²

ちなみに Firefox（Mac）では下のように表示されました。
font-variant-positionプロパティによる指定と , 要素による指定では、若干違いますね。

上のサンプルのソースコードです。

<!--font-variant-positionプロパティによる指定-->
<div class="mihon"> 
  <p class="p-sub">C<span>2</span>H<span>6</span>O</p>
  <p class="p-super">a<span>[2a]</span>, 120m<span>2</span></p>
</div>

<!--比較用の sub要素・sup要素による指定-->
<div class="mihon"> 
  <p>C<sub>2</sub>H<sub>6</sub>O</p>
  <p>a<sup>[2a]</sup>, 120m<sup>2</sup></p>
</div>

<style>
.mihon {
	color:black;
	margin:.5em 0;
	border:solid 1px #ccc;
	padding:0 1.5em
	}
.mihon p {
	font-family:Verdana,sans-serif;
	margin:15px 0;
	font-size:2rem;
	line-height:1.2
	}
.p-sub span {
	font-variant-position: sub
	}
.p-super span {
	font-variant-position: super
	}
</style>

@supports で古いブラウザへの対応（, 要素を使う）

W3C の仕様書に載っていたサンプルです。
font-variant-positionプロパティに未対応のブラウザには、下記のような対応をすると良いんだそうです。
下の例は、要素への指定です。

@supports (font-variant-position: sub) { /*サポートしているならという条件で指定しています*/
  sub {
    vertical-align: baseline;
    font-size: 100%;
    line-height: inherit;
    font-variant-position: sub;
  }
}

これで、「font-variant-position: sub」をサポートしているブラウザなら、上記のスタイルで 要素を表示し、サポートしていないブラウザは従来の 要素のスタイルで表示するということです。

う〜ん、だったら従来の ・要素だけで事足りるんじゃないかというかんじのプロパティですね。（やっぱ無くなるかも）

@supports の使い方は、（ちょっとメモ）CSS のベンダープレフィックスについて で触れていますのでご覧ください。

ちなみに、従来の 要素のスタイルはこうなんだって。

sub {
  vertical-align: sub; /*sup要素なら、ここが vertical-align: super */
  font-size: smaller;
  line-height: normal;
}

次回予告

次回は font-variant-ligaturesプロパティを使ってみます。
これはリガチャ（合字）を指定するプロパティです。

関連記事

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

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

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。