文本强调标记：`text-emphasis` 在 CJK 排版中的点号位置与行高影响 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CJK 排版中的 `text-emphasis`: 点号位置与行高影响

大家好，今天我们来深入探讨一下 CSS 中的 text-emphasis 属性，特别是它在 CJK (Chinese, Japanese, Korean) 排版中的表现，以及它对行高的影响。text-emphasis 用于在文本旁边添加强调标记，通常是点、圈、或其他符号。虽然这个属性看似简单，但在 CJK 环境下，它的行为却受到多种因素的影响，需要我们深入理解才能正确使用。

`text-emphasis` 属性概览

首先，我们回顾一下 text-emphasis 相关的 CSS 属性：

text-emphasis (shorthand): 用于同时设置 text-emphasis-style 和 text-emphasis-color。
text-emphasis-style: 定义强调标记的样式，例如 dot, circle, double-circle, triangle, sesame 等。还可以使用字符串作为强调标记。
text-emphasis-color: 定义强调标记的颜色。
text-emphasis-position: 定义强调标记的位置，例如 over 或 under。

一个简单的例子：

p {
  text-emphasis: dot red; /* style: dot, color: red */
  text-emphasis-position: under;
}

这段 CSS 会在  元素中的文本下方添加红色的点作为强调标记。

CJK 环境下的特殊性

在 CJK 文本中，text-emphasis 的行为与拉丁文本有所不同。主要区别在于：

强调标记的默认样式： CJK 文本通常默认使用 sesame (芝麻点) 作为强调标记，而不是 dot。
强调标记的默认位置： 强调标记通常位于文本上方 (over)，而不是下方 (under)。
行高影响： 强调标记可能会增加行高，特别是在标记位于文本上方时。

点号位置

text-emphasis-position 属性控制强调标记相对于文本的位置。它有两个主要值：

over: 强调标记位于文本上方。这是 CJK 文本的默认位置。
under: 强调标记位于文本下方。

在 CJK 环境下，over 位置更为常见，因为它更符合传统的排版习惯。但是，under 位置也可以用于特定的视觉效果。

例如：

<p style="text-emphasis: sesame black; text-emphasis-position: over;">强调文本示例</p>
<p style="text-emphasis: sesame black; text-emphasis-position: under;">强调文本示例</p>

上面的代码会分别在文本上方和下方添加芝麻点。

行高影响

text-emphasis 对行高的影响是 CJK 排版中一个需要特别注意的问题。当强调标记位于文本上方时，它可能会超出默认的行高范围，导致文本行之间的间距增大。

问题：

默认情况下，浏览器可能会尝试自动调整行高以适应强调标记，但这并不总是能够产生理想的效果。有时，强调标记可能会与其他行的文本重叠，或者导致行间距过大，影响阅读体验。

原因：

行高的计算方式通常基于字体的高度，而 text-emphasis 添加的标记并不属于字体本身。因此，浏览器需要额外的机制来处理强调标记所占据的空间。

解决方案：

以下是一些解决 text-emphasis 行高问题的策略：

显式设置 line-height： 通过显式设置 line-height 属性，可以控制文本行的总高度。这可以确保强调标记有足够的空间，而不会与其他行的文本重叠。
```
p {
  text-emphasis: sesame black;
  text-emphasis-position: over;
  line-height: 1.8; /* 调整行高 */
}
```
在这种情况下，我们需要根据字体大小和强调标记的大小，调整 line-height 的值，使其既能容纳强调标记，又能保持合适的行间距。
使用 padding 或 margin： 可以在包含强调文本的元素上添加 padding 或 margin，以增加其周围的空间。这可以防止强调标记与其他元素重叠。
```
span {
  text-emphasis: sesame black;
  text-emphasis-position: over;
}

p {
  padding-top: 0.5em; /* 增加顶部内边距 */
  padding-bottom: 0.5em; /* 增加底部内边距 */
}
```
这种方法可以更灵活地控制强调文本周围的间距，但需要注意避免过度增加间距，影响整体布局。
使用伪元素和绝对定位： 可以使用伪元素 (::before 或 ::after) 来模拟强调标记，并使用绝对定位将其放置在文本的上方或下方。这种方法可以更精确地控制强调标记的位置和大小，但需要更多的 CSS 代码。
```
.emphasized {
 position: relative; /* 使父元素成为定位上下文 */
 display: inline-block; /* 防止伪元素影响布局 */
}

.emphasized::before {
 content: '﹅'; /* 使用 Unicode 字符作为芝麻点 */
 position: absolute;
 top: -0.8em; /* 调整位置 */
 left: 0;
 right: 0;
 text-align: center;
 color: black;
 font-size: 0.8em; /* 调整大小 */
}
```
```
这是一段强调文本。
```
这种方法虽然比较复杂，但可以提供最大的灵活性。我们可以精确地控制强调标记的位置、大小、颜色和样式，并且可以避免 text-emphasis 属性的一些限制。

使用 JavaScript 动态调整： 可以使用 JavaScript 来动态计算强调标记的高度，并相应地调整行高。这种方法可以适应不同的字体大小和强调标记样式，但需要更多的 JavaScript 代码。

function adjustLineHeight() {
  const emphasizedElements = document.querySelectorAll('.emphasized');

  emphasizedElements.forEach(element => {
    const emphasisHeight = element.offsetHeight; // 获取元素高度
    const lineHeight = parseFloat(window.getComputedStyle(element).lineHeight); // 获取行高

    if (emphasisHeight > lineHeight) {
      element.style.lineHeight = emphasisHeight + 'px'; // 设置新的行高
    }
  });
}

window.addEventListener('load', adjustLineHeight); // 在页面加载完成后执行

这种方法可以自动调整行高，以适应强调标记，但需要注意性能问题。如果页面上有大量的强调文本，可能会影响页面的加载速度。

代码示例：综合应用

下面是一个综合的例子，展示了如何使用 CSS 和 HTML 来创建带有强调标记的 CJK 文本，并解决行高问题：

<!DOCTYPE html>
<html>
<head>
<title>Text Emphasis Example</title>
<style>
body {
  font-family: sans-serif;
}

.emphasized {
  position: relative;
  display: inline-block;
}

.emphasized::before {
  content: '﹅'; /* Unicode 芝麻点 */
  position: absolute;
  top: -0.8em;
  left: 0;
  right: 0;
  text-align: center;
  color: red;
  font-size: 0.8em;
}

p {
  line-height: 1.8; /* 显式设置行高 */
  padding-top: 0.5em; /* 增加顶部内边距 */
}

/* 使用 text-emphasis 属性的示例 */
.emphasis-attribute {
  text-emphasis: sesame red;
  text-emphasis-position: over;
}
</style>
</head>
<body>

<p>这是一段使用 <span class="emphasized">伪元素</span> 实现强调的文本，使用了绝对定位来精确定位强调标记，并通过调整 line-height 和 padding 来优化行高。</p>

<p>这是一段使用 <span class="emphasis-attribute">text-emphasis</span> 属性实现强调的文本，需要显式设置 line-height 来避免行高问题。</p>

</body>
</html>

在这个例子中，我们使用了两种方法来创建带有强调标记的文本：

使用伪元素和绝对定位： 这种方法可以提供最大的灵活性，可以精确地控制强调标记的位置、大小和颜色。
使用 text-emphasis 属性： 这种方法更简单，但需要显式设置 line-height 来避免行高问题。

不同浏览器的兼容性

text-emphasis 属性的兼容性在不同的浏览器中可能存在差异。一些旧版本的浏览器可能不支持该属性，或者支持的样式有限。

浏览器	支持情况
Chrome	完全支持
Firefox	完全支持
Safari	完全支持
Edge	完全支持
Internet Explorer	部分支持，可能需要前缀

为了确保在所有浏览器中都能正确显示强调标记，可以考虑使用以下策略：

使用 CSS 前缀： 对于一些旧版本的浏览器，可能需要使用 CSS 前缀来启用 text-emphasis 属性。例如，-webkit-text-emphasis 或 -moz-text-emphasis。
提供备选方案： 可以使用 JavaScript 来检测浏览器是否支持 text-emphasis 属性，如果不支持，则使用其他的方案来模拟强调标记。例如，可以使用  元素和 CSS 来创建类似的效果。
使用 CSS Reset： 不同的浏览器有不同的默认样式，可能会影响 text-emphasis 的显示效果。可以使用 CSS Reset 来清除浏览器的默认样式，确保在所有浏览器中都能获得一致的显示效果。

使用 Unicode 字符

除了使用 text-emphasis 属性，还可以直接使用 Unicode 字符来表示强调标记。Unicode 中包含了一些常用的强调标记字符，例如：

﹅ (U+FE45): 芝麻点 (Sesame Dot)
、 (U+3001): 顿号
。 (U+3002): 句号

可以直接在 HTML 中使用这些字符，而无需使用 CSS。

<p>这是一段带有 Unicode <span style="color: red;">﹅</span> 强调标记的文本。</p>

这种方法简单直接，但缺乏灵活性。无法通过 CSS 来控制强调标记的位置、大小和样式。

`text-emphasis` 的局限性

尽管 text-emphasis 属性可以方便地添加强调标记，但它也存在一些局限性：

样式有限： text-emphasis-style 属性提供的样式选项有限。无法自定义强调标记的形状和外观。
位置控制有限： text-emphasis-position 属性只能控制强调标记位于文本上方或下方。无法精确地控制强调标记的位置。
行高问题： 强调标记可能会导致行高问题，需要额外的处理。
兼容性问题： text-emphasis 属性的兼容性在不同的浏览器中可能存在差异。

因此，在实际应用中，需要根据具体的需求和场景，选择合适的方案。如果需要更灵活的控制，可以考虑使用伪元素和绝对定位来模拟强调标记。

强调标记在不同 CJK 语言中的习惯

虽然 text-emphasis 属性在 CJK 语言中表现相似，但不同语言在强调标记的使用习惯上存在细微差别：

中文： 强调标记通常使用芝麻点（﹅）或实心圆点。强调位置通常在文字上方。
日文： 强调标记也常使用芝麻点，有时也会使用空心圆圈。位置通常在文字上方。
韩文： 强调标记的使用相对较少，但如果使用，通常也是芝麻点或实心圆点，位置在文字上方。

这些差异并非绝对，实际使用中会根据具体的排版风格和设计需求进行调整。

避免滥用 `text-emphasis`

虽然 text-emphasis 可以增强文本的视觉效果，但过度使用可能会适得其反。过多的强调标记会分散读者的注意力，降低阅读体验。

建议：

只在需要强调的关键文本上使用强调标记。
选择合适的强调标记样式和颜色，避免过于刺眼或突兀。
注意强调标记与周围文本的间距，避免重叠或过于拥挤。
在移动设备上，要特别注意强调标记的显示效果，避免影响文本的可读性。

总结：灵活运用，解决行高问题

text-emphasis 属性在 CJK 排版中是一个有用的工具，可以用来增强文本的视觉效果。但是，需要注意它对行高的影响，并采取相应的措施来解决行高问题。可以通过显式设置 line-height、使用 padding 或 margin、使用伪元素和绝对定位、或使用 JavaScript 动态调整等方法来解决行高问题。在实际应用中，需要根据具体的需求和场景，选择合适的方案。

更多IT精英技术系列讲座，到智猿学院

CJK 排版中的 text-emphasis: 点号位置与行高影响

text-emphasis 属性概览