এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

Christian Cantrell

ভূমিকা

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

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

CSS অঞ্চল

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

Google Chrome-এ CSS অঞ্চল সক্রিয় করা হচ্ছে

ক্রোমের সংস্করণ 20 (সংস্করণ 20.0.1132.57, সঠিকভাবে) হিসাবে, CSS অঞ্চলগুলি chrome://flags ইন্টারফেসের মাধ্যমে সক্রিয় করা হয়েছে। CSS অঞ্চলগুলি সক্ষম করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

Chrome এ একটি নতুন ট্যাব বা উইন্ডো খুলুন।
অবস্থান বারে chrome://flags টাইপ করুন।
পৃষ্ঠায় খুঁজুন (নিয়ন্ত্রণ/কমান্ড + f) ব্যবহার করুন এবং "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য" বিভাগে অনুসন্ধান করুন।
Enable লিঙ্কে ক্লিক করুন।
নীচে রিলঞ্চ নাও বোতামে ক্লিক করুন।

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

একবার আপনি আপনার ব্রাউজারটি পুনরায় চালু করলে, আপনি CSS অঞ্চলগুলির সাথে পরীক্ষা শুরু করতে মুক্ত।

CSS অঞ্চলগুলির একটি ওভারভিউ

CSS অঞ্চলগুলি শব্দার্থগতভাবে চিহ্নিত-আপ পাঠ্যের একটি ব্লককে স্বয়ংক্রিয়ভাবে "বক্সে" (বর্তমানে উপাদান) প্রবাহিত করার অনুমতি দেয়। নীচের চিত্রটি পাঠ্য (প্রবাহ) এবং বাক্সগুলির পৃথকীকরণ প্রদর্শন করে (যে অঞ্চলগুলিতে পাঠ্যটি প্রবাহিত হয়):

বিষয়বস্তু সংজ্ঞায়িত অঞ্চলে প্রবাহিত হয়

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

আনস্টাইল করা মানব উত্তরাধিকার প্রকল্পের উদাহরণ

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

অঞ্চল দেখানো মানব উত্তরাধিকার প্রকল্প — অঞ্চলগুলির সাথে মানব উত্তরাধিকার প্রকল্প।

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

আপনি এখানে এই প্রোটোটাইপের সাথে পরীক্ষা করতে পারেন (পাশাপাশি সোর্স কোডটি দেখতে পারেন)। নেভিগেট করতে আপনার তীর কীগুলি ব্যবহার করুন এবং অঞ্চলগুলি প্রকাশ করতে 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>

ফলাফল এই মত দেখায়:

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

CSS অবজেক্ট মডেল

দ্রষ্টব্য: সংক্ষিপ্তভাবে বলতে গেলে, এই বিভাগে শুধুমাত্র একটি বিক্রেতা উপসর্গ ( webkit ) ব্যবহার করা হয়, তবে আপনাকে এমন কোড লিখতে হবে যা এই বৈশিষ্ট্যটিকে সমর্থন করে এমন ব্রাউজার জুড়ে কাজ করে!

CSS অবজেক্ট মডেল , বা CSSOM, CSS-এর সাথে কাজ করার জন্য JavaScript API-কে সংজ্ঞায়িত করে। নীচে CSS অঞ্চলগুলির সাথে সম্পর্কিত নতুন APIগুলির একটি তালিকা রয়েছে:

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

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 পেজ টেমপ্লেট নামে একটি প্রস্তাব নিয়ে কাজ করছি যা পেজিং আচরণকে সম্পূর্ণরূপে ঘোষণামূলকভাবে সংজ্ঞায়িত করার অনুমতি দেয়।

চলুন CSS পৃষ্ঠা টেমপ্লেটগুলির জন্য একটি সাধারণ ব্যবহারের ক্ষেত্রে একবার দেখে নেওয়া যাক। নীচের কোড স্নিপেট দুটি নামযুক্ত ফ্লো তৈরি করতে CSS-এর ব্যবহার দেখায়: "আর্টিকেল-ফ্লো" এবং "টাইমলাইন-ফ্লো।" অতিরিক্তভাবে এটি "সম্মিলিত-নিবন্ধ" নামে একটি তৃতীয় নির্বাচককে সংজ্ঞায়িত করে যার ভিতরে দুটি প্রবাহ থাকবে। "সম্মিলিত-নিবন্ধ" নির্বাচকের ভিতরে 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" বাক্য গঠন ব্যবহার করে সংজ্ঞায়িত করা হয়। উপরের কোড স্নিপেটে, আমরা তিনটি স্লট সংজ্ঞায়িত করি, প্রতিটি একটি কলামের সাথে সম্পর্কিত। "নিবন্ধ-প্রবাহ" থেকে পাঠ্যটি বাম এবং ডানদিকের কলামগুলির মধ্য দিয়ে প্রবাহিত হবে এবং "টাইমলাইন-প্রবাহ" থেকে পাঠ্যটি কলামটিকে মাঝখানে স্থাপন করবে। ফলাফল এই মত কিছু দেখতে পারে:

মনে রাখবেন যে নিবন্ধের পাঠ -- বাম এবং ডান হাতের কলামের পাঠ -- ইংরেজি এবং কেন্দ্রের টাইমলাইন হল জার্মান৷ উপরন্তু, কোনো জাভাস্ক্রিপ্ট কোডের প্রয়োজন ছাড়াই নথির পৃষ্ঠাগুলি অনুভূমিকভাবে। সিএসএস-এ সবকিছু সম্পূর্ণরূপে ঘোষণামূলকভাবে করা হয়েছিল।

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

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

CSS এক্সক্লুশন

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

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

বিপরীতটি পরবর্তী স্ক্রিনশটে চিত্রিত করা হয়েছে: অনিয়মিত আকারের বহুভুজের ভিতরে প্রবাহিত পাঠ্য:

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

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

CSS অঞ্চল এবং CSS বর্জনের বর্তমান অবস্থা

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

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

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

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

উপসংহার

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