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

Christian Cantrell

مقدمة

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

مثال على استثناءات CSS أثناء العمل

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

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

مناطق CSS

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

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

As of version 20 of Chrome (version 20.0.1132.57, to be exact), CSS Regions is enabled through the chrome://flags interface. لتفعيل CSS Regions، اتّبِع الخطوات التالية:

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

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

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

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

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

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

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

مثال على مشروع Human Legacy بدون نمط

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

مشروع Human Legacy Project مع Regions

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

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

يمكنك تجربة هذا النموذج الأوّلي (بالإضافة إلى عرض الرمز المصدر) هنا. استخدِم مفاتيح الأسهم للتنقّل، واضغط على مفتاح 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>

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

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

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

نموذج كائن CSS

ملاحظة: للاختصار، يستخدم هذا القسم بادئة مورّد واحدة فقط (webkit)، ولكن عليك كتابة رمز برمجي يعمل على جميع المتصفّحات التي تتيح هذه الميزة.

يحدّد نموذج كائن 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: تصبح العناصر مناطق عندما يتم تعيين السمة flow-from CSS لها. تحتوي هذه العناصر على السمة webkitRegionOverset التي تشير إلى ما إذا كان المحتوى من مسار معيّن يفيض عن المنطقة، وذلك في حال كانت هذه العناصر جزءًا من مسار مسمّى. القيم المحتملة لـ webkitRegionOverset هي:
  • "overflow" إذا كان هناك محتوى أكثر مما يمكن أن تستوعبه المنطقة
  • "fit" إذا توقّف المحتوى قبل نهاية المنطقة
  • "empty" إذا لم يصل المحتوى إلى المنطقة

One of the primary uses for the CSSOM is listening for webkitregionoversetchange events and dynamically adding or removing regions in order to accommodate varying amounts of text. على سبيل المثال، إذا كان مقدار النص المطلوب تنسيقه غير متوقع (ربما من إنشاء المستخدم)، أو إذا تم تغيير حجم نافذة المتصفح، أو إذا تغير حجم الخط، فقد يكون من الضروري إضافة مناطق أو إزالتها لاستيعاب التغيير في التدفق. بالإضافة إلى ذلك، إذا أردت تنظيم المحتوى في صفحات، ستحتاج إلى آلية لتعديل نموذج العناصر في المستند (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". بالإضافة إلى ذلك، يحدّد المقتطف أداة اختيار ثالثة باسم "combined-articles" سيتم تضمين التدفقَين فيها. يشير الإدراج البسيط للسمة 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" الجديدة. في مقتطف الرمز أعلاه، نحدّد ثلاث خانات، كل منها يتوافق مع عمود. سيتدفق النص من "article-flow" عبر الأعمدة الموجودة على اليسار واليمين، وسيتم ملء النص من "timeline-flow" في العمود الموجود في المنتصف. قد تبدو النتيجة على النحو التالي:

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

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

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

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

استبعادات CSS

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

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

مثال على استثناءات CSS أثناء العمل

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

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

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

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

حالة مناطق CSS واستثناءات CSS ‏ (2012)

كانت المرة الأولى التي تحدثت فيها عن مناطق 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

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

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

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

الخاتمة

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