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

Christian Cantrell

مقدمة

الويب هو نظام أساسي قوي للغاية لكتابة النصوص، وهو مجال يتمتع Adobe فيه بقدر كبير من الخبرة والخبرة. عندما كانت Adobe تبحث عن طرق للمساعدة في المضيّ قدمًا في الويب، كان من الواضح أنّ تطوير إمكانات النص على الويب كان نقطة الانطلاق بالنسبة إلينا. تفترض الويب بشكل عام وجود عمود واحد باتجاه عمودي للنص. بالرغم من إمكانية تدفق النص حول الرسومات وحتى تنسيق النص إلى أعمدة متعددة باستخدام CSS، إلا أنه لا يزال من الصعب جدًا الحصول على تنسيق حقيقي يشبه المجلات على الويب. يسعى Adobe من خلال استخدام مناطق CSS واستبعادات CSS إلى إطلاق العنان لإمكانات النشر على أجهزة الكمبيوتر المكتبي في المتصفّحات الحديثة. على سبيل المثال، في لقطة الشاشة أدناه، يتم استخدام "استبعادات 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 with Regions:

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

مشروع إثراء الإنسان يعرض المناطق
مشروع الإرث البشري في توضيح المناطق

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

إنشاء تدفق مُسمّى

إنّ خدمة CSS المطلوبة للحصول على جزء من نص تتدفق خلال المناطق بسيطة للغاية. يعيّن المقتطف أدناه مسارًا يحمل اسم "المقالة" إلى قسم div برقم التعريف "content"، كما يعيّن تدفق "المقالة" المسماة نفسه لأي عنصر يتضمن الفئة "region". والنتيجة هي أن النص الموجود داخل عنصر "content" يتدفق تلقائيًا عبر أي عنصر يتضمن الفئة "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، أو 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 في أداة اختيار "المقالات المدمجة" إلى أنّه يجب صفحات المحتوى تلقائيًا على طول المحور "س"، أو أفقيًا:

<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 اقتراحًا، ولكن لدينا نموذج أوّلي يستخدم "shim" في JavaScript (المعروف أيضًا باسم polyfill) للسماح لك بتجربتها الآن.

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

استثناءات خدمة مقارنة الأسعار (CSS)

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

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

مثال على استخدام استبعادات CSS
مثال على استخدام استثناءات CSS

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

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

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

للحصول على مزيد من المعلومات حول استثناءات CSS، يمكنك الاطّلاع على صفحة "استبعادات CSS" على html.adobe.com، وإلقاء نظرة أكثر تفصيلاً على عمل Adobe على التقنية الأساسية لاستبعادات CSS، راجع مشاركة المدونة التي نشرها "هانز مولر" بعنوان Horizontal Box: Polygon Intersection for CSS الاستبعادات.

الحالة الحالية لمناطق CSS واستثناءات CSS

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

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

المناطق على Chrome لنظام Android
ميزة المناطق على Chrome لنظام Android

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

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

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

الخلاصة

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