レイアウト崩れ

[ttizze]

現状

テキストノードを個々にAPIに投げて翻訳する仕様。
ピリオドや句点を文章の区切りとし、原文1つに対し訳文1つ、という形でルビを割り当てている。
文の途中で折返しが発生した場合、以下画像のように読みにくいレイアウトになる。

下記のようなコードである。

These powerful tools utilize machine learning and artificial intelligence to deliver fast and accurate translations in a wide range of languages. これらの強力なツールは、機械学習と人工知能を活用して、さまざまな言語で迅速かつ正確な翻訳を提供します。

理想

理想としては下記のように、原文の折返し部分でルビを区切り、次の行にルビを割り当てたい。

These powerful tools utilize machine learning and artificial intelligence to deliver これらの強力なツールは、機械学習と人工知能を活用して、 fast and accurate translations in a wide range of languages. さまざまな言語で迅速かつ正確な翻訳を提供します。

解決案

const element = document.getElementById("myText");
const rects = element.getClientRects();
のようにすると文章が何行で表示されているかを取得できる。
これを用いてうまいことできないか。