CSS অঞ্চল এবং এক্সক্লুশন সহ ওয়েবের জন্য ম্যাগাজিনের মতো লেআউট

Christian Cantrell
Christian Cantrell
X হোমপেজ

ভূমিকা

টেক্সটের জন্য ওয়েব অত্যন্ত শক্তিশালী প্ল্যাটফর্ম, এই ক্ষেত্রে Adobe-এর অনেক অভিজ্ঞতা ও দক্ষতা আছে। তাই, Adobe যখন ওয়েবকে আরও উন্নত করার উপায় খুঁজছিল, তখন আমাদের কাছে ওয়েবের টেক্সট সংক্রান্ত ক্ষমতাকে আরও উন্নত করাটাই শুরু করার জন্য উপযুক্ত জায়গা বলে মনে হয়েছিল। ওয়েব সাধারণত টেক্সটের জন্য একটি কলাম, উল্লম্ব ওরিয়েন্টেশন ধরে নেয়। যদিও গ্রাফিক্সের চারপাশে টেক্সট ফ্লো করা এবং এমনকি CSS-এর সাহায্যে একাধিক কলামে টেক্সট ফর্ম্যাট করা সম্ভব, তবুও ওয়েবে সত্যিকারের ম্যাগাজিনের মতো লেআউট অর্জন করা এখনও খুব কঠিন। CSS Regions এবং CSS Exclusions-এর মাধ্যমে, Adobe আধুনিক ব্রাউজারে ডেস্কটপ প্রকাশনার ক্ষমতা আনার প্রচেষ্টাকে এগিয়ে নিয়ে যাচ্ছে। যেমন, নিচের স্ক্রিনশটে, পাহাড়ের কনট্যুর বরাবর টেক্সট ফ্লো করার জন্য CSS এক্সক্লুশন ব্যবহার করা হচ্ছে:

CSS এক্সক্লুশন অ্যাকশনে থাকার উদাহরণ
CSS এক্সক্লুশন কীভাবে কাজ করে তার উদাহরণ

নিচের স্ক্রিনশটে দেখানো ডকুমেন্টে CSS এক্সক্লুশন ব্যবহার করা হয়েছে যাতে ছবির আকারের চারপাশে টেক্সট র‍্যাপ করা যায় এবং CSS রিজিয়ন ব্যবহার করা হয়েছে যাতে কলামে এবং পুল কোটের চারপাশে টেক্সট ফর্ম্যাট করা যায়:

CSS Regions-এর অ্যাকশনের উদাহরণ
CSS Regions-এর অ্যাকশনের উদাহরণ

CSS অঞ্চল

CSS Regions-এর ব্যাপারে বিস্তারিত জানার আগে, Google Chrome-এ কীভাবে অঞ্চল চালু করা যায় সেই ব্যাপারে আমি বলতে চাই। CSS অঞ্চল চালু করার পরে, আপনি এই নিবন্ধে উল্লেখ করা কিছু স্যাম্পেল ব্যবহার করে দেখতে এবং নিজের স্যাম্পেল তৈরি করতে পারবেন।

Google Chrome-এ CSS অঞ্চল চালু করা হচ্ছে

Chrome-এর ২০ ভার্সন (আরও নির্দিষ্ট করে বললে, ২০.০.১১৩২.৫৭ ভার্সন) থেকে CSS Regions, chrome://flags ইন্টারফেসের মাধ্যমে চালু করা হয়েছে। CSS অঞ্চল চালু করতে, এই ধাপগুলি অনুসরণ করুন:

  1. Chrome-এ নতুন ট্যাব বা উইন্ডো খুলুন।
  2. লোকেশন বারে chrome://flags টাইপ করুন।
  3. পৃষ্ঠায় খুঁজুন (control/command + f) বিকল্প ব্যবহার করে "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম ফিচার" বিভাগটি খুঁজুন।
  4. চালু করুন লিঙ্কে ক্লিক করুন।
  5. নিচে এখনই আবার চালু করুন বোতামে ক্লিক করুন।

Chrome-এর ফ্ল্যাগ সম্পর্কে আরও তথ্যের জন্য, Chrome ফ্ল্যাগ সম্পর্কে সব কিছু-এর উপর আমার ব্লগ পোস্ট দেখুন।

আপনার ব্রাউজার আবার চালু করার পরে, আপনি CSS Regions নিয়ে এক্সপেরিমেন্ট শুরু করতে পারবেন।

CSS Regions-এর ওভারভিউ

CSS Regions, সেম্যান্টিক্যালি মার্ক-আপ করা টেক্সটের একটি ব্লককে অটোমেটিক "বক্স" (বর্তমানে এলিমেন্ট)-এ ফ্লো করার অনুমতি দেয়। নিচের ডায়াগ্রামটি টেক্সট (ফ্লো) এবং বক্সের (যে অঞ্চলে টেক্সট ফ্লো করে) মধ্যে পার্থক্য দেখায়:

নির্দিষ্ট অঞ্চলে কন্টেন্ট দেখানো হয়
কন্টেন্ট নির্দিষ্ট অঞ্চলে দেখানো হয়

আসুন, CSS Regions-এর একটি আসল ব্যবহারের উদাহরণ দেখা যাক। Adobe-তে ডেভেলপার হিসেবে কাজ করার পাশাপাশি আমি কল্পবিজ্ঞানও লিখি। আমি প্রায়ই Creative Commons লাইসেন্সের অধীনে আমার কাজ অনলাইনে প্রকাশ করি এবং যাতে এটি সর্বাধিক সংখ্যক ডিভাইস ও ব্রাউজারে কাজ করে, তার জন্য আমি প্রায়ই এই ধরনের অত্যন্ত সহজ ফর্ম্যাট ব্যবহার করি:

Unstyled Human Legacy Project Example
Unstyled Human Legacy Project-এর উদাহরণ

CSS অঞ্চল ব্যবহার করে, আমি এমন একটি অভিজ্ঞতা তৈরি করতে পেরেছি যা আরও বেশি দৃশ্যত আকর্ষণীয় এবং অনেক বেশি কার্যকরী কারণ এটি নেভিগেট করা সহজ এবং পড়তে আরও আরামদায়ক:

Human Legacy Project-এ অঞ্চল দেখানো হচ্ছে
অঞ্চল সহ হিউম্যান লিগ্যাসি প্রোজেক্ট।

ডেমো দেখানোর উদ্দেশ্যে, আমি এই প্রোটোটাইপে CSS অঞ্চল দেখানোর ক্ষমতা যোগ করেছি। নিচের স্ক্রিনশটে দেখানো হয়েছে যে কীভাবে অঞ্চলগুলি সাজানো হয়েছে যাতে সেগুলি কলামের মতো দেখায় যা একটি গ্রাফিক এবং কেন্দ্রে একটি পুল-কোটের চারপাশে মোড়ানো থাকে:

হিউম্যান লিগ্যাসি প্রোজেক্ট অঞ্চল দেখাচ্ছে
Human Legacy Project-এ অঞ্চল দেখানো হচ্ছে

আপনি এই প্রোটোটাইপ নিয়ে পরীক্ষা করতে (এবং সোর্স কোড দেখতে) এখানে পারবেন। নেভিগেট করতে তীরচিহ্ন ব্যবহার করুন এবং অঞ্চল দেখতে Esc কী প্রেস করুন। আগের প্রোটোটাইপও এখানে উপলভ্য।

নাম আছে এমন ফ্লো তৈরি করা

বিভিন্ন অঞ্চলে টেক্সটের ব্লক ফ্লো করার জন্য প্রয়োজনীয় CSS অত্যন্ত সহজ। নিচের স্নিপেটটি "কন্টেন্ট" আইডি সহ একটি ডিভ-এ "আর্টিকেল" নামের একটি ফ্লো অ্যাসাইন করে এবং "রিজিয়ন" ক্লাস সহ যেকোনও এলিমেন্টে একই "আর্টিকেল" নামের ফ্লো অ্যাসাইন করে। এর ফলে, "কন্টেন্ট" এলিমেন্টের মধ্যে থাকা টেক্সট অটোমেটিক "রিজিয়ন" ক্লাস সহ যেকোনও এলিমেন্টের মধ্যে দিয়ে ফ্লো করবে।

<!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, CSS-এর সাথে কাজ করার জন্য JavaScript API-কে সংজ্ঞায়িত করে। CSS অঞ্চলের সাথে সম্পর্কিত নতুন API-এর তালিকা নিচে দেওয়া হল:

  • document.webkitGetNamedFlows(): একটি ফাংশন যা ডকুমেন্টে উপলভ্য নামযুক্ত ফ্লোর সংগ্রহ রিটার্ন করে।
  • document.webkitGetNamedFlows().namedItem("article"): একটি ফাংশন যা নির্দিষ্ট নামযুক্ত ফ্লোতে একটি রেফারেন্স প্রদান করে। আর্গুমেন্টটি flow-into এবং from-from CSS প্রপার্টির ভ্যালু হিসেবে নির্দিষ্ট করা নামের সাথে সম্পর্কিত। উপরে কোড স্নিপেটে উল্লেখ করা নামযুক্ত ফ্লোর রেফারেন্স পেতে, আপনাকে "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" যদি অঞ্চলে ধারণ করার চেয়ে বেশি কন্টেন্ট থাকে
    • "ফিট" যদি কন্টেন্ট অঞ্চলের শেষ হওয়ার আগে থেমে যায়
    • কন্টেন্ট অঞ্চলে না পৌঁছালে "খালি"

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." এছাড়াও, এটি "combined-articles" নামে একটি তৃতীয় সিলেক্টরকে সংজ্ঞায়িত করে যার মধ্যে দুটি ফ্লো থাকবে। "combined-articles" সিলেক্টরের মধ্যে overflow-style প্রপার্টি অন্তর্ভুক্ত করার অর্থ হল, কন্টেন্ট অটোমেটিক 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"-এর টেক্সট মাঝখানের কলামে দেখানো হবে। ফলাফলটি দেখতে এইরকম হতে পারে:

পৃষ্ঠার টেমপ্লেটের উদাহরণ
পৃষ্ঠার টেমপ্লেটের উদাহরণ

মনে রাখবেন যে নিবন্ধের টেক্সট -- বাঁদিকের এবং ডানদিকের কলামের টেক্সট -- ইংরেজিতে এবং মাঝের টাইমলাইন জার্মান ভাষায় লেখা। এছাড়াও, কোনও জাভাস্ক্রিপ্ট কোডের প্রয়োজন ছাড়াই ডকুমেন্টটি অনুভূমিকভাবে পেজ করে। সবকিছুই CSS-এ সম্পূর্ণ ডিক্লেরেটিভভাবে করা হয়েছে।

CSS পৃষ্ঠা টেমপ্লেট এখনও একটি প্রস্তাব, তবে আমাদের কাছে একটি প্রোটোটাইপ আছে যা জাভাস্ক্রিপ্ট "শিম" (ওরফে পলিফিল) ব্যবহার করে যাতে আপনি এখন সেগুলি নিয়ে পরীক্ষা করতে পারেন।

সাধারণভাবে CSS অঞ্চল সম্পর্কে আরও জানতে, html.adobe.com-এ CSS অঞ্চল পৃষ্ঠা দেখুন।

CSS Exclusions

সত্যিকারের ম্যাগাজিনের মতো লেআউট পেতে, বিভিন্ন অঞ্চলে টেক্সট ফ্লো করতে পারাই যথেষ্ট নয়। খুব ভালো কোয়ালিটির এবং ভিজ্যুয়ালি আকর্ষণীয় ডেস্কটপ প্রকাশনার একটি গুরুত্বপূর্ণ উপাদান হল, অনিয়মিত গ্রাফিক্স এবং আকারের চারপাশে বা ভিতরে টেক্সট ফ্লো করার ক্ষমতা। CSS এক্সক্লুশন এই লেভেলের প্রোডাকশন কোয়ালিটি ওয়েবে নিয়ে আসছে।

নিচের স্ক্রিনশটটি CSS এক্সক্লুশন প্রোটোটাইপ থেকে নেওয়া হয়েছে এবং এতে দেখা যাচ্ছে যে টেক্সট ডাইনামিকভাবে এমন একটি পাথ বরাবর প্রবাহিত হচ্ছে যা একটি বড় পাথরের গঠনের কনট্যুরের সাথে মিলে যায়:

CSS এক্সক্লুশন অ্যাকশনে থাকার উদাহরণ
CSS এক্সক্লুশন কীভাবে কাজ করে তার উদাহরণ

পরবর্তী স্ক্রিনশটে এর বিপরীতটি দেখানো হয়েছে: অনিয়মিত আকারের বহুভুজের মধ্যে টেক্সট ফ্লো:

অনিয়মিত আকারের বহুভুজে টেক্সট ফ্লো করা
অনিয়মিত আকারের বহুভুজে টেক্সট ফ্লো করা

যেকোনও আকারের চারপাশে বা ভিতরে টেক্সট ফ্লো করার প্রথম ধাপ হল প্রয়োজনীয় অ্যালগরিদম ডেভেলপ ও অপ্টিমাইজ করা। Adobe বর্তমানে এমন ইমপ্লিমেন্টেশন নিয়ে কাজ করছে যা সরাসরি WebKit-এ কন্ট্রিবিউট করা হবে। এইসব অ্যালগরিদম অপ্টিমাইজ করা হয়ে গেলে, সেগুলি CSS এক্সক্লুশনের বাকি অংশের ভিত্তি হিসেবে কাজ করবে।

CSS এক্সক্লুশন সম্পর্কে আরও তথ্যের জন্য, html.adobe.com-এ CSS এক্সক্লুশন পৃষ্ঠা দেখুন এবং CSS এক্সক্লুশনের জন্য অন্তর্নিহিত প্রযুক্তিতে Adobe-এর কাজের আরও বিস্তারিত বিবরণের জন্য, হ্যান্স মুলারের ব্লগ পোস্ট দেখুন যার শিরোনাম হল Horizontal Box: Polygon Intersection for CSS Exclusions।

CSS অঞ্চল এবং CSS এক্সক্লুশনের অবস্থা (২০১২)

Google I/O 2011-এ Adobe Developer Pod-এ আমি প্রথমবার CSS Regions এবং CSS Exclusions সম্পর্কে সর্বজনীনভাবে কথা বলি। সেই সময় আমি আমাদের নিজস্ব কাস্টম প্রোটোটাইপ ব্রাউজারে ডেমো দেখাচ্ছিলাম। প্রতিক্রিয়া অত্যন্ত উৎসাহব্যঞ্জক ছিল, তবে দর্শকরা যখন জানতে পারলেন যে আমি যে কার্যকারিতা দেখাচ্ছি তার কোনওটিই এখনও কোনও প্রধান ব্রাউজারে উপলভ্য নয়, তখন তাদের মধ্যে হতাশার অনুভূতি স্পষ্ট ছিল।

আমি এই বছর (২০১২) আবার Google I/O-তে ছিলাম, এবার আমার সহকর্মী ভিনসেন্ট হার্ডি এবং Google-এর অ্যালেক্স ড্যানিলো-এর সাথে একজন উপস্থাপক হিসেবে (আপনি এখানে প্রেজেন্টেশনটি দেখতে পারেন)। মাত্র এক বছর পরে, CSS Regions স্পেসিফিকেশনের প্রায় ৮০% WebKit-এ প্রয়োগ করা হয়েছে এবং Google Chrome-এর সবচেয়ে সাম্প্রতিক ভার্সনে এটি আগে থেকেই আছে (মনে রাখবেন যে CSS Regions বর্তমানে chrome://flags-এর মাধ্যমে চালু করতে হবে)। Android-এর জন্য Chrome-এ CSS Regions-এর প্রাথমিক সহায়তাও এসে গেছে:

Android-এর জন্য Chrome-এ অঞ্চল
Android-এর জন্য Chrome-এ অঞ্চল

এছাড়াও, CSS অঞ্চল এবং CSS এক্সক্লুশন, দুটিই Internet Explorer 10 প্রিভিউতে প্রয়োগ করা হয়েছে এবং বর্তমানে Firefox-এর জন্য Mozilla-এর ২০১২ রোডম্যাপে রয়েছে। Safari-এর পরবর্তী মেজর ভার্সনে CSS Regions স্পেসিফিকেশনের বেশিরভাগ অংশ কাজ করা উচিত এবং পরবর্তী আপডেটগুলিতে বাকি অংশ অন্তর্ভুক্ত করা উচিত।

২০১১ সালের এপ্রিল মাসে W3C-তে আমাদের প্রাথমিক প্রস্তাবের পর থেকে CSS অঞ্চল এবং CSS এক্সক্লুশন নিয়ে আমরা যে অগ্রগতি করেছি তার একটি বিস্তারিত টাইমলাইন নিচে দেওয়া হল:

অঞ্চল ও এক্সক্লুশন প্রগ্রেস
অঞ্চল ও বাদ দেওয়ার প্রগ্রেস

উপসংহার

InDesign-এর মতো টুলের মাধ্যমে টেক্সট, ফন্ট এবং সাধারণভাবে ডেস্কটপ প্রকাশনার ক্ষেত্রে Adobe-এর প্রচুর অভিজ্ঞতা রয়েছে। যদিও টেক্সটের জন্য ওয়েব আগে থেকেই একটি শক্তিশালী প্ল্যাটফর্ম, আমরা টেক্সট প্রেজেন্টেশনকে আরও উন্নত করতে আমাদের জ্ঞান ও অভিজ্ঞতা ব্যবহার করতে চাই। CSS Regions এবং CSS Exclusions কন্টেন্টকে শব্দার্থগতভাবে স্ট্রাকচার্ড থাকতে দেয় এবং একই সাথে সত্যিকারের ম্যাগাজিনের মতো লেআউট এবং শেষ পর্যন্ত আরও অনেক বেশি অভিব্যক্তিপূর্ণ ওয়েব সক্ষম করে।