CSS `text-box-edge` (提案)：精确控制文本框与内容边界

各位前端的同学们，大家好！今天咱们不聊框架源码，也不谈性能优化，来点新鲜的，聊聊一个还在提案阶段，但潜力无限的 CSS 属性：text-box-edge。这玩意儿，说白了，就是让你更精确地控制文本框，也就是文本内容周围那看不见摸不着的“盒子”，与实际文本内容的边界关系。听起来有点绕？别怕，咱们慢慢展开。

为啥需要 text-box-edge？

在讲 text-box-edge 之前，先来回顾一下 CSS 中文本相关的几个概念，以及它们带来的问题。

line-height: 控制行高，也就是每行文字基线之间的距离。但它也会影响文本框的高度，有时候会导致文本内容和边框之间出现不想要的间隙，或者文本被“挤”出文本框。
vertical-align: 控制行内元素（包括文本）在行内的垂直对齐方式。但它主要针对的是行内元素之间的对齐，对文本框本身的高度控制有限。
font-metrics: 字体度量，包含了字体的各种尺寸信息，比如 ascent（上升高度）、descent（下降高度）、leading（行间距）等等。这些尺寸决定了文本在文本框中的位置。

问题在于，我们通常无法直接控制字体度量。而且，line-height、vertical-align 等属性更多的是影响文本行之间的距离和对齐，而不是精确地控制文本内容与文本框边缘之间的距离。这就导致在一些场景下，文本看起来总是对不齐，或者文本框周围有太多空白，影响美观。

举个例子，假设你设计了一个按钮，希望按钮上的文字紧贴边框，但是无论你如何调整 line-height 和 padding，总是有那么一点点间隙，让你抓狂。这就是 text-box-edge 要解决的问题。

text-box-edge 的基本概念

text-box-edge 属性允许你指定文本框的边缘应该对齐到字体度量中的哪个位置。简单来说，就是告诉浏览器：“嘿，文本框的顶部应该对齐到字体的 ascent 位置，底部应该对齐到字体的 descent 位置！”

text-box-edge 属性可以取以下几个值（这些值可能会随着提案的演进而改变，请以最新的规范为准）：

text: 文本框的边缘与文本内容的边缘对齐。具体来说，文本框的顶部与字体的 ascent 位置对齐，底部与字体的 descent 位置对齐。这是最常用的值，也是最符合我们直觉的值。
cap: 文本框的顶部与字体的 cap height 对齐。cap height 指的是大写字母的高度。
ex: 文本框的顶部与字体的 x-height 对齐。x-height 指的是小写字母 x 的高度。
text-before-edge: 文本框的顶部与字体的 ascent 位置对齐。这个值和 text 的顶部对齐效果是一样的。
text-after-edge: 文本框的底部与字体的 descent 位置对齐。这个值和 text 的底部对齐效果是一样的。
content: 文本框的边缘与内容边缘对齐。这个值在处理行内元素时可能会有所不同，具体效果取决于元素的渲染方式。
font-size: 文本框的顶部与字体的 font-size 对齐。
auto: 浏览器根据默认的算法自动计算文本框的边缘位置。

text-box-edge 的语法

text-box-edge 属性可以单独使用，也可以与 text-box-trim 属性一起使用。text-box-trim 属性用于裁剪文本框的边缘，与 text-box-edge 配合使用可以实现更精确的控制。

基本语法如下：

.element {
  text-box-edge: <value>;
  text-box-trim: <value>; /* 可选 */
}

其中，<value> 可以是上面列出的 text、cap、ex 等值。

text-box-trim 的基本概念

text-box-trim 属性用于裁剪文本框的边缘。它可以指定从文本框的哪些边缘裁剪掉多少空间。

text-box-trim 属性可以取以下几个值（同样，这些值可能会随着提案的演进而改变）：

normal: 不裁剪文本框的边缘。这是默认值。
start: 从文本框的起始边缘裁剪掉空间。在从左到右的语言中，起始边缘是左边；在从右到左的语言中，起始边缘是右边。
end: 从文本框的结束边缘裁剪掉空间。在从左到右的语言中，结束边缘是右边；在从右到左的语言中，结束边缘是左边。
block-start: 从文本框的顶部裁剪掉空间。
block-end: 从文本框的底部裁剪掉空间。
both: 同时从起始和结束边缘裁剪掉空间。
inline: 同时从起始和结束边缘裁剪掉空间。（和both相同）
block: 同时从顶部和底部裁剪掉空间。
<length>: 指定裁剪掉的空间大小。可以使用像素（px）、em（em）、rem（rem）等单位。
<percentage>: 指定裁剪掉的空间大小，相对于文本框的尺寸。

text-box-trim 的语法

text-box-trim 属性可以单独使用，也可以与 text-box-edge 属性一起使用。

基本语法如下：

.element {
  text-box-trim: <value>;
}

其中，<value> 可以是上面列出的 normal、start、end、<length>、<percentage> 等值。

实战演练：代码示例

光说不练假把式，咱们来看几个代码示例，感受一下 text-box-edge 和 text-box-trim 的威力。

示例 1：让文字紧贴按钮边框

假设我们有一个按钮，希望按钮上的文字紧贴边框，不要有任何间隙。

<button class="button">Click Me</button>

.button {
  border: 1px solid black;
  padding: 10px;
  font-size: 20px;
  line-height: 1; /* 关键：调整行高，但可能不够精确 */
}

使用 line-height 调整后，可能仍然存在间隙。这时，text-box-edge 和 text-box-trim 就派上用场了。

.button {
  border: 1px solid black;
  padding: 10px;
  font-size: 20px;
  line-height: 1;
  text-box-edge: text; /* 关键：让文本框与文本内容对齐 */
  text-box-trim: block; /* 关键：裁剪掉文本框的顶部和底部空间 */
}

这个例子中，我们将 text-box-edge 设置为 text，让文本框与文本内容对齐。然后，我们使用 text-box-trim: block 裁剪掉文本框的顶部和底部空间，从而让文字紧贴按钮边框。

示例 2：精确控制文本框高度

假设我们需要创建一个高度固定的文本框，并且希望文本内容在文本框中垂直居中。

<div class="text-box">
  Hello World
</div>

.text-box {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  font-size: 20px;
  display: flex;
  align-items: center; /* 使用 Flexbox 垂直居中 */
  justify-content: center; /* 使用 Flexbox 水平居中 */
}

使用 Flexbox 可以实现垂直居中，但文本框的高度仍然受到字体度量和 line-height 的影响。使用 text-box-edge 和 text-box-trim 可以更精确地控制文本框高度。

.text-box {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  font-size: 20px;
  display: flex;
  align-items: center; /* 使用 Flexbox 垂直居中 */
  justify-content: center; /* 使用 Flexbox 水平居中 */
  text-box-edge: text;
  text-box-trim: block;
}

在这个例子中，text-box-edge: text 让文本框与文本内容对齐，text-box-trim: block 裁剪掉文本框的顶部和底部空间。这样，文本框的高度就完全由 height 属性控制，不会受到字体度量的影响。

示例 3：利用 cap 和 ex 精确对齐

<p>
  <span class="cap">Cap:</span> Hello World
  <br>
  <span class="ex">Ex:</span> Hello World
</p>

.cap {
  text-box-edge: cap;
  background-color: lightblue;
}

.ex {
  text-box-edge: ex;
  background-color: lightcoral;
}

这个例子展示了如何使用 cap 和 ex 值。可以看到，.cap 的背景色会延伸到大写字母的高度，而 .ex 的背景色会延伸到小写字母 x 的高度。

表格总结：text-box-edge 和 text-box-trim 的常用值

为了方便大家查阅，我把 text-box-edge 和 text-box-trim 的常用值整理成表格。

属性	值	描述
`text-box-edge`	`text`	文本框的边缘与文本内容的边缘对齐。
	`cap`	文本框的顶部与字体的 cap height 对齐。
	`ex`	文本框的顶部与字体的 x-height 对齐。
	`text-before-edge`	文本框的顶部与字体的 ascent 位置对齐。
	`text-after-edge`	文本框的底部与字体的 descent 位置对齐。
	`content`	文本框的边缘与内容边缘对齐。
	`font-size`	文本框的顶部与字体的 `font-size` 对齐。
	`auto`	浏览器自动计算文本框的边缘位置。
`text-box-trim`	`normal`	不裁剪文本框的边缘。
	`start`	从文本框的起始边缘裁剪掉空间。
	`end`	从文本框的结束边缘裁剪掉空间。
	`block-start`	从文本框的顶部裁剪掉空间。
	`block-end`	从文本框的底部裁剪掉空间。
	`both`	同时从起始和结束边缘裁剪掉空间。
	`inline`	同时从起始和结束边缘裁剪掉空间。
	`block`	同时从顶部和底部裁剪掉空间。
	`<length>`	指定裁剪掉的空间大小，可以使用像素、em、rem 等单位。
	`<percentage>`	指定裁剪掉的空间大小，相对于文本框的尺寸。

兼容性问题

需要注意的是，text-box-edge 和 text-box-trim 属性目前还处于提案阶段，尚未被所有浏览器支持。因此，在使用这些属性时，需要考虑兼容性问题。

渐进增强: 可以先使用传统的 CSS 属性（如 line-height、padding）来实现基本的效果，然后使用 text-box-edge 和 text-box-trim 来进行更精确的控制。如果浏览器不支持这些属性，则会忽略它们，不会影响页面的基本功能。
CSS Feature Queries: 可以使用 CSS Feature Queries (@supports) 来检测浏览器是否支持 text-box-edge 和 text-box-trim 属性，然后根据检测结果来应用不同的样式。

@supports (text-box-edge: text) {
  .element {
    text-box-edge: text;
    text-box-trim: block;
  }
}

总结与展望

text-box-edge 和 text-box-trim 属性为我们提供了更精确地控制文本框与文本内容边界的能力。虽然目前还处于提案阶段，但它们代表了 CSS 发展的趋势，即更加精细化和可控。

未来，随着这些属性被更多浏览器支持，我们就可以更加轻松地实现各种复杂的文本排版效果，让网页设计更加精美和专业。

好了，今天的讲座就到这里。希望大家能够对 text-box-edge 和 text-box-trim 属性有一个初步的了解。记住，前端的世界是不断变化的，拥抱变化，学习新知识，才能保持竞争力！

下次再见！

发表回复 取消回复

发表回复取消回复