این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

چیدمان مجله مانند برای وب با مناطق CSS و موارد استثنا

Christian Cantrell

معرفی

وب یک پلتفرم بسیار قدرتمند برای متن است، حوزه ای که Adobe در آن تجربه و تخصص زیادی دارد. هنگامی که Adobe به دنبال راه‌هایی برای کمک به پیشبرد وب بود، بنابراین، پیشرفت بیشتر قابلیت‌های متنی وب مکانی آشکار برای شروع به نظر می‌رسید. وب به طور کلی یک ستون و جهت عمودی را برای متن در نظر می گیرد. اگرچه امکان جریان دادن متن در اطراف گرافیک و حتی قالب بندی متن به چندین ستون با CSS وجود دارد، اما دستیابی به طرح بندی واقعی مجله مانند در وب بسیار دشوار است. Adobe با مناطق CSS و Exclusions CSS در تلاش برای آوردن قدرت انتشار دسکتاپ به مرورگرهای مدرن پیشرو است. به عنوان مثال، در تصویر زیر، Exclusions CSS برای جریان دادن متن در امتداد کانتور کوه استفاده می شود:

سند موجود در تصویر زیر نیز از Exclusions CSS استفاده می‌کند تا به متن اجازه می‌دهد تا در اطراف اشکال موجود در تصاویر بپیچد، و همچنین از مناطق CSS برای قالب‌بندی متن به ستون‌ها و حول یک نقل قول کششی استفاده می‌کند:

مناطق CSS

قبل از پرداختن به جزئیات مناطق CSS ، می‌خواهم نحوه فعال کردن مناطق در Google Chrome را توضیح دهم. هنگامی که مناطق CSS را فعال کردید، می توانید برخی از نمونه های ارجاع شده در این مقاله را امتحان کنید و نمونه خود را ایجاد کنید.

فعال کردن مناطق CSS در Google Chrome

از نسخه 20 کروم (نسخه 20.0.1132.57، به طور دقیق)، مناطق CSS از طریق رابط chrome://flags فعال می شود. برای فعال کردن مناطق CSS، مراحل زیر را دنبال کنید:

یک برگه یا پنجره جدید در کروم باز کنید.
chrome://flags در نوار مکان تایپ کنید.
از find in page (control/command + f) استفاده کنید و بخش "ویژگی های آزمایشی بستر وب" را جستجو کنید.
روی لینک Enable کلیک کنید.
روی دکمه Relaunch Now در پایین کلیک کنید.

برای اطلاعات بیشتر درباره پرچم‌های Chrome، به پست وبلاگ من در همه چیز درباره پرچم‌های Chrome مراجعه کنید.

هنگامی که مرورگر خود را مجدداً راه اندازی کردید، می توانید آزمایش با مناطق CSS را شروع کنید.

مروری بر مناطق CSS

مناطق CSS اجازه می دهد تا یک بلوک از متن علامت گذاری شده معنایی به طور خودکار در "جعبه ها" (عناصر فعلی) جریان یابد. نمودار زیر جداسازی متن (جریان) و کادرها (منطقه هایی که متن در آنها جریان دارد) را نشان می دهد:

بیایید نگاهی به یک مورد واقعی استفاده از مناطق CSS بیندازیم. من علاوه بر توسعه دهنده در Adobe، یک نویسنده علمی تخیلی نیز هستم. من اغلب کارهایم را تحت مجوز Creative Commons به صورت آنلاین منتشر می‌کنم، و برای اینکه بتوانم در حداکثر تعداد دستگاه‌ها و مرورگرها کار کند، اغلب از قالب بسیار ساده‌ای مشابه این استفاده می‌کنم:

با استفاده از مناطق CSS، من توانستم تجربه‌ای ایجاد کنم که هم از نظر بصری جالب‌تر باشد و هم بسیار کاربردی‌تر، زیرا پیمایش آسان‌تر و خواندن آن راحت‌تر است:

پروژه میراث انسانی منطقه را نشان می دهد — پروژه میراث انسانی با مناطق.

برای اهداف نمایشی، من توانایی آشکارسازی مناطق CSS را در این نمونه اولیه اضافه کردم. اسکرین شات زیر نحوه چیدمان نواحی را به گونه ای نشان می دهد که این تصور را ایجاد می کنند که ستون هایی هستند که در مرکز یک نمودار و یک نقل قول کشیده می شوند:

پروژه میراث انسانی که مناطق را نشان می دهد

می توانید با این نمونه اولیه (و همچنین کد منبع را مشاهده کنید) در اینجا آزمایش کنید. برای پیمایش از کلیدهای جهت دار خود استفاده کنید و برای نمایش مناطق، کلید Esc را فشار دهید. نمونه های اولیه نیز در اینجا موجود است.

ایجاد یک جریان نامگذاری شده

CSS مورد نیاز برای عبور یک بلوک متن در مناطق بسیار ساده است. قطعه زیر یک جریان با نام به نام "article" را به یک div با شناسه "content" اختصاص می دهد و همان "مقاله" به نام flow را به هر عنصری با کلاس "region" اختصاص می دهد. نتیجه این است که متن موجود در عنصر "محتوا" به طور خودکار در هر عنصری با کلاس "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 Object Model یا CSSOM API های جاوا اسکریپت را برای کار با CSS تعریف می کند. در زیر لیستی از APIهای جدید مربوط به مناطق CSS آمده است:

document.webkitGetNamedFlows() : تابعی که مجموعه ای از جریان های نامگذاری شده موجود در سند را برمی گرداند.
document.webkitGetNamedFlows().namedItem("article") : تابعی که مرجعی را به یک جریان با نام خاص برمی گرداند. آرگومان با نام مشخص شده به عنوان مقدار خصوصیات flow-into و from-from CSS مطابقت دارد. برای دریافت ارجاع به جریان نام‌گذاری شده در قطعه کد بالا، باید از رشته «article» عبور کنید.
WebKitNamedFlow : نمایش یک شی از یک floe با نام با ویژگی ها و توابع زیر:
- firstEmptyRegionIndex : یک مقدار صحیح که به شاخص اولین منطقه خالی مرتبط با جریان نامگذاری شده اشاره می کند. برای آشنایی با نحوه دریافت مجموعه مناطق، به getRegions() زیر مراجعه کنید.
- name : یک مقدار رشته با نام جریان.
- overset : یک ویژگی بولی که عبارت است از:
  - false زمانی که محتوای جریان نام‌گذاری شده در مناطق مرتبط قرار می‌گیرد
  - زمانی true که محتوا مناسب نباشد و مناطق بیشتری حاوی تمام محتوا باشد.
- getContent() : تابعی که مجموعه ای را با ارجاع به گره هایی که در جریان نامگذاری شده جریان دارند برمی گرداند.
- getRegions() : تابعی که مجموعه ای را با ارجاع به مناطقی که محتوای جریان نامگذاری شده را در خود نگه می دارد، برمی گرداند.
- getRegionsByContentNode(node) : تابعی که مرجعی را به ناحیه حاوی گره مشخص شده برمی گرداند. این به ویژه برای یافتن مناطق حاوی چیزهایی مانند لنگرهای نامگذاری شده مفید است.
رویداد webkitregionoversetchange . هر زمان که طرح محتوای مرتبط به هر دلیلی تغییر کند (محتوا اضافه یا حذف شود، اندازه فونت تغییر کند، شکل منطقه تغییر کند و غیره) در یک WebkitNamedFlow فعال می‌شود و باعث می‌شود ویژگی webkitRegionOverset یک منطقه تغییر کند. . این رویداد برای گوش دادن به تغییرات درشت چیدمان مفید است. این نشانگر این است که اتفاق مهمی افتاده است و ممکن است چیدمان نیاز به توجه داشته باشد، مانند: مناطق بیشتری مورد نیاز است، برخی از مناطق ممکن است خالی باشند و غیره.
رویداد webkitregionfragmentchange . در زمان این ویرایش اجرا نشده است. این رویداد در یک WebkitNamedFlow هر زمان که چیدمان محتوای مرتبط به هر دلیلی تغییر کند، مانند webkitregionoversetchange ، اما بدون توجه به هرگونه تغییر در ویژگی‌های webkitRegionOverset ، فعال می‌شود. این رویداد برای گوش دادن به تغییرات طرح‌بندی دقیق که لزوماً بر کل طرح‌بندی جریان نام‌گذاری شده تأثیر نمی‌گذارد، مفید است، برای مثال: محتوا از یک منطقه به منطقه دیگر منتقل می‌شود، اما محتوای کلی همچنان در همه مناطق جا می‌گیرد.
Element.webkitRegionOverset : عناصر زمانی تبدیل به منطقه می شوند که ویژگی flow-from CSS را به آنها اختصاص داده شود. این عناصر دارای ویژگی webkitRegionOverset هستند که اگر بخشی از یک جریان نامگذاری شده باشند، نشان می دهد که آیا محتوای یک جریان در منطقه سرریز است یا خیر. مقادیر ممکن webkitRegionOverset عبارتند از:
- "سرریز" اگر محتوای بیشتری از آن منطقه وجود داشته باشد
- "مناسب" اگر محتوا قبل از پایان منطقه متوقف شود
- "خالی" اگر محتوا به منطقه نرسیده باشد

یکی از کاربردهای اصلی CSSOM گوش دادن به رویدادهای webkitregionoversetchange و افزودن یا حذف پویا مناطق به منظور تطبیق مقادیر مختلف متن است. به عنوان مثال، اگر مقدار متنی که باید قالب‌بندی شود غیرقابل پیش‌بینی باشد (شاید توسط کاربر ایجاد شده باشد)، اگر اندازه پنجره مرورگر تغییر کند، یا اگر اندازه فونت تغییر کند، ممکن است لازم باشد مناطقی اضافه یا حذف شوند تا تغییرات جریان را تطبیق دهد. . علاوه بر این، اگر می خواهید محتوای خود را در صفحات سازماندهی کنید، به مکانیزمی برای تغییر پویا DOM و همچنین مناطق خود نیاز دارید.

قطعه کد جاوا اسکریپت زیر استفاده از 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 Page Templates هستیم که اجازه می‌دهد رفتار صفحه‌بندی به طور کامل تعریف شود.

بیایید نگاهی به یک مورد معمول برای قالب های صفحه CSS بیندازیم. قطعه کد زیر استفاده از CSS را برای ایجاد دو جریان نامگذاری شده نشان می دهد: "جریان مقاله" و "زمان خط جریان". علاوه بر این، انتخابگر سومی به نام "مقالات ترکیبی" را تعریف می کند که در داخل آن دو جریان قرار می گیرند. گنجاندن ساده ویژگی 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" تعریف می شوند. در قطعه کد بالا، سه اسلات تعریف می کنیم که هر کدام مربوط به یک ستون است. متن «جریان مقاله» از میان ستون‌های سمت چپ و راست جریان می‌یابد، و متن «جریان زمانی» ستون را در وسط پر می‌کند. نتیجه ممکن است چیزی شبیه به این باشد:

توجه داشته باشید که متن مقاله -- متن در ستون های چپ و راست -- انگلیسی است و جدول زمانی در مرکز آلمانی است. علاوه بر این، سند به صورت افقی و بدون نیاز به کد جاوا اسکریپت صفحه می شود. همه چیز کاملاً به صورت اعلامی در CSS انجام شد.

الگوهای صفحه CSS هنوز یک پیشنهاد هستند، با این حال ما یک نمونه اولیه داریم که از جاوا اسکریپت "shim" (معروف به polyfill ) استفاده می کند تا به شما امکان آزمایش با آنها را می دهد.

برای کسب اطلاعات بیشتر در مورد مناطق CSS به طور کلی، صفحه مناطق CSS را در html.adobe.com بررسی کنید.

استثناهای CSS

برای دستیابی به چیدمان واقعی مجله مانند، کافی نیست که بتوانید متن را در مناطق جریان دهید. یک عنصر مهم در انتشار دسکتاپ با کیفیت بالا و از نظر بصری جالب، توانایی جریان دادن متن در اطراف یا درون گرافیک ها و اشکال نامنظم است. CSS Exclusions این سطح از کیفیت تولید را به وب می آورد.

اسکرین شات زیر از نمونه اولیه CSS Exclusions است و متنی را نشان می دهد که به صورت پویا در اطراف مسیری که با خط شکل یک سنگ بزرگ مطابقت دارد، جریان می یابد:

عکس در تصویر بعدی نشان داده شده است: متنی که در داخل چند ضلعی های نامنظم جریان دارد:

متن در چند ضلعی های نامنظم جریان می یابد

اولین قدم برای اینکه بتوانید متن را در اطراف یا درون اشکال دلخواه جریان دهید، توسعه و بهینه سازی الگوریتم های مورد نیاز است. Adobe در حال حاضر روی پیاده سازی هایی کار می کند که مستقیماً به WebKit ارائه می شود. هنگامی که این الگوریتم‌ها بهینه شدند، به پایه‌هایی تبدیل می‌شوند که باقیمانده‌های CSS بر روی آن ساخته می‌شوند.

برای اطلاعات بیشتر در مورد استثناهای CSS، به صفحه Exclusions CSS در html.adobe.com مراجعه کنید . .

وضعیت فعلی مناطق CSS و استثناهای CSS

اولین باری که در مورد مناطق CSS و Exclusions CSS به صورت عمومی صحبت کردم، در Adobe Developer Pod در Google I/O 2011 بود. در آن زمان، نمایش‌های نمایشی را در مرورگر نمونه اولیه سفارشی خودمان نشان می‌دادم. استقبال بسیار مشتاقانه بود، با این حال وقتی تماشاگران متوجه شدند که هیچ یک از عملکردهایی که من نشان می دادم هنوز در هیچ یک از مرورگرهای اصلی موجود نیست، احساس ناامیدی قابل لمسی وجود داشت.

من امسال (2012) دوباره در Google I/O بودم، این بار به عنوان مجری همراه با همکارم وینسنت هاردی و الکس دانیلو از گوگل (شما می توانید ارائه را در اینجا مشاهده کنید ). فقط یک سال بعد، حدود 80٪ از مشخصات مناطق CSS در WebKit پیاده سازی شده است و در حال حاضر در جدیدترین نسخه Google Chrome موجود است (توجه داشته باشید که مناطق CSS در حال حاضر باید از طریق chrome://flags فعال شوند). پشتیبانی اولیه از مناطق CSS حتی در کروم برای اندروید نیز مشاهده شده است:

علاوه بر این، هر دو منطقه CSS و Exclusions CSS در پیش نمایش اینترنت اکسپلورر 10 پیاده سازی شده اند و در حال حاضر در نقشه راه موزیلا برای فایرفاکس در سال 2012 قرار دارند. نسخه اصلی بعدی سافاری باید از اکثر مشخصات CSS Regions پشتیبانی کند و به‌روزرسانی‌های بعدی باید شامل بقیه مشخصات باشد.

در زیر جدول زمانی دقیقی از پیشرفت ما با مناطق CSS و استثناهای CSS از زمان پیشنهاد اولیه ما به W3C در آوریل 2011 ارائه شده است:

نتیجه

Adobe از طریق ابزارهایی مانند InDesign، تجربه زیادی با متن، فونت ها و به طور کلی انتشار دسکتاپ دارد. اگرچه وب در حال حاضر یک پلت فرم بسیار قدرتمند برای متن است، ما می خواهیم از دانش و تجربه خود برای پیشبرد ارائه متن بیشتر استفاده کنیم. مناطق CSS و Exclusions CSS به محتوا اجازه می‌دهند ساختار معنایی داشته باشند و در عین حال طرح‌بندی واقعی مجله‌مانند و در نهایت وب بسیار گویاتر را نیز ممکن می‌سازند.