Zhuyin (bopomo) intonations not displayed correctly when text is vertically aligned

[supercontingency]

When Chinese text is vertically aligned, the zhuyin symbols produced by the Chinese-Word-Separator are rotated but the intonations are not, thereby making it unreadable. Here is an example

[chinese-words-separator]

Interesting, Chinese words separator is working on your Google Docs?

CWS (like many other Chrome extension) is not working on Google Docs anymore as Google now re-implemented Docs as Canvas-based technology instead of HTML-based. Chrome extensions work on HTML primarily. Some few developers managed to make their extensions work on Canvas-based technology, Google embed some text data (e.g., hanzi) on the canvas that extension makers can make their Chrome extensions read, but it’s difficult to work on reading that embedded text, and it is not documented well. And there's no guarantee that Google will permanently support adding that embedded text data, they might be introducing another breaking change in the future that will render Chrome extension unusable on their Google Docs. Hence only few developers managed to make their extensions work on Canvas-based Google Docs. I digress

Perhaps Google is not yet migrating vertical or right-to-left languages to Canvas-based tech hence CWS is still working on your Google Docs since it might be possibly be still HTML-based. Mind to share a public version of your Google Docs file? Just partial content in the file is ok

The intonations are there, it's just vertical too. It’s challenging to rotate the zhuyin tones, it’s fraught with many challenges. In fact, even on non-vertical text, I already want zhuyin tone marks to occupy narrower width so that zhuyin won’t eat more space than the hanzi itself, pinyin is more space-saving than zhuyin. I research and there are no ways to make the tone marks have narrower width

The feasibility to rotate the zhuyin tone marks is there, but the full width intonation is unsightly and uses too much space. Notice that the arrangement of zhuyin and its tone mark have to be reversed too, might have to do with how browsers render right to left languages

<X-Z p="běn" z="ˇ&#10;ㄅㄣ" l="6"><X-H><X-B t="ˇ">本</X-B></X-H></X-Z>

Another challenge is that CWS annotation granularity is by word, not by character. This will cause too many changes on the data structure of CWS and how it will deal with multi-character word

For the time being, set the hanzi's color to tone-based (based on your screenshot, you are using complexity/HSK-based color) instead so that it will be easier to spot the tones of a word. Then to determine the complexity(e.g., HSK) of a word, just hover the dictionary to the word. The complexity of character 本 is at HSK level 6

Set to tone-based color:

Show word's complexity/HSK appear on the dictionary:

The first screenshot is using Hanping-themed tones. Here iss Pleco-themed tones:

By the way, I'm amazed that browsers can smartly re-layout the position of text elements based on the language's orientation (e.g., right-to-left, vertical). I did not do anything in code that will make zhuyin appear on right side of the hanzi, browsers smartly figure that it makes more sense to re-orient the above/under to right/left when using vertical+right-to-left languages. However, it also re-layout the dictionary to be vertical and right to left :D

[chinese-words-separator]

Having looked at screenshots again, now I realized what you mean that intonations are not rotated. The tones are in fact rotated too, hence ˇ looks like less than <. The browsers think that ˇ is not a Chinese character, so it's treated as English (see the word Prologue on the screenshots) and being rotated as sideways too instead of just being re-oriented

I hope this one is easy to fix

[chinese-words-separator]

It's really confusing when tones are rotated, especially the 2nd and 4th tone. They become swapped when rotated, lol :D

[chinese-words-separator]

Thanks for reporting this error, it's corrected now, just need to add text-orientation: upright. Will publish the fix on Chrome web store and App store

[chinese-words-separator]

The fix is on 8.24.84.1201, on Chrome web store now

Fixed the dictionary's direction as well