流体の上部文字と添え字

上着性と添え字は、学術的および科学的内容に不可欠な要素であり、化学式や数学的表現への参照から不可欠です。ただし、ブラウザはこれらの要素をより静的に処理するため、問題を簡単に引き起こす可能性があります。要素はモバイルデバイスでは小さすぎて、デスクトップモニターでは大きすぎる可能性があります。

私は長年にわたってCSSの上付き文字と添え字のスケーリング問題の解決に取り組んできましたが、今では流体コンピューティングを使用した最新のソリューションを提案しています。この記事では、静的方法に欠点がある理由と、アクセシビリティを維持しながら、すべてのビューポートに適したタイポグラフィを提供する方法について説明します。何よりも、このソリューションには簡潔で純粋なCSSコードのみが必要です。

静的スケーリングの問題

ズームの問題は、プロのタイポグラフィをブラウザのデフォルト設定と比較する場合、特に顕著です。この例（ウィキペディアから編集）を参照してください。最初の「2」はプロがGLYPHセットに専門的に設計および含まれ、2番目の使用は_{（トップ）および^{（下）要素を使用します。} 歴史的に、ブラウザは} for

および

要素に対して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
数学的分解

それがどのように動作するかを1つずつ分析しましょう：

フォントサイズ（PX）

を計算します

小さなサイズでは、固定された4pxコンポーネントがより大きな影響を及ぼします。大規模なサイズでは、0.5EM比が支配的です。その結果、すべてのサイズでより自然なスケーリングが得られます。

親フォントサイズ（em）

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

sub { 
  /* ... */
}

を計算します

および

要素の内部では、親のフォントサイズを計算できます。 ^{_{流体フォントサイズは}として定義されます。 0.5EMを補償するには、最初に0.5EM * x = 1EMを解き、x = 2を取得する必要があります。ここでは、1EMは}要素と

要素自体のフォントサイズを表します。乗算操作の前に、現在のEM値から4pxの固定コンポーネントを減算します。

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

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

calc(0.5em 4px)

垂直オフセット

垂直オフセットの場合、デフォルトの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) */
}

この式は、標準のブラウザの位置決めに合わせて慎重に校正されています：

0.5EM（SuperScript）および0.25EM（subscript）は、デフォルトの垂直オフセット値（たとえば、Tailwind CSSやBootstrapなどのフレームワークで使用）です。
ブラウザのスケーリング係数を検討するために0.83を掛けます。
• font-size: smaller
この方法により、液体スケーリングの改善の恩恵を受けながら、上付き文字と添え字が馴染みのある垂直位置に留まることが保証されます。結果は、ユーザーが従来のブラウザのレンダリングに期待するものと一致していますが、さまざまなフォントサイズでより自然にスケーリングします。

役立つヒント

正確なスケーリング係数

は、共通フォントの上付き文字で描かれたユニコード文字の分析に基づいています。特定の設計ニーズに合わせて、これらの値を意志で調整できます。この方法をカスタマイズできる方法は次のとおりです。 より大きなスケーリングの場合：

font-size: (0.5em 4px) スケーリングが小さい場合：

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

sub { 
  /* ... */
}

後方互換性の場合、

にすべてをラップすることができます。ブロック：

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

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

最終的なデモ この小さなインタラクティブなデモを構築して、さまざまな流体スケーリングオプションを表示し、ブラウザの静的スケーリングと比較し、ユースケースに最適なものを確認して微調整します。 @supports次のプロジェクトで試してみてください。あなたの考えを聞いてみたいです！

以上が流体の上部文字と添え字の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。