LayoutNG הוא מנוע פריסה חדש שאנחנו מתכננים להשיק בגרסה 76 של Chrome, אחרי כמה שנים של עבודה. יש כמה שיפורים מעניינים שזמינים כבר עכשיו, ועוד שיפורי ביצועים ותכונות מתקדמות של פריסה יהיו זמינים בקרוב.
מה חדש?
- שיפור בידוד הביצועים.
- תמיכה טובה יותר בסקריפטים שאינם לטיניים.
- תיקון של בעיות רבות שקשורות לפריטים צפים ולשוליים.
- תיקון של מספר רב של בעיות בתאימות לאינטרנט.
לתשומת ליבכם, LayoutNG יושק בשלבים. ב-Chrome 76, LayoutNG משמש לפריסה בתוך שורה ולפריסה בבלוק. רכיבי פרימיטיבים אחרים של פריסה (כמו טבלה, Flexbox, רשת ופיצול בלוקים) יוחלפו במהדורות הבאות.
שינויים שגלויים למפתחים
ההשפעה על המשתמשים אמורה להיות מינימלית, אבל LayoutNG משנה התנהגות מסוימת בדרכים עדינות מאוד, מתקן מאות בדיקות ומשפר את התאימות לדפדפנים אחרים. למרות שאנחנו עושים כמיטב יכולתנו, סביר להניח שהשינוי הזה יגרום לאתרים ולאפליקציות מסוימים להיראות או לפעול באופן שונה במקצת.
גם מאפייני הביצועים שונים למדי. אמנם הביצועים באופן כללי דומים או טובים יותר מאשר בעבר, אבל סביר להניח שבתרחישים מסוימים של שימוש יהיו שיפורים בביצועים, ובתרחישים אחרים צפויה ירידה מסוימת בביצועים, לפחות לטווח הקצר.
צף
ב-LayoutNG הופעלה מחדש תמיכה ברכיבים צפים (float: left; ו-float: right;), ותוקנו מספר בעיות שקשורות לנכונות המיקום של רכיבים צפים ביחס לתוכן אחר.
תוכן שכבת-על
בהטמעה הקודמת של ה-float לא נלקחו בחשבון שולי הגוף כאשר הוצבו תוכן סביב רכיב צף, וכתוצאה מכך התוכן חרג חלקית או לגמרי מעבר לרכיב הצף עצמו. ההתגלות הנפוצה ביותר של הבאג הזה מופיעה כשתמונה ממוקמת לצד פסקאות, במקרים שבהם הלוגיקה של הימנעות מהצגת מודעות לא מביאה בחשבון את גובה השורה. (ראו באג מס' 861540 ב-Chromium).
הטקסט חופף לתמונה הצפה שמימין
הטקסט ממוקם לצד התמונה הצפה שמימין
אותה בעיה עשויה להתרחש בתוך שורה אחת. בדוגמה הבאה מוצג רכיב בלוק עם שוליים שליליים אחרי רכיב צף (#895962). הטקסט לא צריך לחפוף ל-float.
הטקסט חופף לרכיב הכתום הצף
הטקסט ממוקם לצד הרכיב הכתום הצף
עיצוב מיקום לפי הקשר
כשמגדירים את הגודל של רכיב שמרכיב הקשר של עיצוב בלוק לצד רכיבים צפים, מנוע הפריסה הקודם ינסה לקבוע את הגודל של הבלוק מספר קבוע של פעמים לפני שיפסיק. הגישה הזו הובילה להתנהגות לא צפויה ולא יציבה, ולא התאימה להטמעות אחרות. ב-LayoutNG, כל הפריטים שמוצגים ב-float נלקחים בחשבון כשמגדירים את הגודל של הבלוק. (ראו באג מס' 548033 ב-Chromium).
עכשיו יש תאימות טובה יותר של מיקום מוחלט וקבוע למפרט של W3C, והוא תואם יותר להתנהגות בדפדפנים אחרים. ההבדלים בין השניים בולטים במיוחד בשני מקרים:
- בלוקים בתוך שורה שמכילים כמה שורות
אם בלוק מכיל שמוגדר במיקום מוחלט משתרע על כמה שורות, יכול להיות שהמנוע הקודם ישתמש באופן שגוי רק בקבוצת משנה של השורות כדי לחשב את גבולות הבלוק המכיל. - מצבי כתיבת אנכית
במנוע הקודם היו הרבה בעיות במיקום של רכיבים מחוץ לזרימה במיקום ברירת המחדל במצבי כתיבת אנכית. פרטים נוספים על התמיכה המשופרת במצב כתיבה מופיעים בקטע הבא.
שפות הנכתבות מימין לשמאל (RTL) ומצבי כתיבה אנכיים
פורמט LayoutNG תוכנן מלכתחילה כך שיתמוך במצבי כתיבה אנכיים ובשפות RTL, כולל תוכן דו-כיווני.
טקסט דו-כיווני
LayoutNG תומך באלגוריתם הדו-כיווני העדכני ביותר שמוגדר בתקן Unicode. העדכון הזה לא רק מתקן שגיאות שונות של עיבוד, אלא כולל גם תכונות חסרות כמו תמיכה בסוגריים מותאמים (ראו באג מס' 302469 ב-Chromium).
תהליכים אורתוגונליים
LayoutNG משפר את הדיוק של פריסה בזרימה אנכית, כולל, למשל, מיקום של אובייקטים במיקום מוחלט והתאמת הגודל של תיבות זרימה אורתוגונליות (במיוחד כשמשתמשים באחוזים). מתוך 1,258 הבדיקות בחבילות הבדיקות של W3C, 103 בדיקות שנכשלו במנוע הפריסה הישן עוברות ב-LayoutNG.
שינוי גודל פנימי
עכשיו, כשבלוק מכיל צאצאים במצב כתיבה אורתוגוナル, הגדלים המובנים מחושבים בצורה נכונה.
פריסת טקסט ושבירת שורות
מנוע הפריסה הקודם של Chromium פרס טקסט רכיב אחר רכיב ושורה אחר שורה. הגישה הזו עבדה טוב ברוב המקרים, אבל נדרשה הרבה מורכבות נוספת כדי לתמוך בסקריפטים ולשפר את הביצועים. בנוסף, הוא היה נוטה לחוסר עקביות במדידה, מה שהוביל להבדלים קלים בגודל של קונטיינרים לפי גודל התוכן ובתוכן שלהם, או להפסקות שורה מיותרות.
ב-LayoutNG, הטקסט מוצג ברמת הפסקה ולאחר מכן מחולק לשורות. כך אפשר לשפר את הביצועים, את איכות הרינדור של הטקסט ואת עיצוב השורות. ההבדלים העיקריים מפורטים בהמשך.
צירוף מעבר לגבולות של רכיבים
בסקריפטים מסוימים, תווים מסוימים יכולים להצטרף חזותית כשהם צמודים. הנה דוגמה בערבית:
ב-LayoutNG, אפשר עכשיו לצרף תווים גם אם הם נמצאים באלמנטים שונים. גם הצירופים יישמרו כשחלים שינויים בסגנון. (ראו באג מס' 6122 ב-Chromium).
גרפימה היא היחידה הקטנה ביותר במערכות הכתב של השפות. לדוגמה, באנגלית ובשפות אחרות שמשתמשות באלפבית הלטיני, כל אות היא גרפימה.
בתמונות הבאות מוצג העיבוד של הקוד הבא ב-HTML במנוע הפריסה הקודם וב-LayoutNG, בהתאמה:
<div>نسق</div>
<div>نس<span>ق</span></div>
שימו לב לאופן שבו הצורה של האות השנייה משתנה
שתי הגרסאות זהות עכשיו
ליגטורים של סינית, יפנית וקוריאנית (CJK)
כבר יש תמיכה ב-Chromium באותיות ליגדות והן מופעלות כברירת מחדל, אבל יש מגבלות מסוימות: אותיות ליגדות שכוללות כמה נקודות קידוד CJK לא נתמכות במנוע הפריסה הקודם בגלל אופטימיזציה של הרינדור. ב-LayoutNG אין את ההגבלות האלה, והוא תומך באותיות מחוברות ללא קשר לסקריפט.
בדוגמה הבאה מוצגת העיבוד של שלוש ליגטורות שרירותיות באמצעות הגופן Adobe SourceHanSansJP:
האותיות MHz יוצרות ליגטורה בצורה נכונה
אבל האותיות マンション ו-10点 לא יוצרות ליגטורה
שלוש הקבוצות יוצרות ליגטורה כצפוי
אלמנטים של התאמה לגודל התוכן
לגבי רכיבים שהגודל שלהם מותאם לתוכן (כמו בלוקים בשורה אחת), מנוע הפריסה הנוכחי מחשב קודם את גודל הבלוק ואז מבצע פריסה של התוכן. במקרים מסוימים, למשל כשיש גופן עם מרווחים בין האותיות רחבים במיוחד, יכול להיות שהגודל של התוכן לא יתאים לגודל של הבלוק. ב-LayoutNG, מצב הכשל הזה בוטל כי הגודל של הבלוק נקבע על סמך התוכן בפועל.
בדוגמה הבאה מוצג בלוק צהוב בגודל התוכן. הוא נעשה באמצעות הגופן Lato, שמשתמש בקירוב אותיות כדי לשנות את המרווח בין האות T לסימן ה--. הגבולות של התיבה הצהובה צריכים להתאים לגבולות הטקסט.
שימו לב למרווח הלבן שמופיע אחרי ה-T האחרון
שימו לב לקצוות השמאלי והימני של התיבה שתואמים לגבולות הטקסט
גלישת שורות
בדומה לבעיה שמתוארת למעלה, אם התוכן של בלוק שמוגדר לפי גודל התוכן גדול (רחב) מהבלוק, לפעמים התוכן יכול להסתובב ללא צורך. המצב הזה קורה לעיתים רחוקות, אבל לפעמים הוא קורה בתוכן עם כיוון משולב.
שימו לב לפסיק הלא הכרחי ולמרחב הנוסף בצד שמאל
שימו לב לקצוות הימניים והשמאליים של התיבה שתואמים לגבולות הטקסט
מידע נוסף
למידע מפורט יותר על בעיות התאימות הספציפיות ועל הבאגים ש-LayoutNG תיקן, אפשר לעיין בבעיות שמפורטות בקישור שלמעלה או לחפש בבאגים של מסד הנתונים של Chromium באגים שמסומנים בתווית Fixed-In-LayoutNG.
אם אתם חושדים ש-LayoutNG גרם לבעיה באתר, תוכלו לשלוח דוח באג ונבדוק את הנושא.