如何用CSS实现字符高度自适应渲染？适配伪元素场景

我需要一套合适的CSS方案，实现根据字符自身高度可变高度渲染，让标点、重音字符（如ˊ）不占用额外空间。

现有代码及问题表现 #

当前使用的CSS和HTML代码如下：

CSS代码 #

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

HTML代码 #

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

这段代码的渲染效果存在问题：重音字符ˊ下方有多余空白：

期望实现的效果是让文字紧密排列，消除重音符号的额外空白：

关键限制条件 #

• 该效果必须能应用在CSS伪元素上，因此无法将每个字符用div或span单独包裹。
• 试过多款字体，但所有字体都存在重音字符下方留空白的问题：
  
  尝试过的字体列表：
  

选择CSS伪元素的原因 #

使用CSS伪元素作为注解机制是唯一可行方案，因为它不会干扰：

1. 浏览器复制粘贴（Ctrl + C）功能
2. 第三方Chrome扩展词典功能

其他方案如Ruby标签、span/div包裹注解都会严重干扰上述功能，比如选中复制原文时会连带复制注解内容。

内容的提问来源于stack exchange，提问作者Michael Buen