【Tailwind和訳】TYPOGRAPHY/Font Variant Numeric

この記事について

この記事は、TYPOGRAPHY/Font Variant Numericの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Font Variant Numeric

数字の変化をコントロールするためのユーティリティ。

Class	Properties
normal-nums	font-variant-numeric: normal;
ordinal	font-variant-numeric: ordinal;
slashed-zero	font-variant-numeric: slashed-zero;
lining-nums	font-variant-numeric: lining-nums;
oldstyle-nums	font-variant-numeric: oldstyle-nums;
proportional-nums	font-variant-numeric: proportional-nums;
tabular-nums	font-variant-numeric: tabular-nums;
diagonal-fractions	font-variant-numeric: diagonal-fractions;
stacked-fractions	font-variant-numeric: stacked-fractions;

使い方

font-variant-numericユーティリティを使って、数字、分数、序数マーカーの追加グリフを有効にします（それらに対応するフォントにおいて）。

これらのユーティリティは合成可能なので、HTML の中で複数のクラスを組み合わせることで、複数のfont-variant-numeric機能を有効にすることができます。

<p class="ordinal slashed-zero tabular-nums ...">1234567890</p>

なお、これらの機能に対応していないフォントも多く（たとえば、積み上げ式の分数に対応しているフォントは非常に稀です）、使用しているフォントファミリーによっては、これらのユーティリティーの効果が得られない場合もあります。

序列

ordinalユーティリティを使用して、序列マーカーに特別なグリフを有効にします。

<p class="ordinal ...">1st</p>

スラッシュ付きゼロ

slashed-zeroユーティリティを使用すると、0 を強制的にスラッシュで囲むことができます。これは、O と 0 を明確に区別する必要がある場合に便利です。

<p class="slashed-zero ...">0</p>

数字の並べ方

lining-numsユーティリティを使用すると、ベースラインによってすべて整列された数値グリフを使用できます。これはlnumの OpenType 機能に相当します。ほとんどのフォントではこれがデフォルトです。

<p class="lining-nums ...">1234567890</p>

オールドスタイルの数字

oldstyle-numsユーティリティを使用すると、一部の数字にディセンダーがある数字グリフを使用できます。これは、onumの OpenType 機能に対応しています。

<p class="oldstyle-nums ...">1234567890</p>

プロポーショナルの数字

proportional-numsユーティリティーを使用して、（均一／タブラーではなく）プロポーショナルな幅を持つ数値グリフを使用します。これは、pnumの OpenType 機能に対応しています。

<p class="proportional-nums ...">12121</p>
<p class="proportional-nums ...">90909</p>

タブラー数字

tabular-nums ユーティリティを使用して、（プロポーショナルではなく）均一/タブラーの幅を持つ数値グリフを使用します。これは、tnum OpenType 機能に対応しています。

<p class="tabular-nums ...">12121</p>
<p class="tabular-nums ...">90909</p>

斜め方向の分数

diagonal-fractionsユーティリティを使用すると、スラッシュで区切られた数字を一般的な対角線上の分数に置き換えることができます。これは、fracの OpenType 機能に対応しています。

<p class="diagonal-fractions ...">1/2 3/4 5/6</p>

積層分数

stacked-fractionsユーティリティを使用すると、スラッシュで区切られた数字を一般的な積み上げられた分数に置き換えることができます。これは、fracの OpenType 機能に対応しています。この機能をサポートしているフォントは非常に少ないようですが、ここでは Ubuntu Mono を使用しています。

<p class="stacked-fractions ...">1/2 3/4 5/6</p>

数値フォントのバリアントをリセットする

数値フォントのバリアントをリセットするには適切にnormal-numsを使用します。これは通常、特定のブレークポイントでフォント機能をリセットするのに便利です。

<p class="slashed-zero tabular-nums md:normal-nums ...">12345</p>

レスポンシブ

特定のブレークポイントで要素のfont-variant-numericプロパティを制御するには、既存のfont-variant-numericユーティリティに{screen}:というプレフィックスを追加します。例えば、md:tabular-numsを使うと、medium スクリーンサイズ以上でのみtabular-numsユーティリティを適用することができます。

<div class="proportional-nums md:tabular-nums">
  <!-- ... -->
</div>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

バリアント

デフォルトでは、フォントバリアントの数値ユーティリティーに対しては、レスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルの variants セクションにあるfontVariantNumericプロパティを変更することで、フォントバリアントの数値ユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、このコンフィグはhoverとfocusのバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       fontVariantNumeric: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトでフォントバリアント数値ユーティリティを使用しない場合は、設定ファイルのcorePluginsセクションでfontVariantNumericプロパティをfalseに設定することで、完全に無効化することができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     fontVariantNumeric: false,
    }
  }