МакетNG

LayoutNG — это новый движок компоновки, который планируется выпустить в Chrome 76, и это результат многолетних усилий. Есть несколько интересных немедленных улучшений, а также дополнительный прирост производительности и расширенные функции компоновки.

Что нового?

1. Улучшает изоляцию производительности.
2. Улучшена поддержка сценариев, отличных от латиницы.
3. Устраняет множество проблем, связанных с поплавками и полями.
4. Устраняет большое количество проблем веб-совместимости.

Обратите внимание, что LayoutNG будет запускаться поэтапно . В Chrome 76 LayoutNG используется для встроенной и блочной компоновки. Другие примитивы макета (такие как таблица, флексбокс, сетка и фрагментация блоков) будут заменены в последующих выпусках.

Видимые изменения разработчика

Хотя видимое для пользователя влияние должно быть минимальным, LayoutNG очень тонким образом меняет некоторое поведение, исправляет сотни тестов и улучшает совместимость с другими браузерами. Несмотря на все наши усилия, вполне вероятно, что это приведет к тому, что некоторые сайты и приложения будут отображаться или вести себя несколько иначе.

ТТХ также весьма различны; хотя производительность в целом такая же или немного лучше, чем раньше, в некоторых случаях производительность, скорее всего, улучшится, в то время как в других ожидается некоторое снижение производительности, по крайней мере, на краткосрочную перспективу.

Плавает

LayoutNG переопределяет поддержку плавающих элементов ( float: left; и float: right; ), исправляя ряд проблем с корректностью размещения плавающих элементов относительно другого контента.

Наложенный контент

Устаревшая реализация float неправильно учитывала поля при размещении содержимого вокруг плавающего элемента, в результате чего содержимое частично или полностью перекрывало сам поплавок. Наиболее распространенное проявление этой ошибки возникает, когда изображение располагается рядом с абзацем, где логика предотвращения не учитывает высоту строки. (См. ошибку Chromium № 861540. )

Рис. 1a. Устаревший движок компоновки.
Текст перекрывает плавающее изображение справа.

Рис. 1б, LayoutNG
Текст расположен рядом с плавающим изображением справа.

Та же проблема может возникнуть в пределах одной строки. В примере ниже показан блочный элемент с отрицательным полем после плавающего элемента ( #895962 ). Текст не должен перекрываться с плавающим элементом.

Рис. 2a. Устаревший движок компоновки.
Текст перекрывает плавающий оранжевый элемент

Рис. 2б, LayoutNG
Текст расположен рядом с плавающим оранжевым элементом.

Форматирование контекстного позиционирования

Когда элемент, формирующий контекст форматирования блока, имеет размер рядом с плавающей запятой, устаревший механизм компоновки будет пытаться изменить размер блока фиксированное количество раз, прежде чем сдаться. Этот подход привел к непредсказуемому и нестабильному поведению и не соответствовал другим реализациям. В LayoutNG при определении размера блока учитываются все числа с плавающей запятой. (См. ошибку Chromium № 548033. )

Абсолютное и фиксированное позиционирование теперь более соответствуют спецификациям W3C и лучше соответствуют поведению в других браузерах. Различия между ними наиболее заметны в двух случаях:

• Многострочная строка, содержащая блоки
  Если абсолютно позиционированный содержащий блок занимал несколько строк, устаревший механизм мог неправильно использовать только подмножество строк для вычисления границ содержащего блока.
• Режимы вертикального письма
  У устаревшего движка было много проблем с размещением элементов, выходящих за пределы потока, в положение по умолчанию в режимах вертикального письма. Дополнительные сведения об улучшенной поддержке режима записи см. в следующем разделе.

Языки с письмом справа налево (RTL) и режимы вертикального письма

LayoutNG был разработан с нуля для поддержки режимов вертикального письма и языков RTL, включая двунаправленный контент.

Двунаправленный текст

LayoutNG поддерживает самый современный двунаправленный алгоритм, определенный стандартом Unicode . Это обновление не только исправляет различные ошибки рендеринга, но также включает недостающие функции, такие как поддержка парных скобок (см. ошибку Chromium #302469 ).

Ортогональные потоки

LayoutNG повышает точность компоновки вертикального потока, включая, например, размещение абсолютно позиционированных объектов и определение размеров ортогональных блоков потока (особенно при использовании процентов). Из 1258 тестов в наборах тестов W3C 103 теста, которые не прошли проверку в старом механизме компоновки, проходят в LayoutNG.

Внутренний размер

Внутренние размеры теперь рассчитываются правильно, если блок содержит дочерние элементы в режиме ортогональной записи.

Расположение текста и перенос строк

Устаревший движок компоновки Chromium размещал текст поэлементно и построчно. Этот подход работал хорошо в большинстве случаев, но требовал больших дополнительных сложностей для поддержки сценариев и достижения хорошей производительности. Он также был склонен к несоответствиям в измерениях, что приводило к тонким различиям в размерах контейнеров, соответствующих размеру содержимого, и их содержимому, а также к ненужным разрывам строк.

В LayoutNG текст размещается на уровне абзаца, а затем разбивается на строки. Это позволяет повысить производительность, качество рендеринга текста и более последовательный разрыв строк. Наиболее заметные различия подробно описаны ниже.

Соединение через границы элементов

В некоторых сценариях определенные символы можно визуально соединить, если они находятся рядом. Посмотрите этот пример на арабском языке:

В LayoutNG объединение теперь работает, даже если символы находятся в разных элементах. Соединения будут сохранены даже при применении разных стилей. (См. ошибку Chromium № 6122 .)

Графема – это наименьшая единица письменности языка. Например, в английском и других языках, использующих латинский алфавит, каждая буква является графемой.

На изображениях ниже показан рендеринг следующего HTML-кода в устаревшем механизме компоновки и LayoutNG соответственно:

<div>&#1606;&#1587;&#1602;</div>
<div>&#1606;&#1587;<span>&#1602;</span></div>

Рис. 3a. Устаревший движок компоновки.
Обратите внимание, как меняется форма второй буквы.

Рис. 3б, LayoutNG
Обе версии теперь идентичны

Китайские, японские и корейские (CJK) лигатуры

Хотя Chromium уже поддерживает лигатуры и включает их по умолчанию, существуют некоторые ограничения: лигатуры, включающие несколько кодовых точек CJK, не поддерживаются в устаревшем механизме компоновки из-за оптимизации рендеринга. LayoutNG снимает эти ограничения и поддерживает лигатуры независимо от сценария.

В приведенном ниже примере показано отображение трех произвольных лигатур с использованием шрифта Adobe SourceHanSansJP:

Рис. 4a. Устаревший движок компоновки.
МГц правильно образует лигатуру
но マンション и 10点 нет

Рис. 4б, LayoutNG
Все три группы образуют лигатуры, как и ожидалось.

Элементы размера и содержимого

Для элементов, размер которых соответствует содержимому (например, встроенных блоков), текущий механизм компоновки сначала вычисляет размер блока, а затем выполняет компоновку содержимого. В некоторых случаях, например, когда шрифт агрессивно кернится, это может привести к несоответствию размера содержимого и блока. В LayoutNG этот режим сбоя был устранен, поскольку размер блока определяется на основе фактического содержимого.

В приведенном ниже примере показан желтый блок, размер которого соответствует содержимому. Он использует шрифт Lato, который использует кернинг для регулировки расстояния между T и -. Границы желтого поля должны совпадать с границами текста.

Рис. 5a. Устаревший движок компоновки.
Обратите внимание на конечные пробелы после последней буквы T.

Рис. 5б, LayoutNG
Обратите внимание, как левый и правый края поля соответствуют границам текста.

Перенос строк

Подобно проблеме, описанной выше, если содержимое блока «размер-к-содержимому» больше (шире), чем сам блок, иногда содержимое может переноситься без необходимости. Это довольно редко, но иногда случается с контентом смешанной направленности.

Рис. 6a. Устаревший движок компоновки.
Обратите внимание на ненужный разрыв строки и лишний пробел справа.

Рис. 6б, LayoutNG
Обратите внимание, как левый и правый края поля соответствуют границам текста.

Дальнейшая информация

• README макетаNG
• Проектный документ LayoutNG
• Основная ошибка отслеживания

Для получения более подробной информации о конкретных проблемах совместимости и ошибках, исправленных LayoutNG, ознакомьтесь с проблемами, указанными выше, или найдите в базе данных ошибок Chromium ошибки с пометкой «Fixed-In-LayoutNG» .

Если вы подозреваете, что LayoutNG мог стать причиной поломки веб-сайта, отправьте отчет об ошибке , и мы проведем расследование.