zhuyin (bopomo) inconsistently aligned

[supercontingency]

Thank you for addressing the issue of zhuyin intonation not being properly oriented when text is vertically aligned in such prompt manner. I really think you have created an amazing tool for Chinese learners. There are a couple other possible improvements that I can see that would make this even better

1. The zhuyin is often inconsistently aligned, both when text is displayed horizontally and vertically. For example in the phrase 咖啡壺. Sometimes zhuyin is aligned to the beginning of the word, sometimes the end and sometimes its aligned with the previous word.

2. I'm using another Chrome extension (Verticalize Rotate 90 Degrees) to rotate Chinese text from horizontal to vertical. Is it possible to incorporate this functionality into CWS?

3. Is it possible to remove Zhuyin/pinyin from learned words

Thanks again for your help and to answer your previous question, I am 1) Publishing my google docs into a web page, 2) verticalize the text and 3) use the CWS to annotate the text to help my daughter read Chinese texts. This opens up a lot of resources for kids living abroad.

[chinese-words-separator]

The zhuyin is often inconsistently aligned, both when text is displayed horizontally and vertically. For example in the phrase 咖啡壺. Sometimes zhuyin is aligned to the beginning of the word, sometimes the end and sometimes its aligned with the previous word.

As far as I'm aware, browsers render fonts in full height even if the fonts are displayed vertically. Tones are fonts too:

export const ZHUYIN_TONE = ['', 'ˊ', 'ˇ', 'ˋ', '˙'];

Hence in vertical mode, it is prominently not look centered, it looks like it is aligned to top instead, e.g.,

I don't know if it is technologically possible to nudge browsers to render the fonts partially/proportionally when displayed in vertical mode. I'll let you know if there is a browser tech that can make this happen, I do hope there is

As for horizontal zhuyin not being centered to the word it belong, I believe it's an illusion due to character's shape and tone's shape

還's furthest leftmost point is in the leftmost bottom part of its radical 辶, not its top component `, the top component gives the illusion that zhuyin is nearer to left side instead of it being exactly centered; likewise with 有, its long component 一 gives the illusion that the rightmost character ˇ of zhuyin ㄏㄞˊㄧㄡˇ is far from rightmost side

To illustrate that it is computationally centered by the browser (not necessarily visually), I put rectangles of equal size on both left side and right side of the word 還有 below. Both rectangles made contact to the leftmost tip and rightmost tip of the zhuyin; if it is not centered, one of the rectangles will not make contact to zhuyin

2. I'm using another Chrome extension (Verticalize Rotate 90 Degrees) to rotate Chinese text from horizontal to vertical. Is it possible to incorporate this functionality into CWS?

Will integrate the functionality to CWS if it can be adapted to CWS

3. Is it possible to remove Zhuyin/pinyin from learned words

Hiding annotations (zhuyin/pinyin) of learned word is a good tool for learners. Got to think of mechanism that won't complicate the configuration and won't be in conflict with Exclude words from color mechanism. Currently, to mark learned words, the learner have to activate a color mode (e.g., rotating, hsk-based, tone-based), so that learned words are distinguishable from not yet learned words. Should have thought of hiding guide too (pinyin/zhuyin) when marking learned words was introduced in version CWS 2.0, marking learned words is deeply integrated with using color mode first; don't know yet the extent of the code that will be impacted when there will be two modes of marking learned words

But it need to be made, I noticed that there should be a mechanism to hide learned annotation too when hiding/showing annotations based on complexity (i.e., HSK) was created on version 8.24.84.83x

[chinese-words-separator]

It's now possible to exclude learned word from guides (zhuyin/pinyin)

Before. Learned words can be excluded from colors only:

After (on 8.24.84.1230). Learned words can be excluded either via colors or guides (pinyin/zhuyin), or both:

[chinese-words-separator]

Example outputs. Learned words: 有，了，的

[chinese-words-separator]

It now look more centered vertically. Not perfect, but good enough not to confuse which hanzi the zhuyin is annotating

Details here: #11 (comment)