من المقرّر طرح LayoutNG في الإصدار 76 من Chrome، وهو محرّك تنسيق جديد تم تطويره بعد جهد استمر لعدة سنوات. هناك العديد من التحسينات الفورية المثيرة، وستتوفّر قريبًا ميزات إضافية لتحسين الأداء وتنسيقات متقدّمة.
الميزات الجديدة
- تحسين عزل الأداء
- دعم أفضل للنص البرمجي بغير اللغة اللاتينية
- إصلاح العديد من المشاكل المتعلّقة بالعناصر العائمة والهوامش
- إصلاح عدد كبير من مشاكل التوافق مع الويب
يُرجى العلم أنّه سيتم إطلاق LayoutNG على مراحل. في الإصدار 76 من Chrome، يتم استخدام LayoutNG لتنسيق المحتوى المضمّن والمحتوى على شكل كتل. سيتم استبدال العناصر الأساسية الأخرى للتنسيق (مثل الجدول وصندوق المرونة والشبكة وتقسيم العناصر إلى أجزاء) في الإصدارات اللاحقة.
التغييرات المرئية للمطوّرين
على الرغم من أنّ التأثير الذي يراه المستخدم من المفترض أن يكون ضئيلًا، يغيّر LayoutNG بعض السلوك بطرق دقيقة جدًا، ويصحّح مئات الاختبارات، ويُحسِّن التوافق مع المتصفّحات الأخرى. على الرغم من جهودنا المبذولة، من المحتمل أن يؤدي ذلك إلى ظهور بعض المواقع الإلكترونية والتطبيقات أو سلوكها بشكل مختلف قليلاً.
تختلف خصائص الأداء أيضًا تمامًا، على الرغم من أنّ الأداء بشكلٍ عام مشابه أو أفضل قليلاً من ذي قبل، من المرجّح أن تلاحظ بعض حالات الاستخدام تحسّنات في الأداء، في حين من المتوقّع أن يتراجع أداء حالات أخرى إلى حدّ ما، على الأقل على المدى القصير.
عائمة
يعيد LayoutNG استخدام ميزة دعم العناصر العائمة (float: left; وfloat: right;)، ويصحّح عددًا من مشاكل الدقة في ما يتعلّق بوضع العناصر العائمة بالنسبة إلى المحتوى الآخر.
محتوى متراكب
لم تأخذ عملية تنفيذ العنصر العائم القديم الهوامش في الاعتبار بشكل صحيح عند وضع المحتوى حول عنصر عائم، ما أدّى إلى تداخل المحتوى جزئيًا أو كليًا مع العنصر العائم نفسه. يظهر الظهور الأكثر شيوعًا لهذا الخطأ عند وضع صورة بجانب فقرة حيث يتعذّر على منطق تجنُّب العناصر مراعاة ارتفاع السطر. (راجِع خطأ Chromium رقم 861540).
يتداخل النص مع الصورة العائمة على اليسار
يتم وضع النص بجانب الصورة العائمة على اليسار
وقد تحدث المشكلة نفسها في سطر واحد. يعرض المثال أدناه عنصرًا مربّعًا به هامش سلبي يلي عنصرًا عائمًا (#895962). يجب ألا يتداخل النص مع العنصر العائم.
يتداخل النص مع العنصر البرتقالي العائم
يتم وضع النص بجانب العنصر البرتقالي العائم
موضع الإعلان بحسب تنسيق السياق
عند تحديد حجم عنصر يشكّل سياق تنسيق مربّع بجانب العناصر العائمة، سيحاول محرّك التنسيق القديم تحديد حجم المربّع عددًا ثابتًا من المرّات قبل الاستسلام. وقد أدّى هذا النهج إلى سلوك غير متوقّع وغير ثابت ولم يتطابق مع عمليات التنفيذ الأخرى. في LayoutNG، يتم أخذ كل العناصر العائمة في الاعتبار عند تحديد حجم الكتلة. (راجِع خطأ Chromium رقم 548033).
أصبحت مواضع العناصر المطلقة والثابتة متوافقة بشكل أكبر مع مواصفات W3C وتتوافق بشكل أفضل مع السلوك في المتصفّحات الأخرى. تظهر الاختلافات بين الاثنين بشكلٍ واضح في حالتَين:
- الكتل المضمّنة المتعدّدة الأسطر التي تحتوي على عناصر
إذا كانت كتلة تحتوي على عناصر تم وضعها بشكل مطلق تمتد على عدة أسطر، قد يستخدم المحرّك القديم بشكلٍ غير صحيح مجموعة فرعية فقط من الأسطر لاحتساب حدود الكتلة التي تحتوي على عناصر. - وضعيات الكتابة العمودية
واجه المحرّك القديم العديد من المشاكل في وضع العناصر خارج مسار العرض في الموضع التلقائي في أوضاع الكتابة العمودية. راجِع القسم التالي للحصول على مزيد من التفاصيل حول تحسينات وضع الكتابة.
اللغات المكتوبة من اليمين إلى اليسار وأوضاع الكتابة العمودية
تم تصميم LayoutNG من الألف إلى الياء لتتوافق مع أوضاع الكتابة العمودية واللغات التي تُكتب من اليمين إلى اليسار، بما في ذلك المحتوى ثنائي الاتجاه.
نص ثنائي الاتجاه
يتوافق 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 عن الأخطاء التي تم وضع علامة عليها قائلةً تم إصلاحها في LayoutNG.
إذا كنت تشك في أنّ LayoutNG قد أدّى إلى تعطُّل أحد المواقع الإلكترونية، يُرجى إرسال تقرير عن الخطأ، وسنتحقّق من الأمر.