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

最終更新日:2018年05月08日  (初回投稿日:2018年05月08日)

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

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

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

本日のINDEX
  1. font-variant-positionプロパティの値
  2. font-variant-positionプロパティの使い方
    1. @supports で古いブラウザへの対応(<sub>, <sup>要素を使う)

参考:
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 と同じ動作

それぞれの値は、以下の OpenType機能タグ値(feature-tag-value)と同じです。
OpenType機能タグ値については、後日 font-feature-settingsプロパティで詳しくやります)

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

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

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

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

C2H6O

a[2a], 120m2

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

C2H6O

a[2a], 120m2

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

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

<!--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 で古いブラウザへの対応(<sub>, <sup>要素を使う)

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

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

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

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

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

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

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

次回予告

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
04 | 2018/05 | 06
- - 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.