・タグに革命を。レスポンシブな美しさを実現するとっておきのCSSテクニック

Fluid Superscripts And Subscripts | CSS-Methods

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

上付き文字と下付き文字は、引用の参照から化学式や数学的表現まで、教育・科学的なコンテンツにおいて重要な要素です。しかし、ブラウザはこれらの要素を静的な方法で扱うため、重大な問題を引き起こす可能性があります：モバイルデバイスでは要素が小さすぎたり、デスクトップ表示では不釣り合いに大きくなったりします。

CSSにおける上付き文字と下付き文字のスケーリングと長年格闘してきた経験から、流動的な計算を用いる現代的な解決策を提案します。この記事では、静的なアプローチがなぜ不十分なのか、そしてアクセシビリティを維持しながら、すべてのビューポートでより良いタイポグラフィを提供する方法をお示しします。最も良いことは、この解決策には純粋なCSSのみが必要だということです。

静的スケーリングの問題点

このスケーリングの問題は、プロフェッショナルなタイポグラフィとブラウザのデフォルトを比較する際に特に顕著です。この例（Wikipediaから引用）では、最初の「2」はプロフェッショナルにデザインされグリフセットに含まれているのに対し、2番目は（上）と（下）要素を使用しています。

ブラウザは historically、と要素に対してfont-size: smallerを使用してきました。これはおよそ0.83倍のスケーリングに相当します。これはCSSの初期の頃のシンプルな文書には理にかなっていましたが、フォントサイズが劇的に変化する可能性のある現代のレスポンシブデザインでは問題を引き起こす可能性があります。これは特に、テキストサイズが極端な値の間でスムーズにスケールする流動的なタイポグラフィを使用する場合に当てはまります。

流動的スケーリング：より良い解決策

固定単位と比例単位を組み合わせることで、異なるサイズ間でより自然にスケールする解決策を開発しました。このアプローチにより、小さいサイズでの可読性を確保しつつ、大きいサイズでも適切な比率を維持し、コンテキスト固有の調整の必要性を排除します。

以下が動作の仕組みです：

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* 簡略化したtop: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* 簡略化したtop: calc(0.42em - 1.66px) */
}

特徴： - 自然なスケーリング：逓減システムにより、すべてのサイズで上付き文字と下付き文字が比例を維持 - ベースライン位置合わせ：vertical-align: baselineと相対位置指定を使用することで、行の高さに影響を与えず、オフセットをより細かく制御可能

数式の詳細

以下で各部分の仕組みを詳しく見ていきましょう：

フォントサイズの計算（px）

小さいサイズでは、固定の4px成分がより大きな影響を持ちます。大きいサイズでは、0.5emの比率が支配的になります。結果として、すべてのサイズでより自然なスケーリングが実現します。

sup, sub {
  font-size: calc(0.5em + 4px);
  /* ... */
}

sub { 
  /* ... */
}

親要素のフォントサイズの計算（em）

と要素内で、親要素のfont-sizeを計算できます：

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(2 * (1em - 4px));
}

sub { 
  top: calc(2 * (1em + 4px));
}

流動的なフォントサイズはcalc(0.5em + 4px)として定義されています。0.5emを補正するために、まず0.5em * x = 1emを解く必要があり、これによりx = 2が得られます。ここでの1emはと要素自体のフォントサイズを表します。現在のem値から4pxの固定成分を引いてから乗算します。

垂直オフセット

垂直オフセットについては、デフォルトのCSS位置指定値から始めて、流動的なスケーリングに対応するように調整します：

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px));
}

sub { 
  top: calc(0.25 * 0.83 * 2 * (1em - 4px));
}

この数式は標準的なブラウザの位置指定に合わせて慎重に調整されています：

0.5em（上付き）と0.25em（下付き）は、デフォルトの垂直オフセット値です（TailwindCSSやBootstrapなどのフレームワークで使用）
0.83を掛けることで、ブラウザのデフォルトのfont-size: smallerスケーリング係数を考慮します

このアプローチにより、上付き文字と下付き文字は従来のブラウザレンダリングから期待される垂直位置を維持しつつ、改善された流動的なスケーリングの恩恵を受けることができます。

実用的なヒント

font-size: (0.5em + 4px)という具体的なスケーリング係数は、一般的なフォントにおける上付き文字のUnicode文字の分析に基づいています。具体的なデザインニーズに合わせてこれらの値を調整してください。以下にカスタマイズ方法の例を示します：

より大きなスケーリングの場合：

sup, sub {
  font-size: calc(0.6em + 3px);
  /* オフセット計算も適宜調整 */
}

より小さなスケーリングの場合：

sup, sub {
  font-size: calc(0.4em + 5px);
  /* オフセット計算も適宜調整 */
}

後方互換性のために、すべてを@supportsブロックでラップすることもできます：

@supports (font-size: calc(1em + 1px)) {
  sup, sub {
    ...
  }
}

次のプロジェクトでぜひ試してみてください。皆様のご意見をお待ちしています！

コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

<sub>・<sup>タグに革命を。レスポンシブな美しさを実現するとっておきのCSSテクニック