流体上标和下标

上标和下标是学术和科学内容中不可或缺的元素，从参考文献到化学式和数学表达式都离不开它们。然而，浏览器对这些元素的处理方式比较静态，容易造成问题：在移动设备上元素可能太小，而在桌面显示器上则可能过大。

多年来，我一直致力于解决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中文网其他相关文章！