Jest to nowy mechanizm układu, który ma zostać wydany w Chrome 76. Jego tworzenie trwało kilka lat. Wprowadziliśmy kilka ciekawych ulepszeń, które można zastosować od razu. Wkrótce udostępnimy też dodatkowe ulepszenia i zaawansowane funkcje układu.
Co nowego?
- poprawić izolację wydajności;
- Lepsza obsługa innych niż łacińskie systemów pisma.
- Rozwiązano wiele problemów związanych z liczebnikami i marginesami.
- Rozwiązuje wiele problemów ze zgodnością z internetem.
Pamiętaj, że LayoutNG będzie wprowadzany etapami. W Chrome 76 silnik LayoutNG jest używany do układu wbudowanego i blokowego. Inne prymitywy układu (np. tabela, flexbox, siatka i podział bloków) zostaną zastąpione w kolejnych wersjach.
Zmiany widoczne dla programistów
Wpływ na użytkownika powinien być minimalny, ale LayoutNG wprowadza pewne zmiany w zachowaniu, poprawia setki testów i poprawia zgodność z innymi przeglądarkami. Mimo naszych starań może to spowodować, że niektóre witryny i aplikacje będą renderowane lub działać nieco inaczej.
Różnice w charakterystykach wydajności są też dość duże. Chociaż wydajność w całości jest podobna lub nieco lepsza niż wcześniej, w pewnych przypadkach może się ona poprawić, a w innych – przynajmniej krótkoterminowo – pogorszyć.
Swobodne
LayoutNG ponownie obsługuje elementy pływające (float: left; i float: right;), rozwiązując przy tym kilka problemów z prawidłowym umieszczaniem elementów pływających w relacji do innych treści.
Nakładające się fragmenty
Stara implementacja elementu pływającego nie uwzględniała prawidłowo marginesów podczas umieszczania treści wokół elementu pływającego, co powodowało częściowe lub całkowite zanikanie tego elementu. Najczęstszym przejawem tego błędu jest umieszczenie obrazu obok akapitu, w którym logika unikania nie uwzględnia wysokości wiersza. (zobacz błąd Chromium 861540).
Tekst zachodzi na pływający obraz po prawej stronie
Tekst jest umieszczony obok pływającego obrazu po prawej stronie
Ten sam problem może wystąpić w ramach jednego wiersza. Przykład poniżej przedstawia element bloku z ujemnym marginesem po pływającym elemencie (#895962). Tekst nie powinien nakładać się na element pływający.
Tekst nakłada się na pływający pomarańczowy element
Tekst jest umieszczony obok pływającego pomarańczowego elementu
Formatowanie kontekstu
Gdy element tworzący kontekst formatowania bloku jest dopasowywany do rozmiaru obok elementów typu float, starszy mechanizm układu próbuje dopasować rozmiar bloku do stałego rozmiaru pewną liczbę razy, zanim zrezygnuje. Takie podejście prowadziło do nieprzewidywalnego i niestabilnego działania oraz nie było zgodne z innymi implementacjami. W LayoutNG wszystkie zmiennoprzecinkowe są uwzględniane podczas określania rozmiaru bloku. (zobacz błąd Chromium 548033).
Pozycjonowanie bezwzględne i stałe jest teraz bardziej zgodne ze specyfikacjami W3C i lepiej odpowiada działaniom w innych przeglądarkach. Różnice między tymi dwoma typami są najbardziej widoczne w 2 przypadkach:
- Wielowierszowe bloki zawierające
Jeśli blok zawierający z pozycjonowaniem bezwzględnym rozciągał się na kilka wierszy, starszy mechanizm mógłby nieprawidłowo użyć tylko podzbioru wierszy do obliczenia granic bloku zawierającego. - Tryby pisania w pionie
Stary mechanizm miał wiele problemów z umieszczaniem elementów spoza przepływu w domyślnej pozycji w trybach pisania w pionie. Więcej informacji o ulepszonym trybie pisania znajdziesz w następnej sekcji.
Języki z zapisem od prawej do lewej i tryby pisania w pionie
Narzędzie LayoutNG zostało zaprojektowane od podstaw z myślą o obsługiwaniu trybów pisania w orientacji pionowej i języków RTL, w tym treści dwukierunkowych.
Tekst dwukierunkowy
Format LayoutNG obsługuje najnowszy algorytm dwukierunkowy zdefiniowany w standardzie Unicode. Ta aktualizacja zawiera nie tylko poprawki różnych błędów związanych z renderowaniem, ale też funkcje, które wcześniej były niedostępne, np. obsługę par nawiasów. (Zobacz błąd Chromium #302469).
Przepływy prostopadłe
LayoutNG zwiększa dokładność układu płynnego pionowego, w tym np. umieszczanie obiektów z dokładnym pozycjonowaniem i wymiarowanie prostokątnych pól przepływu (zwłaszcza gdy używane są wartości procentowe). Spośród 1258 testów w pakietach testów W3C 103 testy,które nie przeszły w starym silniku układu w LayoutNG,
Wewnętrzne dopasowywanie
Wbudowane rozmiary są teraz obliczane prawidłowo, gdy blok zawiera elementy podrzędne w trybie pisania ortogonalnego.
Układ tekstu i łamanie wierszy
Stary mechanizm układu Chromium układał tekst element po elemencie i wiersz po wierszu. Takie podejście sprawdzało się w większości przypadków, ale wymagało dodatkowej złożoności, aby obsługiwać skrypty i osiągać dobrą wydajność. Była też podatna na niespójności pomiarów, co powodowało niewielkie różnice w rozmiarze kontenerów dopasowanych do treści i ich zawartości lub niepotrzebne przerwy między wierszami.
W LayoutNG tekst jest układany na poziomie akapitu, a następnie dzielony na wiersze. Dzięki temu możesz uzyskać lepszą wydajność, wyższą jakość renderowania tekstu i bardziej spójne dzielenie wierszy. Najważniejsze różnice opisaliśmy poniżej.
Łączenie w ramach granic elementów
W niektórych skryptach niektóre znaki mogą być wizualnie połączone, gdy są obok siebie. Oto przykład z języka arabskiego:
W LayoutNG złączanie działa teraz nawet wtedy, gdy znaki znajdują się w różnych elementach. Połączenia zostaną zachowane nawet wtedy, gdy zastosujesz inny styl. (zobacz błąd Chromium 6122).
Grafema to najmniejsza jednostka systemu pisma danego języka. Na przykład w języku angielskim i innych językach używających alfabetu łacińskiego każda litera jest grafemem.
Ilustracje poniżej pokazują renderowanie tego kodu HTML odpowiednio w starszym silniku układu i LayoutNG:
<div>نسق</div>
<div>نس<span>ق</span></div>
Zobacz, jak zmienia się forma drugiej litery
Obie wersje są teraz identyczne
ligatury chińskie, japońskie i koreańskie (CJK);
Chociaż Chromium obsługuje już ligatury i domyślnie je włącza, występują pewne ograniczenia: ligatury zawierające kilka punktów kodu CJK nie są obsługiwane w starszym mechanizmie układu ze względu na optymalizację renderowania. LayoutNG usuwa te ograniczenia i obsługuje ligatury niezależnie od języka.
Przykład poniżej pokazuje renderowanie 3 opcjonalnych ligatur za pomocą czcionki Adobe SourceHanSansJP:
MHz tworzy prawidłowe ligatury
ale マンション i 10点 tego nie robią
Wszystkie 3 grupy tworzą ligatury zgodnie z oczekiwaniami
Elementy rozmiaru do treści
W przypadku elementów, które dopasowują rozmiar do treści (np. bloki wstawiane w tekście), bieżący mechanizm układu najpierw oblicza rozmiar bloku, a następnie układa treści. W niektórych przypadkach, np. gdy czcionka jest mocno zagęszczona, może to spowodować niezgodność między rozmiarem treści a blokiem. W LayoutNG ten rodzaj błędu został wyeliminowany, ponieważ rozmiar bloku jest określany na podstawie rzeczywistych treści.
Przykład poniżej pokazuje żółty blok o odpowiednim rozmiarze. Używa on czcionki Lato, która wykorzystuje kerning do dostosowania odstępów między literami T i -. Granice żółtego pola powinny być zgodne z granicami tekstu.
Zobacz, jak biała przestrzeń po ostatnim znaku T
Zobacz, jak lewy i prawy bok pudełka pasują do granic tekstu
Zawijanie wierszy
Podobnie jak w przypadku problemu opisanego powyżej, jeśli zawartość bloku o wymiarach dostosowanych do treści jest większa (szersza) niż blok, może się ona niepotrzebnie przewijać. Zdarzają się one rzadko, ale czasami występują w przypadku treści o zmiennej kierowalności.
Zobacz niepotrzebny podział wiersza i dodatnią przestrzeń po prawej stronie
Zobacz, jak lewy i prawy brzeg pola odpowiadają granicom tekstu
Więcej informacji
Więcej informacji o konkretnych problemach ze zgodnością i błędach naprawionych przez LayoutNG znajdziesz w linkach powyżej lub w bazie danych błędów Chromium oznaczonych jako Fixed-In-LayoutNG.
Jeśli podejrzewasz, że LayoutNG może być przyczyną awarii witryny, zgłoś błąd, a my zbadamy sprawę.