text-spacing-trim

可用性有限

此功能不是基线功能，因为它在一些最广泛使用的浏览器中无法正常工作。

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表。

text-spacing-trim CSS 属性控制在相邻字符之间（字距调整）以及文本行开头或结尾处设置的中文/日文/韩文 (CJK) 标点字符的内部间距。

语法

css
/* Keyword values */
text-spacing-trim: normal;
text-spacing-trim: space-all;
text-spacing-trim: space-first;
text-spacing-trim: trim-start;

/* Global values */
text-spacing-trim: inherit;
text-spacing-trim: initial;
text-spacing-trim: revert;
text-spacing-trim: revert-layer;
text-spacing-trim: unset;

值

<spacing-trim>

定义不同的间距修剪选项。可用值为

normal

将 CJK 全角开头标点字符设置为在每行的开头为全角。将 CJK 全角结尾标点字符设置为在每行的结尾为全角，或者如果它们在对齐前不适合该行，则设置为半角。折叠标点字符之间的间距。

space-all

所有 CJK 全角标点字符都设置为全角。

space-first

行为与 normal 相同，除了 CJK 全角开头标点字符设置为在文本块容器的第一行的开头为全角，以及在每个后续行（在显式换行符（如换行符）之后）的开头为全角。

trim-start

行为与 normal 相同，除了 CJK 全角开头标点字符设置为在每行的开头为半角。

注意： CSS 文本 模块还定义了 trim-both, trim-all, 和 auto 值。但是，这些值目前在任何浏览器中都未实现。

描述

text-spacing-trim 属性将间距/字距调整应用于 CJK 标点字符，以根据 日语文本布局要求 (JLREQ) 和 中文文本布局要求 (CLREQ) 生成视觉上令人愉悦的排版。

许多 CJK 标点字符包含字形内部间距。例如，CJK 句号和 CJK 右括号通常在其右侧具有字形内部间距，以使其具有与其他表意文字字符一致的恒定 前进度量。但是，当它们连续出现时，字形内部间距可能会变得过大。

text-spacing-trim 可用于调整相邻字符之间（字距调整）以及文本行开头或结尾处的过度间距。一般来说

  • 如果全角标点字符设置为全角，则其两侧都设置了内部间距，并且宽度与一个汉字相同。
  • 如果全角标点字符设置为半角，则仅在其一侧设置内部间距，另一侧与开头（对于开式标点字符）或结尾（对于闭式标点字符）对齐。半角字符通常是汉字宽度的一半。

注意：为了避免过度字距调整的风险，字体必须具有 OpenType 备用半角 (halt) 功能、上下文半角间距 (chws) 功能或两者兼备。如果字体不具有任何一项功能，则禁用 text-spacing-trim。

全角标点折叠

当标点字符对彼此相邻时，它们之间的空格将根据以下规则折叠

  • 如果前一个字符是全角开式标点字符、全角中间点、汉字空格 (U+3000)、字体大小相同或更大的全角闭式标点字符，或属于Unicode 通用类别“开式标点” Ps的字符，则将全角开式标点字符设置为半角。否则，将其设置为全角。
  • 如果下一个字符是全角闭式标点字符、全角中间点、汉字空格 (U+3000)、字体大小更大的全角开式标点字符，或属于Unicode 通用类别“闭式标点”（Pe）的字符，则将全角闭式标点字符设置为半角。否则，将其设置为全角。

正式定义

初始值normal
应用于文本元素
继承是
计算值按指定
动画类型离散

正式语法

text-spacing-trim = 
  <spacing-trim>  |
  auto            

<spacing-trim> = 
  space-all    |
  normal       |
  space-first  |
  trim-start   |
  trim-both    |
  trim-all

示例

text-spacing-trim 值比较

此示例比较了四个不同的 text-spacing-trim 属性的效果，并将它们应用于四个相同的段落，以便您可以看到每个属性之间的视觉差异。

HTML

html
<main>
  <div id="normal">
    <h2>normal</h2>
    <p>
      （東）、【「（東）」】。<br />
      「東」「東」「東」東東東「東」。
    </p>
  </div>
  <div id="space-all">
    <h2>space-all</h2>
    <p>
      （東）、【「（東）」】。<br />
      「東」「東」「東」東東東「東」。
    </p>
  </div>
  <div id="space-first">
    <h2>space-first</h2>
    <p>
      （東）、【「（東）」】。<br />
      「東」「東」「東」東東東「東」。
    </p>
  </div>
  <div id="trim-start">
    <h2>trim-start</h2>
    <p>
      （東）、【「（東）」】。<br />
      「東」「東」「東」東東東「東」。
    </p>
  </div>
</main>

CSS

css
main {
  font-family: "Yu Gothic", "YuGothic", "Noto Sans JP", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", sans-serif;
  display: grid;
  gap: 0.5em;
  grid-template-columns: 1fr 1fr;
  width: 70%;
  margin: 0 auto;
}
h2 {
  font-size: 80%;
  margin: 0;
}
p {
  font-size: 20px;
  border: 1px solid blue;
  margin: 0;
}
#normal {
  text-spacing-trim: normal;
  grid-column: 1;
  grid-row: 1;
}
#space-all {
  text-spacing-trim: space-all;
  grid-column: 2;
  grid-row: 1;
}
#space-first {
  text-spacing-trim: space-first;
  grid-column: 1;
  grid-row: 2;
}
#trim-start {
  text-spacing-trim: trim-start;
  grid-column: 2;
  grid-row: 2;
}

结果

规范

规范
CSS 文本模块级别 4
# text-spacing-trim 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅