Dropflow の紹介
- Dropflow は、基本的な CSS 標準（インライン、ブロック、フロート、ポジショニング、テーブルなど）の範囲を探るために作られた CSS レイアウトエンジン。
- 高品質なテキストレイアウト実装をサポートし、世界中のさまざまな言語を表示できる。
- バックエンドでは Node と node-canvas を使って PDF や画像を生成したり、ブラウザでは canvas 上にリッチで折り返し付きのテキストをレンダリングしたりするために利用できる。
主な機能
float のような複雑なものを含む 30 以上のプロパティをサポート- 双方向テキストおよび RTL テキストをサポート
- HTML と CSS を受け取るだけでなく、オブジェクトでスタイル指定する Hyperscript（
h()）API をサポート
- すべての OpenType/TrueType バッファを登録する必要がある
- 書記素単位でのフォントフォールバック
- 色付き発音記号をサポート
- 望ましい改行処理（例: 次の行の先頭へパディングを移動）
- 最適化された shaping
- 継承およびカスケードスタイルは二重に計算されない
- 可能な限り多くの CSS レイアウトのエッジケースに対応
- 完全な型付け
- 多数のテスト
- 高速
サポートされる CSS ルール
- インラインフォーマット:
color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space などのプロパティが動作する。
- ブロックフォーマット:
clear, float プロパティが動作する。
- ボックスとポジショニング:
background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index などのプロパティが動作する。
使い方
- Dropflow は、継承済みかつ計算済みスタイルを持つ DOM 上で動作する。
h() 関数を使って DOM を生成し、スタイルは通常のオブジェクトとして指定する。- レイアウト前にフォントを登録することは必須の手順。
- canvas 全体のサイズに合わせてレイアウトし、描画できる。
パフォーマンス特性
- パフォーマンスは正確性の次に重要な目標。
- 複数のサンプルを通じて性能を確認できる。
- 2019 年モデルの MacBook Pro では HTML を画像に変換するのに 9ms、2012 年モデルの MacBook Pro では 13ms かかる。
- 『星の王子さま』を HTML から画像へ変換するのに、2019 年モデルの MacBook Pro では 160ms 未満、2012 年モデルの MacBook Pro では 250ms 未満で済む。
- 10 文字の単語を生成してレイアウトするのに（描画を除く）、2019 年モデルの MacBook Pro では 25µs 未満、2012 年モデルの MacBook Pro では 50µs 未満で済む。
- Hyperscript API を使えば HTML と CSS のパース工程を省略し、DOM を直接生成して最速のパフォーマンスを実現できる。
API
- フォント登録と DOM 生成が最初の 2 ステップ。
- DOM を canvas にレンダリングしたり、レイアウトを保持したい場合は低レベル関数を使うこともできる。
HarfBuzz
- グリフレイアウトは WebAssembly にコンパイルされた HarfBuzz によって実行される。
- これにより、
measureText API の使用時には不可能なレベルの精度を実現できる。
謝辞
- dropflow には
package.json の依存関係はないが、多くの他プロジェクトのおかげで実現している。
- JavaScript の依存コードはプロジェクト向けに修正され、リポジトリにチェックインされている。
GN⁺の見解
- Dropflow は、Web 開発者が CSS レイアウトの複雑さに対処し、ブラウザとバックエンドの両方で一貫したテキストレイアウトを提供するための新しいツール。
- このようなツールは、特に多様な言語やフォントをサポートする必要がある国際化 Web アプリケーションの開発で役立つ可能性がある。
- HarfBuzz の採用はテキストレンダリングの精度を大きく向上させる可能性がある一方、WebAssembly 技術に慣れていない開発者にとっては参入障壁になるかもしれない。
- 類似の機能を提供する他プロジェクトとしては、CSS Grid や Flexbox を使うレイアウトライブラリがあるが、Dropflow はより伝統的な CSS レイアウト方式に焦点を当てている。
- Dropflow を導入する前には、パフォーマンスと互換性を考慮しつつ、プロジェクト要件に適しているかを評価する必要がある。
3件のコメント
元のタイトルは "Show HN: Dropflow, a CSS layout engine for node or <canvas>" だったんですね。今は "GN⁺: HN紹介: Node または <canvas> 向け CSS レイアウトエンジン、Dropflow</canvas>" として入っていますね。
タイトルにタグがあるので、詳細ページのタイトル部分が崩れますね..笑 エスケープを..
Hacker Newsのコメント