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

The CSS below,

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

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

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., Ctrl + C) 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