Zhuyin is not vertically centered to its Chinese characters word

[chinese-words-separator]

Issue mentioned here: https://github.com/chinese-words-separator/chinese-words-separator.github.io/issues/10

related to: https://github.com/chinese-words-separator/chinese-words-separator.github.io/issues/9

Find out if browsers support rendering variable heights for characters (tones character in case of CWS)

[chinese-words-separator]

Will close this for the time being as solutions that devs have come up with on Stack Overflow Q & A are not feasible due to the solution's approaches being intrusive to browser's copy-paste functionality

Will re-open this when a browser tech to render variable-height text in non-full height manner becomes available, centering text vertically will then become feasible

[chinese-words-separator]

Added an option Guide spacing to set the letter's spacing so that zhuyin will be narrower and make it not spill out of the hanzi it is annotating. This is better than setting the Guide's size to smallest which affects the readability of the zhuyin

Settings. Hanzi: 2x; Guide font: Monaco; Guide size: Smaller; Guide position: Under

Before Guide spacing, zhuyin often spills out of the hanzi it is annotating

After Guide spacing, zhuyin spills out less

With Guide spacing of -0.18:

Guide spacing also solves the problem of center-aligning zhuyin when the writing system is vertical. Not perfectly centered, but good enough that it can make the zhuyin not spill out of the hanzi it is annotating. See details below

Vertically-written text

Settings. Hanzi: 2x; Guide font: Monaco; Guide size: Smaller; Guide position: Under

Before Guide spacing, zhuyin often spills out of the hanzi it is annotating

Take notice of the words 的, 是, 故事, and 如何. Their zhuyin annotations look more top-aligned than centered

After Guide spacing, zhuyin spills out less

Same settings of: Hanzi: 2x; Guide size: Smaller; Guide position: Under

With Guide spacing of -0.20; Hanzi font: Noto Serif TC; Guide font: Same as Hanzi

Take notice of the words 的, 是, 故事, and 如何. Their zhuyin annotations now look more centered than before

Noto Serif TC has tone marks that are a little lowered, and neutral tone (dot) that is totally centered. Thus it helps to make zhuyin annotations look more centered when written vertically. So far, this is the only font that is observed that has the qualities mentioned above, and its tone marks are also well-emphasized making it easier to read, as compared to other fonts' tone marks that looks subtle making tone marks harder to read

For best result so that zhuyin will totally not spill out of the hanzi it is annotating, use a Hanzi size of 2.5x, Guide size of Smallest, Guide spacing of -0.16 (we can now make the spacing a little wider as we are using Guide size of Smallest anyway)

Complete settings for the result above: