1M AI Newsによると、Midjourneyのエンジニアであり、Reactアニメーションライブラリreact-motionの著者であるCheng Louは、依存関係ゼロの純粋なJavaScript/TypeScriptテキスト測定およびレイアウトライブラリPretextをオープンソース化しました。 Pretextは、ブラウザのDOM測定（getBoundingClientRectやoffsetHeightなど）を回避し、純粋な算術計算を用いてテキストの高さや行の折り返しを計算することで、レイアウトの再フローを防ぎます。 これは、テキストの高さや行の折り返しを純粋な算術によって計算することにより、レイアウトの再フローを避ける仕組みです。 Pretextは2つのフェーズで動作します：prepare()はCanvas APIを使用して文字の幅を一度に測定し、layout()はキャッシュされた幅データに基づいて純粋な算術計算を行います。 500のテキストセグメントを使ったベンチマークテストでは、prepare()は約19msかかり、layout()はわずか0.09msしか必要ありませんでした。 Cheng Louはサポート記事で「パフォーマンスの改善は漸進的ではなく、質的な変化です：0.05msと30msの比較、ゼロの再フローと五百の比較です」と述べました。 このライブラリは中国語、日本語、韓国語、アラビア語を含むすべての言語をサポートし、絵文字や混合方向のテキストにも対応しており、DOM、Canvas、SVGにレンダリングできます。 典型的なアプリケーションシナリオには、1. 高さの推測なしの仮想リストとオクルージョンカリング 2. マーソンリーレイアウトのようなJavaScript駆動のカスタムレイアウト 3. 幅が適応的に縮小するマルチラインテキストのチャットバブル 4. 編集レイアウトにおける画像の周りのテキストの折り返しが含まれます。
「テキストレイアウトの未来はCSSではない」：MidjourneyエンジニアがOpen Sourcesをプレテキストとして公開
1M AI Newsによると、Midjourneyのエンジニアであり、Reactアニメーションライブラリreact-motionの著者であるCheng Louは、依存関係ゼロの純粋なJavaScript/TypeScriptテキスト測定およびレイアウトライブラリPretextをオープンソース化しました。
Pretextは、ブラウザのDOM測定（getBoundingClientRectやoffsetHeightなど）を回避し、純粋な算術計算を用いてテキストの高さや行の折り返しを計算することで、レイアウトの再フローを防ぎます。
これは、テキストの高さや行の折り返しを純粋な算術によって計算することにより、レイアウトの再フローを避ける仕組みです。
Pretextは2つのフェーズで動作します：prepare()はCanvas APIを使用して文字の幅を一度に測定し、layout()はキャッシュされた幅データに基づいて純粋な算術計算を行います。
500のテキストセグメントを使ったベンチマークテストでは、prepare()は約19msかかり、layout()はわずか0.09msしか必要ありませんでした。
Cheng Louはサポート記事で「パフォーマンスの改善は漸進的ではなく、質的な変化です：0.05msと30msの比較、ゼロの再フローと五百の比較です」と述べました。
このライブラリは中国語、日本語、韓国語、アラビア語を含むすべての言語をサポートし、絵文字や混合方向のテキストにも対応しており、DOM、Canvas、SVGにレンダリングできます。
典型的なアプリケーションシナリオには、1. 高さの推測なしの仮想リストとオクルージョンカリング 2. マーソンリーレイアウトのようなJavaScript駆動のカスタムレイアウト 3. 幅が適応的に縮小するマルチラインテキストのチャットバブル 4. 編集レイアウトにおける画像の周りのテキストの折り返しが含まれます。