unitone v6.1.5 の概要

不具合の修正

• 縦書きブロックの js での処理を見直し

縦書きブロックの js での処理を見直し

修正しては新たな不具合が…というのが続き、連続アップデートになってしまっていたので、ちょっと根幹のところからちゃんとやり直そうと思ってメモしたのを転載します。縦書き難しい……。

現状

• 縦書きブロックの幅と、子ブロックの幅の合計から何行の折返しになるか計算。
• 折返しが発生する場合は column-count: 2 を付与。
• 2行分しか高さが確保されないので、最後尾の要素の bottom をもとに height を算出し付与。

問題点

• 文章がなだらかに折り返されるわけではない（詳しくはわからないがある程度まとまった分量、あるいは文章の区切り？で折り返されるのかも）ので、計算通りの行数にならない場合がある。

改善案

• 高さを付与するのではなく、適切な column-count を指定する方式に変更する。
• 前述の通り、一発で適切な column-count を計算で出すのは難しいので、column-count を1ずつ上げていき、収まりが良い数値になったところでその数値に決定する。

この改善案の問題点

• column-count が付与された場合、その行数に文章が均等に割り振られる。なので1段落だけ折り返せば良い場合でも、そうはならずに複数の段落が折り返され、行の余った部分に大きな余白ができてしまうことがある。
• column-count: 1 で折り返させるのが（高さ問題はおいておいて）一番きれいに折り返すが、Safari は 2 以上じゃないと折り返さない。

結論

• 基本 column-count: 1。ただし Safari は 1 だと折り返さないので、折り返していない場合は 2 にする処理を入れる。
• これでとりあえず全ブラウザで折り返すので、最後の要素の bottom を算出 → 必要な高さを算出して height を適用する。
• ブロック側で attributes や子要素を監視してたけど、ライブラリ側で ResizeObserver だけじゃなく MutationObserver を使って監視する。