LayoutNG که قرار است در Chrome 76 منتشر شود، یک موتور طرح‌بندی جدید است که از تلاش چند ساله خارج می‌شود. چندین بهبود فوری هیجان انگیز وجود دارد، و دستاوردهای عملکرد اضافی و ویژگی های طرح بندی پیشرفته در راه است.
چه خبر؟
- انزوای عملکرد را بهبود می بخشد.
- پشتیبانی بهتر از اسکریپت های غیر از لاتین.
- بسیاری از مشکلات مربوط به شناورها و حاشیه ها را برطرف می کند .
- تعداد زیادی از مشکلات سازگاری وب را برطرف می کند .
لطفا توجه داشته باشید که LayoutNG به صورت مرحله ای راه اندازی خواهد شد. در کروم 76، LayoutNG برای طرح بندی درون خطی و بلوکی استفاده می شود. سایر طرح‌های اولیه (مانند جدول، فلکس‌باکس، شبکه و تکه تکه شدن بلوک) در نسخه‌های بعدی جایگزین خواهند شد.
تغییرات قابل مشاهده توسعه دهنده
اگرچه تأثیر قابل مشاهده کاربر باید حداقل باشد، LayoutNG برخی رفتارها را به روش های بسیار ظریف تغییر می دهد، صدها آزمایش را برطرف می کند و سازگاری با سایر مرورگرها را بهبود می بخشد. علی‌رغم تلاش‌های ما، احتمالاً این امر باعث می‌شود که برخی از سایت‌ها و برنامه‌ها رندر شوند یا کمی متفاوت رفتار کنند.
ویژگی های عملکرد نیز کاملا متفاوت است. اگرچه عملکرد به طور کلی مشابه یا کمی بهتر از قبل است، موارد استفاده خاص احتمالاً بهبود عملکرد را مشاهده می کنند، در حالی که انتظار می رود برخی دیگر تا حدودی، حداقل کوتاه مدت، پسرفت کنند.
شناورها
LayoutNG پشتیبانی مجدد از عناصر شناور ( float: left; و float: right; ) را برای رفع تعدادی از مشکلات صحت در مورد قرار دادن شناورها در رابطه با سایر محتواها انجام می دهد.
محتوای روی هم قرار گرفته است
پیاده‌سازی شناور قدیمی هنگام قرار دادن محتوا در اطراف یک عنصر شناور به درستی حاشیه‌ها را در نظر نمی‌گیرد، و در نتیجه محتوا به طور جزئی یا کامل روی خود شناور همپوشانی دارد. رایج‌ترین تظاهر این اشکال زمانی ظاهر می‌شود که یک تصویر در کنار یک پاراگراف قرار می‌گیرد که در آن منطق اجتنابی ارتفاع یک خط را محاسبه نمی‌کند. ( اشکال #861540 Chromium را ببینید.)
متن روی تصویر شناور سمت راست همپوشانی دارد
متن در کنار تصویر شناور در سمت راست قرار می گیرد
همین مشکل ممکن است در یک خط رخ دهد. مثال زیر یک عنصر بلوکی را با حاشیه منفی به دنبال یک عنصر شناور نشان می دهد ( #895962 ). متن نباید با float همپوشانی داشته باشد.
متن با عنصر نارنجی شناور همپوشانی دارد
متن در کنار عنصر نارنجی شناور قرار می گیرد
قالب بندی موقعیت یابی زمینه
وقتی عنصری که زمینه قالب‌بندی بلوک را تشکیل می‌دهد، در کنار شناورها اندازه می‌شود، موتور طرح‌بندی قدیمی قبل از تسلیم شدن، سعی می‌کند تعداد ثابت بلوک را اندازه‌گیری کند. این رویکرد منجر به رفتار غیرقابل پیش بینی و ناپایدار شد و با سایر پیاده سازی ها مطابقت نداشت. در LayoutNG همه شناورها هنگام اندازه‌گیری بلوک در نظر گرفته می‌شوند. ( اشکال #548033 Chromium را ببینید.)
موقعیت یابی مطلق و ثابت اکنون با مشخصات W3C مطابقت دارد و با رفتار سایر مرورگرها مطابقت دارد. تفاوت بین این دو بیشتر در دو مورد قابل مشاهده است:
- چند خطی حاوی بلوک های درون خطی
اگر یک بلوک حاوی کاملاً دارای موقعیت چند خط باشد، موتور قدیمی ممکن است به اشتباه فقط از زیرمجموعه‌ای از خطوط برای محاسبه کران بلوک حاوی استفاده کند. - حالت های نوشتن عمودی
موتور قدیمی مشکلات زیادی برای قرار دادن عناصر خارج از جریان در موقعیت پیش فرض در حالت های نوشتن عمودی داشت. برای جزئیات بیشتر در مورد پشتیبانی بهبود یافته حالت نوشتن، بخش بعدی را ببینید.
زبان‌های راست به چپ (RTL) و حالت‌های نوشتن عمودی
LayoutNG از ابتدا برای پشتیبانی از حالت‌های نوشتن عمودی و زبان‌های RTL، از جمله محتوای دو جهته، طراحی شده است.
متن دو جهته
LayoutNG از به روزترین الگوریتم دوسویه تعریف شده توسط The Unicode Standard پشتیبانی می کند. این به‌روزرسانی نه تنها خطاهای مختلف رندر را برطرف می‌کند، بلکه شامل ویژگی‌های گمشده مانند پشتیبانی از براکت جفت شده نیز می‌شود ( اشکال #302469 Chromium را ببینید.)
جریان های متعامد
LayoutNG دقت طرح‌بندی جریان عمودی را بهبود می‌بخشد، از جمله، به عنوان مثال، قرار دادن اشیاء کاملاً در موقعیت و اندازه جعبه‌های جریان متعامد (مخصوصاً وقتی از درصد استفاده می‌شود). از 1258 تست در مجموعه آزمایشی W3C، 103 تستی که در موتور طرح بندی قدیمی در LayoutNG ناموفق بودند.
اندازه گیری ذاتی
اندازه های ذاتی اکنون به درستی محاسبه می شوند که یک بلوک شامل کودکان در حالت نوشتن متعامد باشد.
طرح بندی متن و شکستن خط
موتور چیدمان قدیمی Chromium متن را عنصر به عنصر و خط به خط نشان می‌دهد. این رویکرد در اکثر موارد به خوبی کار می‌کرد، اما برای پشتیبانی از اسکریپت‌ها و دستیابی به عملکرد خوب، به پیچیدگی زیادی نیاز داشت. همچنین مستعد ناسازگاری‌های اندازه‌گیری بود که منجر به تفاوت‌های ظریف در اندازه ظروف اندازه به محتوا و محتوای آنها یا شکستگی‌های غیرضروری خطوط شد.
در LayoutNG، متن در سطح پاراگراف قرار می گیرد و سپس به خطوط تقسیم می شود. این اجازه می دهد تا عملکرد بهتر، رندر متن با کیفیت بالاتر، و شکستن خط منسجم تر. قابل توجه ترین تفاوت ها در زیر به تفصیل آمده است.
پیوستن به مرزهای عنصر
در برخی از اسکریپت‌ها، می‌توان شخصیت‌های خاصی را هنگامی که در مجاورت یکدیگر قرار دارند، به صورت بصری به هم متصل کرد. به این مثال از زبان عربی توجه کنید:
در LayoutNG، پیوستن اکنون کار می کند حتی اگر کاراکترها در عناصر مختلف باشند. اتصالات حتی زمانی که یک ظاهر طراحی متفاوت اعمال می شود حفظ می شوند. ( اشکال #6122 Chromium را ببینید.)
گرافم کوچکترین واحد سیستم نوشتاری یک زبان است. به عنوان مثال، در زبان انگلیسی و سایر زبان هایی که از الفبای لاتین استفاده می کنند، هر حرف یک گرافم است.
تصاویر زیر رندر 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 ممکن است باعث خرابی یک وب‌سایت شده باشد، لطفاً یک گزارش اشکال ارسال کنید و ما بررسی می‌کنیم.