是否有一个 CSS 可以根据字符的高度为每个字符呈现可变高度？

Question

下面的CSS，

.message {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2rem;
}

<display class='message'>ㄨㄢˊㄇㄢˇ</display>

产生这个输出。注意字符下方的空间

ˊ

：

有没有CSS可以根据高度渲染单个字符，这样标点符号（例如句号和逗号）和重音字符就不会占用空间？上面的单词需要显示为：

以上将用于CSS伪元素。因此，将每个字符包装在自己的 div 或 span 中是不可行的。

问题详情在这里：https://github.com/chinese-words-separator/chinese-words-separator.github.io/issues/10#issuecomment-1457266661

关于尝试不同字体的问题：

我尝试了几种字体，它们都仍然呈现重音字符（例如，

ˊ

），其下方有空格。他们基本上都产生了这个：

以下是我试过的所有字体：

对于建议嵌入额外的 div/span 的答案，我需要强调，如问题中所述，在我的特定用例中，div/span（与此相关的任何 HTML 标签）不能嵌入 CSS 伪元素中。

至于使用 CSS 伪元素作为注释机制的基本原理（而不是说使用

ruby

或

div

和

span

的组合），CSS 伪元素是 Chrome 扩展程序不会注释文本的唯一方法干扰浏览器的复制粘贴（即 Ctrl + C）功能和第 3 方 Chrome 扩展词典的功能。 Ruby 标签不是一个选项，即使它可以嵌入 HTML。 Ruby 过多地干扰了浏览器的复制粘贴和其他词典。

使用

span

和

div

进行注释时，在突出显示和复制原始文本时也会复制其内容。

尝试复制下面链接中的原文。如果注释机制使用技术，例如

ruby

和或

div/span

，这些标签的内容也会被复制：

https://www.w3schools.com/code/tryit.asp?filename=G08ZZXDZJ7MX

使用 CSS 伪元素注释文本是 Chrome 扩展程序不干扰浏览器复制粘贴功能的唯一选择，也是不干扰其他第三方 Chrome 扩展程序的唯一选择。

下面是CSS伪元素在代码（Chrome扩展）中作为注释器的用法：https://github.com/chinese-words-separator/chinese-words-separator.github.io/issues/9#issuecomment-1452879797

Answer 1

.message {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2rem;
}

<display class='message'>ㄨㄢˊㄇㄢˇ</display>

Answer 2

我可以通过手动指定您需要调整的字符来建议您这样的事情：

.message {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2rem;

}
.accent {
  margin-bottom: -1.8rem;
}

<display class='message'>ㄨㄢ<span class="accent">ˊ</span>ㄇㄢˇ</display>

Answer 3

我解决了，现在看起来更居中了。虽然它并不完美，但它已经足够好了，不会混淆注释属于哪个词。

我使用了

-0.20em

的字母间距和Pablo V的建议使用繁体中文字体。

Noto Serif TC

字体是一个不错的选择。魔法主要来自

Noto Serif TC

字体。

之前

注意单词

的

、

是

、

故事

和

如何

。尽管使用

flex-direction: column-reverse; align-items: center

，他们的注释看起来更顶部对齐

之后

我还在用

flex-direction: column-reverse; align-items: center

，但是有了

letter-spacing: -0.20em;

和

font-family: Noto Serif TC

注意单词

的

、

是

、

故事

和

如何

，它们的注释现在看起来比以前更垂直居中了

字母间距

-0.20em

不是硬编码的，用户可以选择哪种字体组合和字母间距（

Guide spacing

）为他们和他们的眼睛提供最佳效果