流體上標和下標

上標和下標是學術和科學內容中不可或缺的元素，從參考文獻到化學式和數學表達式都離不開它們。然而，瀏覽器對這些元素的處理方式比較靜態，容易造成問題：在移動設備上元素可能太小，而在桌面顯示器上則可能過大。

多年來，我一直致力於解決CSS中上標和下標的縮放問題，現在我提出了一種使用流體計算的現代解決方案。本文將解釋為什麼靜態方法存在不足，以及如何在保持可訪問性的同時，為所有視口提供更好的排版。最棒的是，這個解決方案只需要簡潔純粹的CSS代碼。

靜態縮放的問題

當將專業的排版與瀏覽器的默認設置進行比較時，縮放問題尤其明顯。請看這個例子（改編自維基百科），其中第一個“2”是專業設計的，包含在字形集中，而第二個則使用_{（頂部）和^{（底部）元素：}}

歷史上，瀏覽器一直使用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)

在^{和_{元素內，我們可以計算父級的字體大小：}}

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);
  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（上標）和0.25em（下標）是默認的垂直偏移值（例如，在Tailwind CSS和Bootstrap等框架中使用）。
• 我們乘以0.83來考慮瀏覽器font-size: smaller縮放因子，該因子默認用於上標和下標。

這種方法確保我們的上標和下標保持熟悉的垂直位置，同時受益於改進的流體縮放。結果與用戶對傳統瀏覽器渲染的預期相符，但在不同的字體大小下縮放更自然。

有用的提示

確切的縮放因子font-size: (0.5em 4px)是基於我對常用字體中上標Unicode字符的分析。您可以隨意調整這些值以匹配您的特定設計需求。以下是一些您可以自定義此方法的方式：

對於更大的縮放比例：

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塊中：

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));
}

最終演示

我構建了這個小的交互式演示，以顯示不同的流體縮放選項，將它們與瀏覽器的靜態縮放進行比較，並微調垂直定位，以查看什麼最適合您的用例：（此處應插入演示鏈接）

在您的下一個項目中嘗試一下，我很樂意聽到您的想法！

以上是流體上標和下標的詳細內容。更多資訊請關注PHP中文網其他相關文章！