Is there a CSS that can render variable height for each character depending on the height of a character?

The CSS below,

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

produces this output. Notice the space beneath character ˊ:

Is there a CSS that can render individual characters based on their height, so that punctuations (e.g., period and comma) and accent characters won't take up space? The word above needs to be displayed as this instead:

The above will be used on CSS pseudo elements. Thus, wrapping each character in their own div or span is not feasible.

Problem details are here: zhuyin (bopomo) inconsistently aligned #10

For the question about trying different fonts:

I tried several fonts, and all of them still render accent characters (e.g., ˊ) with space underneath it. All of them basically produces this:

Here are all the fonts I've tried:

For the answers that advises to embed extra div/span, I need to emphasize as stated in the question that on my specific use case, div/span(any HTML tags for that matter) cannot be embedded in CSS pseudo elements.

As for the rationale for using CSS pseudo elements as an annotation mechanism (instead of say using ruby or combo of div and span), CSS pseudo elements is the only way to annotate text that the Chrome extension will not to interfere with browser's copy-paste (i.e., <kbd>Ctrl</kbd> + <kbd>C</kbd>) functionality and on functionality of 3rd-party Chrome extension dictionaries. The Ruby tag is not an option even if it can embed HTML. Ruby interferes too much with the browser's copy-paste and other dictionaries.

Using span and div for annotations will get their content being copied too when highlighting and copying the original text.

Try copying the original text in the link below. If the annotation mechanism is using tech, such as ruby and or div/span, those tags' content will get copied too:

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

Annotating text using CSS pseudo elements is the only option for a Chrome extension not to interfere with the browser's copy-paste functionality, and for it not to interfere with other third-party Chrome extensions too.

Here's how CSS pseudo elements is used in the code (Chrome extension) as annotator: Zhuyin (bopomo) intonations not displayed correctly when text is vertically aligned #9

I can suggest you something like this by specifying manually which character you need to adjust:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

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

<!-- language: lang-html -->

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

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

I solved it, and it now looks more centered. It is not perfect though, but it is good enough not to confuse on which word the annotation belongs to.

I went with using a letter-spacing of -0.20em and with the suggestion of Pablo V to use traditional Chinese fonts. Noto Serif TC font is one good choice. The magic mostly comes from Noto Serif TC font.

Before

Take notice of the words 的, 是, 故事, and 如何. Their annotation look more top-aligned despite using flex-direction: column-reverse; align-items: center

After

I am still using flex-direction: column-reverse; align-items: center, but with letter-spacing: -0.20em; and font-family: Noto Serif TC.

Take notice of the words 的, 是, 故事, and 如何. Their annotations now look more vertically-centered as compared to before.

The letter-spacing -0.20em is not hard coded. The user can choose which font combination and letter-spacing (Guide spacing) gives the best result for them and their eyes.