qieyun-autoderiver icon indicating copy to clipboard operation
qieyun-autoderiver copied to clipboard

Line breaking rules are being ignored in the output due to `display: inline-block` of `<ruby>` wrappers

Open graphemecluster opened this issue 1 year ago • 1 comments

無論新版還是舊版也有這個標點符號換行(禁則処理)問題。刪除這行的一些 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

graphemecluster avatar Sep 11 '22 23:09 graphemecluster

css-line-break 之類的 library 來人手計算也不是不行啦,但這會導致執行速度變慢,而且綾香曾經説過希望讓這些東西留給 rendering engine。

graphemecluster avatar Sep 11 '22 23:09 graphemecluster