Chrome 76 でリリースが予定されている LayoutNG は、数年にわたる取り組みの成果として誕生した新しいレイアウト エンジンです。すぐに利用できる改善点がいくつかあり、今後はパフォーマンスの向上と高度なレイアウト機能が追加される予定です。
最新情報
- パフォーマンスの分離が改善されます。
- ラテン文字以外の文字のサポートの強化。
- 回り込みと余白に関する多くの問題を修正しました。
- ウェブ互換性に関する多くの問題を修正しました。
LayoutNG は段階的にリリースされます。Chrome 76 では、インライン レイアウトとブロック レイアウトに LayoutNG が使用されます。その他のレイアウト プリミティブ（表、フレックスボックス、グリッド、ブロックの断片化など）は、今後のリリースで置き換えられます。
デベロッパーに表示される変更
ユーザーに見える影響は最小限に抑えられるはずですが、LayoutNG によって、一部の動作がわずかに変更されます。また、多くの問題が解決し、他のブラウザとの互換性が向上します。ただし、一部のサイトやアプリケーションではレンダリングや動作が多少変わる可能性があります。
パフォーマンス特性も大きく異なります。全体的なパフォーマンスは以前と同様か、若干向上していますが、特定のユースケースではパフォーマンスが向上する可能性があり、他のユースケースでは、少なくとも短期的にはパフォーマンスが若干低下することが予想されます。
浮動小数点
LayoutNG でフローティング要素（float: left; と float: right;）のサポートが再実装され、他のコンテンツに対するフロートの配置に関する多くの正確性の問題が修正されました。
多重画像のコンテンツ
従来のフロートの実装では、フローティング要素の周囲にコンテンツを配置する際にマージンが正しく考慮されず、コンテンツがフロート自体と部分的または完全に重複していました。このバグは、画像が段落の横に配置され、回避ロジックで行の高さが考慮されていない場合に最もよく発生します。（Chromium バグ #861540 を参照）。
テキストが右側のフローティング画像と重なっている
テキストが右側のフローティング画像の横に配置されている
同じ問題が 1 行内で発生することもあります。次の例は、フローティング要素の後に負のマージンを持つブロック要素を示しています（#895962）。テキストはフロートと重ならないようにする必要があります。
テキストがフローティングのオレンジ色の要素と重なっている
テキストがフローティングのオレンジ色の要素の横に配置されている
書式設定コンテキストの配置
ブロック フォーマット コンテキストを形成する要素がフロートの横にサイズ設定されている場合、従来のレイアウト エンジンは、ブロックのサイズ設定を一定回数試行した後、あきらめます。このアプローチでは、予測不能で不安定な動作が発生し、他の実装と一致しませんでした。LayoutNG では、ブロックのサイズ設定時にすべてのフロートが考慮されます。（Chromium バグ #548033 をご覧ください）。
絶対位置と固定位置が W3C 仕様に準拠し、他のブラウザの動作に近づきました。この 2 つの違いが最も顕著に表れるのは、次の 2 つのケースです。
- 複数行の行内包含ブロック
絶対位置の包含ブロックが複数行にまたがっている場合、従来のエンジンでは、行のサブセットのみを使用して包含ブロックの境界を計算する誤りが発生する可能性があります。 - 縦書きモード
従来のエンジンでは、縦書きモードでフロー外の要素をデフォルトの位置に配置する際に多くの問題がありました。入力モードのサポートの改善について詳しくは、次のセクションをご覧ください。
右から左（RTL）の言語と縦書きモード
LayoutNG は、縦書きモードと RTL 言語（双方向コンテンツを含む）をサポートするようにゼロから設計されています。
双方向テキスト
LayoutNG は、Unicode 標準で定義されている最新の双方向アルゴリズムをサポートしています。このアップデートでは、さまざまなレンダリング エラーが修正されるだけでなく、ペア付きの角かっこのサポートなど、不足している機能も追加されています（Chromium バグ #302469 をご覧ください）。
直交フロー
LayoutNG により、絶対配置されたオブジェクトの配置や直交フローボックスのサイズ設定（特にパーセンテージを使用する場合）など、垂直フロー レイアウトの精度が向上します。W3C テストスイートの 1,258 件のテストのうち、古いレイアウト エンジンで失敗した 103 件のテストが LayoutNG で合格しました。
組み込みのサイズ設定
直交書き込みモードでブロックに子が含まれている場合、固有のサイズが正しく計算されるようになりました。
テキスト レイアウトと改行
以前の Chromium レイアウト エンジンは、テキストを要素ごとに行ごとにレイアウトしていました。このアプローチはほとんどの場合でうまく機能しましたが、スクリプトをサポートして優れたパフォーマンスを実現するには、多くの複雑な追加作業が必要でした。また、測定の不整合が発生しやすく、サイズとコンテンツのコンテナのサイズとコンテンツに微妙な違いが生じたり、不要な改行が発生したりしていました。
LayoutNG では、テキストは段落単位でレイアウトされ、行に分割されます。これにより、パフォーマンスの向上、テキスト レンダリングの品質の向上、行の分割の一貫性の向上が実現します。主な違いは次のとおりです。
要素の境界を越えて結合する
一部のスクリプトでは、隣接する特定の文字が視覚的に結合される場合があります。アラビア語の例をご確認ください。
LayoutNG で、文字が異なる要素にあっても結合が機能するようになりました。異なるスタイルが適用されても、結合は保持されます。（Chromium バグ #6122 を参照）。
グラフームは、言語の文字体系の最小単位です。たとえば、英語やラテン文字を使用する他の言語では、各文字がグラフ記号です。
次の画像は、従来のレイアウト エンジンと LayoutNG で、次の HTML がどのようにレンダリングされるかを示しています。
<div>نسق</div>
<div>نس<span>ق</span></div>
2 番目の文字の形状がどのように変化するかに注目してください
2 つのバージョンが同じになりました
中国語、日本語、韓国語（CJK）の合字
Chromium ではすでにリガチャがサポートされており、デフォルトで有効になっていますが、いくつかの制限があります。レンダリングの最適化のため、複数の CJK コードポイントを含むリガチャは、従来のレイアウト エンジンではサポートされていません。LayoutNG では、これらの制限が解除され、スクリプトに関係なく合字がサポートされます。
次の例は、Adobe SourceHanSansJP フォントを使用した 3 つの任意の合字のレンダリングを示しています。
MHz は正しく合字を形成
が、マンションと 10 点は形成しません
3 つのグループすべてが、想定どおりに合字を形成します
コンテンツに合わせたサイズの要素
コンテンツに合わせてサイズが調整される要素（インライン ブロックなど）の場合、現在のレイアウト エンジンはまずブロックのサイズを計算してから、コンテンツのレイアウトを実行します。フォント カーニングが激しい場合など、コンテンツのサイズとブロックのサイズが一致しないことがあります。LayoutNG では、ブロックのサイズが実際のコンテンツに基づいて設定されるため、この障害モードは排除されています。
次の例は、コンテンツに合わせてサイズが調整された黄色のブロックを示しています。Lato フォントを使用しています。このフォントでは、ケーニングを使用して T と - の間隔を調整しています。黄色のボックスの境界は、テキストの境界と一致している必要があります。
最後の T の後に空白文字が続いていることに注意してください
ボックスの左右の端がテキストの境界と一致していることに注意してください
行の折り返し
上記の問題と同様に、サイズとコンテンツのブロックのコンテンツがブロックよりも大きい（幅が広い）場合、コンテンツが不要に折り返されることがあります。これは非常にまれですが、混合方向のコンテンツで発生することがあります。
不要な改行と右側の余分なスペースに注意してください
ボックスの左右の端がテキストの境界と一致していることに注意してください
追加情報
LayoutNG によって修正された特定の互換性の問題とバグの詳細については、上記のリンク先の問題を参照するか、Chromium バグデータベースで Fixed-In-LayoutNG とマークされたバグを検索してください。
LayoutNG が原因でウェブサイトのレイアウトが崩れている疑いがある場合は、バグの報告を送信してください。Google で調査します。