Vertical text and Chinese zhuyin/bopomofo - some characters are rotated 90 degrees

I’m learning Chinese and I started typing text vertically from right to left with traditional characters. There is an annotation system called zhuyin / bopomofo used in Taiwan instead of pinyin (the Latin characters used in Mainland China). It works fine, except I noticed my bopomofo accents are turned the other way - it seems like even though the text is vertical, the app does not realise they have to keep their relative position to the text and turns them around.

I noticed the problem particularly with the symbol ㄧ (which shows vertically even though it should remain horizontal), as well as with the accent marks if typed independently (ˋ becomes ˊ and vice versa, and ˇ points left and not downwards like it should.

Here is the Bopomofo text in Kate:

And here you can see the same text in vertical LibreOffice - all letters are displayed correctly, except the letter ㄧ and the accent marks which are flipped around:

So this is definitely a defect that should be corrected, and besides - can we think of a way to annotate with the accents to the right of the actual transcriptions for each word, like they do in Taiwanese textbooks?

Here are some examples of what I mean under the “Bopomofo written on its own” section:

The end result should be what is shown under “Vertical base, vertical annotation” on the same webpage - and it will be nice if we had some plugin that did that for each Chinese character.

(I tried the “Bopomofo annotate” plugin in the past, but this is not how it worked, and I had problems uninstalling it; plus it will be better to enter one’s own bopomofo and accent and not have them appear automatically).

The accent marks does not appear properly. This can be an issue and need someone fix it in the future.