ブラウザのレイアウトエンジンを自作してみた

BRANK

前々から自作ブラウザを作ってみたかったんですよね。作ります。今回はブラウザのGUI周りの、主にレイアウトの座標計算モジュールを自作しました。CSS のボックスモデル, Flex, Grid の座標計算というのが伝わりやすいでしょうか。HTMLパーサ/CSSパーサ/CSSクエリエンジン/ペインティングも一部実装しましたが、レイアウト可視化のテスト用と割り切っていて、ちゃんと作ったのは主にレイアウトの座標計算周りになります。作ったもの雑なプレイグラウンド で Sixel を描画して Google を表示したもの。今回は主に座標計算周りの実装なので background-color やフォント周りは未実装なんですが、矩形だけでは自分の目視デバッグもしんどかったので、最低限のビットマップフォントをレンダリングできるようにしました。リポジトリ のWASMモジュール Yoga Layout Engine があります。React Native や Ink TUI の内部で使われており、主に flexbox の計算を担当します。 製の taffy という実装があります。これは Firefox Servo や Zed Editor などでも使われており、 flexbox だけでなく Grid も実装しています。 はそれ自体でCSSを計算する能力は持ちません。これはCSSパースし…