tshet-uinh-autoderiver
tshet-uinh-autoderiver copied to clipboard
Line breaking rules are being ignored in the output due to `display: flex` of `<ruby>` wrappers
無論新版還是舊版也有這個標點符號換行(禁則処理)問題。刪除這行的一些 consequences 是:
- 有多個推導方案時,會導致行與行之間的空隙消失。我試過很多純 CSS 方法也解決不了這個問題,也許最終只能我們只能以動態計算 line-height 的方式解決,但這又會導致沒有 ruby 的行空隙過大。
- 會導致 tooltip 的位置計算錯誤。不是 block 或 inline-block 時,
.getBoundingClientRect()
並不會考慮 rt 的 dimension。traverse element 的所有 child 並計算 minimum bounding box 也許可以解決這個問題。
新版
https://github.com/nk2028/qieyun-autoderiver/blob/e06b116690f1995d710b78337468c8656e9c2509/src/Components/TooltipChar.tsx#L43
舊版
https://github.com/nk2028/qieyun-autoderiver/blob/0aa83ddb796ce743aefcf6d0a800f57f8f931e2d/src/App.scss#L319
用 css-line-break 之類的 library 來人手計算也不是不行啦,但這會導致執行速度變慢,而且綾香曾經説過希望讓這些東西留給 rendering engine。