LayoutNG — это новый движок компоновки, который планируется выпустить в Chrome 76, и это результат многолетних усилий. Есть несколько интересных немедленных улучшений, а также дополнительный прирост производительности и расширенные функции компоновки.
Что нового?
- Улучшает изоляцию производительности.
- Улучшена поддержка сценариев, отличных от латиницы.
- Устраняет множество проблем, связанных с поплавками и полями.
- Устраняет большое количество проблем веб-совместимости.
Обратите внимание, что LayoutNG будет запускаться поэтапно . В Chrome 76 LayoutNG используется для встроенной и блочной компоновки. Другие примитивы макета (такие как таблица, флексбокс, сетка и фрагментация блоков) будут заменены в последующих выпусках.
Видимые изменения разработчика
Хотя видимое для пользователя влияние должно быть минимальным, LayoutNG очень тонким образом меняет некоторое поведение, исправляет сотни тестов и улучшает совместимость с другими браузерами. Несмотря на все наши усилия, вполне вероятно, что это приведет к тому, что некоторые сайты и приложения будут отображаться или вести себя несколько иначе.
ТТХ также весьма различны; хотя производительность в целом такая же или немного лучше, чем раньше, в некоторых случаях производительность, скорее всего, улучшится, в то время как в других ожидается некоторое снижение производительности, по крайней мере, на краткосрочную перспективу.
Плавает
LayoutNG переопределяет поддержку плавающих элементов ( float: left; и float: right; ), исправляя ряд проблем с корректностью размещения плавающих элементов относительно другого контента.
Наложенный контент
Устаревшая реализация float неправильно учитывала поля при размещении содержимого вокруг плавающего элемента, в результате чего содержимое частично или полностью перекрывало сам поплавок. Наиболее распространенное проявление этой ошибки возникает, когда изображение располагается рядом с абзацем, где логика предотвращения не учитывает высоту строки. (См. ошибку Chromium № 861540. )
Текст перекрывает плавающее изображение справа.
Текст расположен рядом с плавающим изображением справа.
Та же проблема может возникнуть в пределах одной строки. В примере ниже показан блочный элемент с отрицательным полем после плавающего элемента ( #895962 ). Текст не должен перекрываться с плавающим элементом.
Текст перекрывает плавающий оранжевый элемент
Текст расположен рядом с плавающим оранжевым элементом.
Форматирование контекстного позиционирования
Когда элемент, формирующий контекст форматирования блока, имеет размер рядом с плавающей запятой, устаревший механизм компоновки будет пытаться изменить размер блока фиксированное количество раз, прежде чем сдаться. Этот подход привел к непредсказуемому и нестабильному поведению и не соответствовал другим реализациям. В LayoutNG при определении размера блока учитываются все числа с плавающей запятой. (См. ошибку Chromium № 548033 .)
Абсолютное и фиксированное позиционирование теперь более соответствуют спецификациям W3C и лучше соответствуют поведению в других браузерах. Различия между ними наиболее заметны в двух случаях:
- Многострочная строка, содержащая блоки
Если абсолютно позиционированный содержащий блок занимал несколько строк, устаревший механизм мог неправильно использовать только подмножество строк для вычисления границ содержащего блока. - Режимы вертикального письма
У устаревшего движка было много проблем с размещением элементов, выходящих за пределы потока, в положение по умолчанию в режимах вертикального письма. Дополнительные сведения об улучшенной поддержке режима записи см. в следующем разделе.
Языки с письмом справа налево (RTL) и режимы вертикального письма
LayoutNG был разработан с нуля для поддержки режимов вертикального письма и языков RTL, включая двунаправленный контент.
Двунаправленный текст
LayoutNG поддерживает самый современный двунаправленный алгоритм, определенный стандартом Unicode . Это обновление не только исправляет различные ошибки рендеринга, но также включает недостающие функции, такие как поддержка парных скобок (см. ошибку Chromium #302469 ).
Ортогональные потоки
LayoutNG повышает точность компоновки вертикального потока, включая, например, размещение абсолютно позиционированных объектов и определение размеров ортогональных блоков потока (особенно при использовании процентов). Из 1258 тестов в наборах тестов W3C 103 теста, которые не прошли проверку в старом механизме компоновки, проходят в LayoutNG.
Внутренний размер
Внутренние размеры теперь рассчитываются правильно, если блок содержит дочерние элементы в режиме ортогональной записи.
Расположение текста и перенос строк
Устаревший движок компоновки Chromium размещал текст поэлементно и построчно. Этот подход работал хорошо в большинстве случаев, но требовал больших дополнительных сложностей для поддержки сценариев и достижения хорошей производительности. Он также был склонен к несоответствиям в измерениях, что приводило к тонким различиям в размерах контейнеров, соответствующих размеру содержимого, и их содержимому, а также к ненужным разрывам строк.
В LayoutNG текст размещается на уровне абзаца, а затем разбивается на строки. Это позволяет повысить производительность, качество рендеринга текста и более последовательный разрыв строк. Наиболее заметные различия подробно описаны ниже.
Соединение через границы элементов
В некоторых сценариях определенные символы можно визуально соединить, если они находятся рядом. Посмотрите этот пример на арабском языке:
В LayoutNG объединение теперь работает, даже если символы находятся в разных элементах. Соединения будут сохранены даже при применении разных стилей. (См. ошибку Chromium № 6122 .)
Графема — это наименьшая единица письменности языка. Например, в английском и других языках, использующих латинский алфавит, каждая буква является графемой.
На изображениях ниже показан рендеринг следующего HTML-кода в устаревшем механизме компоновки и LayoutNG соответственно:
<div>نسق</div>
<div>نس<span>ق</span></div>
Обратите внимание, как меняется форма второй буквы.
Обе версии теперь идентичны
Китайские, японские и корейские (CJK) лигатуры
Хотя Chromium уже поддерживает лигатуры и включает их по умолчанию, существуют некоторые ограничения: лигатуры, включающие несколько кодовых точек CJK, не поддерживаются в устаревшем механизме компоновки из-за оптимизации рендеринга. LayoutNG снимает эти ограничения и поддерживает лигатуры независимо от сценария.
В приведенном ниже примере показано отображение трех произвольных лигатур с использованием шрифта Adobe SourceHanSansJP:
МГц правильно образует лигатуру
но マンション и 10点 нет
Все три группы образуют лигатуры, как и ожидалось.
Элементы размера и содержимого
Для элементов, размер которых соответствует содержимому (например, встроенных блоков), текущий механизм компоновки сначала вычисляет размер блока, а затем выполняет компоновку содержимого. В некоторых случаях, например, при агрессивном кернинге шрифта, это может привести к несоответствию размера содержимого и блока. В LayoutNG этот режим сбоя устранен, поскольку размер блока определяется на основе фактического содержимого.
В примере ниже показан желтый блок, размер которого соответствует содержимому. Он использует шрифт Lato, который использует кернинг для регулировки расстояния между T и -. Границы желтого поля должны совпадать с границами текста.
Обратите внимание на конечные пробелы после последней буквы T.
Обратите внимание, как левый и правый края поля соответствуют границам текста.
Перенос строк
Подобно проблеме, описанной выше, если содержимое блока «размер-к-содержимому» больше (шире), чем сам блок, иногда содержимое может переноситься без необходимости. Это довольно редко, но иногда случается с контентом смешанной направленности.
Обратите внимание на ненужный разрыв строки и лишний пробел справа.
Обратите внимание, как левый и правый края поля соответствуют границам текста.
Дополнительная информация
Для получения более подробной информации о конкретных проблемах совместимости и ошибках, исправленных LayoutNG, ознакомьтесь с проблемами, указанными выше, или найдите в базе данных ошибок Chromium ошибки с пометкой «Fixed-In-LayoutNG» .
Если вы подозреваете, что LayoutNG мог стать причиной поломки веб-сайта, отправьте отчет об ошибке , и мы проведем расследование.