تنسيق يشبه المجلات للإنترنت مع مناطق واستثناءات CSS

Christian Cantrell

مقدمة

الويب هو منصة قوية للغاية للنص، وهي من المجالات التي تمتلك فيها Adobe قدرًا كبيرًا من الخبرة والكفاءة. عندما كانت Adobe تبحث عن طرق للمساعدة في تطوير الويب، بدا لنا أنّ تحسين إمكانات النصوص على الويب هو نقطة البداية المناسبة. تعتمد الويب بشكل عام على عمود واحد باتجاه عمودي للنص. على الرغم من أنّه من الممكن تدفق النص حول الرسومات، وحتى تنسيق النص في أعمدة متعددة باستخدام CSS، لا يزال من الصعب جدًا تحقيق تنسيق يشبه مجلة على الويب. من خلال مناطق CSS واستبعادات CSS، تقود Adobe الجهود المبذولة لتوفير إمكانات نشر الكتب الإلكترونية على أجهزة الكمبيوتر المكتبي في المتصفحات الحديثة. على سبيل المثال، في لقطة الشاشة أدناه، يتم استخدام استبعادات CSS لعرض النص على طول محيط الجبل:

مثال على استبعادات CSS قيد التنفيذ
مثال على استبعادات CSS

يستخدم المستند في لقطة الشاشة أدناه أيضًا استبعادات CSS للسماح للنص بالالتفاف حول الأشكال في الصور، بالإضافة إلى مناطق CSS لتنسيق النص في أعمدة وحول اقتباس مميّز:

مثال على استخدام مناطق CSS
مثال على مناطق CSS أثناء الاستخدام

مناطق CSS

قبل الخوض في تفاصيل مناطق CSS، أودّ أن أتطرق إلى كيفية تفعيل المناطق في Google Chrome. بعد تفعيل ميزة "مناطق CSS"، يمكنك تجربة بعض العيّنات المُشار إليها في هذه المقالة وإنشاء عيّنات خاصة بك.

تفعيل مناطق CSS في Google Chrome

اعتبارًا من الإصدار 20 من Chrome (الإصدار 20.0.1132.57 بالتحديد)، تم تفعيل ميزة "مناطق CSS" من خلال واجهة chrome://flags. لتفعيل مناطق CSS، اتّبِع الخطوات التالية:

  1. افتح علامة تبويب أو نافذة جديدة في Chrome.
  2. اكتب chrome://flags في شريط الموقع الجغرافي.
  3. استخدِم ميزة البحث في الصفحة (control/command + f) وابحث عن قسم "ميزات منصة الويب التجريبية".
  4. انقر على الرابط تفعيل.
  5. انقر على الزر إعادة التشغيل الآن في أسفل الصفحة.

لمزيد من المعلومات عن ميزات Chrome الاختبارية، يُرجى الاطّلاع على مشاركة مدونتي حول كل ما تحتاج إلى معرفته عن ميزات Chrome الاختبارية.

بعد إعادة تشغيل المتصفّح، يمكنك بدء تجربة ميزة "مناطق CSS".

نظرة عامة على مناطق CSS

تسمح ميزة "مناطق CSS" بتدفّق كتلة من النص الذي تم وضع علامات دلالية عليه تلقائيًا إلى "المربّعات" (العناصر حاليًا). يوضّح الرسم البياني أدناه عملية فصل النص (المسار) والمربّعات (المناطق التي يتدفق فيها النص):

تدفق المحتوى إلى مناطق محدّدة
تدفق المحتوى إلى مناطق محدّدة

لنلقِ نظرة على حالة استخدام فعلية لمناطق CSS. بالإضافة إلى عملي كمطوّر في Adobe، أنا أيضًا كاتب خيال علمي. أنشر أعمالي على الإنترنت بشكل متكرر بموجب ترخيص المشاع الإبداعي، ولكي أسمح بعرضها على أكبر عدد ممكن من الأجهزة والمتصفّحات، أستخدم غالبًا تنسيقًا بسيطًا للغاية يشبه هذا:

مثال على مشروع قديم غير مُنمَّط
مثال على مشروع غير منسق للمحتوى الخاص بالأشخاص

باستخدام مناطق CSS، تمكّنت من إنشاء تجربة أكثر تشويقًا من الناحية المرئية وأكثر وظيفية لأنّه من الأسهل التنقّل فيها والقراءة منها:

مشروع Human Legacy Project يعرض المنطقة
مشروع قديم للمستخدمين مع المناطق

لأغراض توضيحية، أضفت إمكانية إظهار مناطق CSS في هذا النموذج الأولي. توضِّح لقطة الشاشة أدناه كيفية ترتيب المناطق بحيث تبدو كأعمدة تلتف حول رسم بياني ومقتطف في المنتصف:

مشروع Human Legacy Project يعرض المناطق
مشروع Human Legacy Project يعرض المناطق

يمكنك تجربة هذا النموذج الأوّلي (بالإضافة إلى عرض رمز المصدر) هنا. استخدِم مفاتيح الأسهم للتنقّل، واضغط على المفتاح Esc لعرض المناطق. تتوفّر النماذج الأوّلية السابقة أيضًا هنا.

إنشاء مسار مُعنوَن

إنّ ملف CSS المطلوب لجعل مجموعة من النصوص تتدفق في المناطق بسيط للغاية. يحدّد المقتطف أدناه تدفقًا باسم "article" لعنصر div الذي يحمل المعرّف "content"، ويحدّد التدفق نفسه "article" لأي عنصر يحمل الفئة "region". والنتيجة هي أنّ النص الوارد داخل عنصر "المحتوى" سيتدفق تلقائيًا عبر أي عنصر يحمل الفئة "منطقة".

<!DOCTYPE html>
<html>
<head>
    <style>
    #content {
        { % mixin flow-into: article; % }
    }

    .region {
        { % mixin flow-from: article; % }
        box-sizing: border-box;
        position: absolute;
        width: 200px;
        height: 200px;
        padding: 10px;
    }

    #box-a {
        border: 1px solid red;
        top: 10px;
        left: 10px;
    }

    #box-b {
        border: 1px solid green;
        top: 210px;
        left: 210px;
    }

    #box-c {
        border: 1px solid blue;
        top: 410px;
        left: 410px;
    }
    </style>
</head>
<body>
    <div id="box-a" class="region"></div>
    <div id="box-b" class="region"></div>
    <div id="box-c" class="region"></div>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
    </div>
</body>
</html>

تظهر النتيجة على النحو التالي:

نتيجة الرمز البرمجي أعلاه
نتيجة الرمز أعلاه

يُرجى العِلم أنّ النص داخل div "المحتوى" لا يملك أي معلومات عن طريقة عرضه. بعبارة أخرى، يمكن أن يظلّ سليمًا من الناحية الدلالية بالكامل حتى أثناء تدفقه في مناطق مختلفة. بالإضافة إلى ذلك، بما أنّ المناطق هي عناصر فقط، يتم تحديد مواضعها وتحديد أحجامها باستخدام CSS تمامًا مثل أي عنصر آخر، وبالتالي فهي متوافقة تمامًا مع مبادئ التصميم السريع الاستجابة. إنّ تحديد العناصر كجزء من مسار مُعنوَن يعني ببساطة أنّ النص المحدّد يتدفق من خلالها تلقائيًا.

نموذج عناصر CSS

تحدِّد CSS Object Model، أو CSSOM، واجهات برمجة التطبيقات JavaScript للعمل مع CSS. في ما يلي قائمة بواجهات برمجة التطبيقات الجديدة ذات الصلة بمناطق CSS:

  • document.webkitGetNamedFlows(): دالة تعرض مجموعة المسارات المُسمّاة المتاحة في المستند.
  • document.webkitGetNamedFlows().namedItem("article"): دالة تعرض إشارة إلى مسار مُسمّى معيّن. تتوافق الوسيطة مع الاسم المحدّد كقيمة لسمتَي CSS flow-into وfrom-from. للحصول على إشارة إلى مسار الإحالة الناجحة المُحدَّد في مقتطف الرمز أعلاه، عليك إدخال السلسلة "article".
  • WebKitNamedFlow: تمثيل عنصر لجليد جليدي يحمل اسمًا مع السمات والوظائف التالية:
    • firstEmptyRegionIndex: قيمة عددية تشير إلى فهرس أول منطقة فارغة مرتبطة بالمسار المُعنوَن. اطّلِع على getRegions() أدناه للتعرّف على كيفية الحصول على مجموعة المناطق.
    • name: قيمة سلسلة تحتوي على اسم العملية
    • overset: خاصية منطقية:
      • false عندما يكون محتوى العملية المُسمّاة ملائمًا للمناطق المرتبطة
      • true عندما لا يكون المحتوى مناسبًا ويلزم إضافة المزيد من المناطق لتضمين كل المحتوى
    • getContent(): دالة تعرض مجموعة تتضمّن إشارات إلى العقد التي تتدفق إلى العملية المُسمّاة.
    • getRegions(): دالة تُرجع مجموعة تتضمّن إشارات إلى المناطق التي تحتوي على محتوى التدفق المُسمّى.
    • getRegionsByContentNode(node): دالة تعرض مرجعًا إلى المنطقة التي تحتوي على العقدة المحدّدة. ويُعدّ هذا مفيدًا بشكلٍ خاص للعثور على المناطق التي تحتوي على عناصر مثل عناصر الربط المُسمّاة.
  • حدث webkitregionoversetchange يتم بدء هذا الحدث في WebkitNamedFlow كلما تغيّر تصميم المحتوى المرتبط لأي سبب (مثل إضافة محتوى أو إزالته أو تغيير حجم الخط أو شكل المنطقة أو غير ذلك) و يؤدي إلى تغيير سمة webkitRegionOverset للمنطقة. يكون هذا الحدث مفيدًا للاستماع إلى التغييرات على التنسيقات الكبيرة. يشير ذلك إلى حدوث أمر مهم وقد يحتاج التنسيق إلى الانتباه، مثل: يجب إضافة المزيد من المناطق، أو قد تكون بعض المناطق فارغة، وما إلى ذلك.
  • حدث webkitregionfragmentchange لم يتم تنفيذه في وقت إجراء هذا التعديل. يتم بدء هذا الحدث على WebkitNamedFlow كلما تغيّر تصميم المحتوى المرتبط لأي سبب، تمامًا مثل webkitregionoversetchange، ولكن بغض النظر عن أي تغيير في سمات webkitRegionOverset. يكون هذا الحدث مفيدًا للاستماع إلى تغييرات دقيقة في التنسيق لا تؤثّر بالضرورة في التنسيق الكامل للتدفّق المُعنوَن، على سبيل المثال: يتم نقل المحتوى من منطقة إلى أخرى، ولكن لا يزال المحتوى العام يناسب جميع المناطق.
  • Element.webkitRegionOverset: تصبح العناصر مناطق عند تعيين خاصية CSS‏ flow-from لها. تحتوي هذه العناصر على سمة webkitRegionOverset التي تشير، إذا كانت جزءًا من عملية تدفق مُسمّاة، إلى ما إذا كان المحتوى من عملية التدفق يتجاوز المنطقة أم لا. في ما يلي القيم المحتمَلة لمَعلمة webkitRegionOverset:
    • "overflow" إذا كان هناك محتوى أكثر مما يمكن أن تتسع له المنطقة
    • "ملائم" إذا توقّف المحتوى قبل نهاية المنطقة
    • "فارغ" إذا لم يصل المحتوى إلى المنطقة

من الاستخدامات الأساسية لواجهة برمجة التطبيقات CSSOM هي الاستماع إلى أحداث webkitregionoversetchange وإضافة مناطق أو إزالتها ديناميكيًا لاستيعاب كميات مختلفة من النص. على سبيل المثال، إذا كان حجم النص الذي سيتم تنسيقه غير متوقّع (ربما يكون من إنشاء المستخدم)، أو إذا تم تغيير حجم نافذة المتصفّح، أو إذا تغيّر حجم الخط، قد يكون من الضروري إضافة مناطق أو إزالتها لاستيعاب التغيير في التدفق. بالإضافة إلى ذلك، إذا كنت تريد تنظيم المحتوى في صفحات، ستحتاج إلى آلية لتعديل DOM ديناميكيًا بالإضافة إلى المناطق.

يوضّح المقتطف التالي من رمز JavaScript استخدام CSSOM لإضافة مناطق ديناميكيًا حسب الحاجة. يُرجى العلم أنّه لا يتعامل مع إزالة المناطق أو تحديد حجمها ومواقعها، وذلك بهدف التبسيط، فهو مخصّص لأغراض العرض فقط.

var flow = document.webkitGetNamedFlows().namedItem("article")
flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);

function onLayoutUpdate(event) {
    var flow = event.target;
    
    // The content does not fit
    if (flow.overset === true) {
    addRegion();
    } else {
    regionLayoutComplete();
    }
}

function addRegion() {
    var region = document.createElement("div");
    region.style = "flow-from: article";
    document.body.appendChild(region);
}

function regionLayoutComplete() {
    // Finish up your layout.
}

تتوفّر المزيد من العروض التوضيحية في صفحة نماذج مناطق CSS.

نماذج صفحات CSS

إنّ الاستفادة من CSSOM هي على الأرجح الطريقة الأكثر فعالية ومرونة لتنفيذ إجراءات مثل تقسيم الصفحات والتنسيق السريع الاستجابة، ولكنّ Adobe تعمل منذ فترة طويلة مع أدوات النصوص والنشر المكتبي لدرجة أنّها تعرِف أنّ المصمّمين والمطوّرين سيحتاجون أيضًا إلى طريقة أسهل للحصول على إمكانات عامة نسبيًا لتقسيم الصفحات. لذلك، نعمل على اقتراح يُعرف باسم "نماذج صفحات CSS"، والذي يتيح تحديد سلوك الفهرسة بشكل كامل وواضح.

لنلقِ نظرة على حالة استخدام شائعة لنماذج صفحات CSS. يوضّح مقتطف الرمز البرمجي أدناه استخدام CSS لإنشاء مسارَين مُعنوَنَين: "article-flow" و "timeline-flow". بالإضافة إلى ذلك، يحدّد محددًا ثالثًا يُسمى "مقالات مُدمَجة" سيتم تضمين التدفقَين فيه. يشير إدراج الموقع overflow-style داخل أداة الاختيار "combined-articles" إلى أنّه يجب تقسيم المحتوى تلقائيًا إلى صفحات على طول محور x أو أفقيًا:

<style>
    #article {
    { % mixin flow-into: article-flow; % }
    }

    #timeline {
    { % mixin flow-into: timeline-flow; % }
    }

    #combined-articles {
    overflow-style: paged-x;
    }
</style>

بعد تحديد مسارات المستخدمين وسلوك المحتوى الزائد المطلوب، يمكننا إنشاء نموذج الصفحة نفسه:

@template {
    @slot left {
    width: 35%;
    float: left;
    { % mixin flow-from: article-flow; % }
    }

    @slot time {
    width: 25%;
    float: left;
    { % mixin flow-from: timeline-flow; % }
    }

    @slot right {
    width: 35%;
    float: left;
    { % mixin flow-from: article-flow; % }
    }
}

يتمّ تحديد نماذج الصفحات باستخدام بنية "at" الجديدة. في مقتطف الرمز أعلاه، نحدّد ثلاث خانات، كلّ منها تتوافق مع عمود. سيظهر النص من "تدفق المقالة" في الأعمدة على يمين الشاشة ويسارها، وسيظهر النص من "تدفق المخطط الزمني" في العمود في المنتصف. قد تبدو النتيجة على النحو التالي:

مثال على نماذج الصفحات
مثال على نماذج الصفحات

يُرجى العِلم أنّ نص المقالة، أي النص في العمودَين الأيمن والأيسر، باللغة الإنجليزية، وأنّ المخطط الزمني في الوسط باللغة الألمانية. بالإضافة إلى ذلك، يمكنك عرض صفحات المستندات أفقيًا بدون الحاجة إلى أي رمز JavaScript. تم تنفيذ كل شيء بشكل كامل في CSS.

لا تزال "نماذج صفحات CSS" في مرحلة الاقتراح، ولكن لدينا نموذج أولي يستخدم "أداة تمويه" JavaScript (المعروفة أيضًا باسم polyfill) للسماح لك بتجربتها الآن.

للمزيد من المعلومات عن مناطق CSS بشكل عام، يُرجى الاطّلاع على صفحة مناطق CSS على html.adobe.com.

استبعادات CSS

لتحقيق تنسيق يشبه تنسيق المجلات، لا يكفي أن يكون بإمكانك ترتيب النص في مناطق مختلفة. من العناصر المهمة في نشر الكتب المكتبي بجودة عالية وبشكل مرئي مثير للاهتمام هي إمكانية تدفق النص حول الرسومات والأشكال غير المنتظمة أو داخلها. توفّر ميزة "استبعادات CSS" هذا المستوى من جودة الإنتاج على الويب.

لقطة الشاشة أدناه مأخوذة من نموذج أولي لاستبعادات CSS، وهي تعرض نصًا يتدفق بشكل ديناميكي حول مسار يتطابق مع محيط تشكيل صخري كبير:

مثال على استبعادات CSS قيد التنفيذ
مثال على استخدام استبعادات CSS

يظهر العكس في لقطة الشاشة التالية: نص يتدفق داخل مضلّعات ذات أشكال غير منتظمة:

نص يتدفق إلى مضلّعات ذات أشكال غير منتظمة
نص متدفق في مضلّعات ذات أشكال غير منتظمة

إنّ الخطوة الأولى للتمكن من تدفق النص حول أشكال عشوائية أو داخلها هي تطوير الخوارزميات المطلوبة وتحسينها. تعمل Adobe حاليًا على عمليات التنفيذ التي سيتم تقديمها مباشرةً إلى WebKit. بعد تحسين هذه الخوارزميات، ستصبح هي الأسس التي يتم بناء باقي استبعادات CSS عليها.

لمزيد من المعلومات عن استبعادات CSS، يُرجى الاطّلاع على صفحة استبعادات CSS على html.adobe.com، وللاطّلاع على نظرة أكثر تفصيلاً على عمل Adobe في التكنولوجيا الأساسية لاستبعادات CSS، يُرجى الاطّلاع على مشاركة Hans Muller في مدوّنته بعنوان صندوق أفقي: تقاطع المضلّعات لاستبعادات CSS.

الحالة الحالية لمناطق CSS واستبعادات CSS

كانت المرة الأولى التي تحدثت فيها علنًا عن مناطق CSS واستبعادات CSS في جلسة Adobe Developer Pod في مؤتمر Google I/O لعام 2011. في ذلك الوقت، كنت أعرض عروضًا توضيحية في متصفّح النماذج الأولية المخصّص. كان الاستقبال حماسيًا للغاية، ولكن كان هناك شعور واضح بخيبة الأمل عندما اكتشف الحاضرون أنّ أيًا من الوظائف التي كنت أعرضها لم تكن متاحة بعد في أيّ من المتصفّحات الرئيسية.

شاركتُ في مؤتمر Google I/O مرة أخرى هذا العام (2012)، وهذه المرة كمقدّم عرض مع زميلي فينسنت هاردي وأليكس دانيليلو من Google (يمكنك مشاهدة العرض التقديمي هنا). بعد عام واحد فقط، تم تنفيذ حوالي% 80 من مواصفات CSS Regions في WebKit، وهي متوفرة حاليًا في أحدث إصدار من Google Chrome (يُرجى العِلم أنّه يجب تفعيل CSS Regions حاليًا من خلال chrome://flags). وقد تم توفير التوافق الأولي مع CSS Regions في Chrome لأجهزة Android:

المناطق في Chrome لنظام التشغيل Android
المناطق في Chrome لنظام التشغيل Android

بالإضافة إلى ذلك، يتم تنفيذ كلّ من مناطق CSS واستبعادات CSS في إصدار Internet Explorer 10 التجريبي، وهي مضمّنة حاليًا في خارطة طريق Mozilla لعام 2012 لمتصفّح Firefox. من المفترض أن يتيح الإصدار الرئيسي التالي من Safari معظم مواصفات CSS Regions، ومن المفترض أن تتضمّن التحديثات اللاحقة الباقي منها.

في ما يلي مخطط زمني تفصيلي للتقدّم الذي أحرزناه في ما يتعلّق بمناطق CSS واستبعادات CSS منذ اقتراحنا الأوّلي الذي قدّمناه إلى W3C في نيسان (أبريل) 2011:

مدى تقدُّم المناطق والاستبعادات
مدى التقدّم في تحديد المناطق والاستثناءات

الخاتمة

تمتلك Adobe خبرة كبيرة في مجال النصوص والخطوط والنشر المكتبي بشكل عام من خلال أدوات مثل InDesign. على الرغم من أنّ الويب يُعدّ منصة فعّالة جدًا للنص، نريد استخدام معرفتنا وخبرتنا لتحسين عرض النصوص. تسمح مناطق CSS واستبعادات CSS للمحتوى بالبقاء منظَّمًا من الناحية الدلالية مع تفعيل تنسيق يشبه مجلة فعلية، ما يؤدي في النهاية إلى إنشاء صفحات ويب أكثر تعبيرًا.