প্রকাশিত: 30 অক্টোবর, 2024
Chrome 131 থেকে আপনি পৃষ্ঠাগুলির মার্জিনে সামগ্রী যোগ করতে CSS ব্যবহার করতে পারেন যখন সেগুলি প্রিন্ট করা হয়৷ এই পোস্টটি পৃষ্ঠাযুক্ত মিডিয়ার জন্য পৃষ্ঠা মডেল এবং আপনার ওয়েবপৃষ্ঠাগুলি থেকে মুদ্রণ আউটপুট উন্নত করতে এই বৈশিষ্ট্যটি কীভাবে ব্যবহার করবেন তা ব্যাখ্যা করে।
CSS-এ পেজড মিডিয়া, CSS পেজড মিডিয়া মডিউল এবং পেজড মিডিয়ার জন্য CSS জেনারেটেড কন্টেন্টের সাথে সম্পর্কিত বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করে। তারা এমন বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে যা শুধুমাত্র একটি পৃষ্ঠা মুদ্রিত হলেই ব্যবহৃত হয় (পিডিএফ সহ)। এমন ব্যবহারকারী-এজেন্ট রয়েছে যারা এই CSS সমর্থন করে এবং আপনাকে HTML এবং CSS থেকে বই এবং অন্যান্য মুদ্রিত উপাদান তৈরি করতে দেয়। যাইহোক, এই কার্যকারিতাটি কখনই ওয়েব ব্রাউজারগুলিতে ভালভাবে সমর্থিত হয়নি, যদিও আমাদের প্রায়শই অ্যাপ্লিকেশনগুলি থেকে PDF মুদ্রণ বা তৈরি করতে হয়।
Chrome এবং Firefox @page at-rule সমর্থন করে। এই নিয়মটি আপনাকে আপনি যে পৃষ্ঠায় মুদ্রণ করছেন তার আকার এবং বিষয়বস্তুর চারপাশে মার্জিনের আকার নির্ধারণ করতে দেয়। Chrome 131 থেকে, আপনি প্রাসঙ্গিক মার্জিন অ্যাট-রুলকে লক্ষ্য করে মার্জিনে বিষয়বস্তু যোগ করতে জেনারেট করা সামগ্রী ব্যবহার করতে পারেন।
পৃষ্ঠার মডেল
পেজড মিডিয়াতে ব্যবহৃত পৃষ্ঠা মডেল একটি পৃষ্ঠা বাক্স সংজ্ঞায়িত করে, এটি আপনার কাগজের শীট। পৃষ্ঠা বাক্সের ভিতরে একটি পৃষ্ঠা মার্জিন , একটি পৃষ্ঠার সীমানা , পৃষ্ঠা প্যাডিং এবং অবশেষে পৃষ্ঠার এলাকা যেখানে আপনার সামগ্রী প্রদর্শিত হয়৷ যখন বিষয়বস্তু মুদ্রিত হয় তখন এটিকে ধারণ করার জন্য যতগুলি প্রয়োজন ততগুলি পৃষ্ঠায় বিভক্ত করা হয়।
তারপর পৃষ্ঠা মার্জিনটি 16টি বাক্সে বিভক্ত করা হয়, যার প্রতিটিতে একটি সংশ্লিষ্ট এট-রুল থাকে।
-
@top-left-corner -
@top-left -
@top-center -
@top-right -
@top-right-corner -
@left-top -
@left-middle -
@left-bottom -
@right-top -
@right-middle -
@right-bottom -
@bottom-left-corner -
@bottom-left -
@bottom-center -
@bottom-right -
@bottom-right-corner
মার্জিন বক্স সাইজিং
উপরের এবং নীচের বাক্সগুলির উচ্চতা এবং বাম এবং ডান পাশের বাক্সগুলির প্রস্থ @page ব্যবহার করে মার্জিন আকার সেট দ্বারা সংজ্ঞায়িত করা হয়। তাই কোণার বাক্সগুলির একটি নির্দিষ্ট আকার রয়েছে যা সেই মার্জিনের ছেদ দ্বারা তৈরি করা হয়েছে। প্রতিটি কোণার মধ্যে তিনটি বাক্স যদিও নমনীয়। তারা flex: auto ব্যবহার করে একটি ফ্লেক্স লেআউটে বক্সের মতো আচরণ করে, তাই তারা স্থান পূরণ করতে প্রসারিত করে, কিন্তু আপনি যদি একটিতে একটি দীর্ঘ টেক্সট রাখেন এবং অন্যটিতে কিছুই না রাখেন, তাহলে টেক্সট সহ একটি বাড়বে বরং টেক্সট মোড়ানো.
মার্জিন বাক্সে বিষয়বস্তু যোগ করুন
মার্জিন বাক্সে বিষয়বস্তু যোগ করতে CSS তৈরি করা সামগ্রী ব্যবহার করুন, ঠিক যেমন আপনি ::before এবং ::after pseudo-elements এর সাথে করবেন। এই ক্ষেত্রে, আপনি যে বক্স টার্গেট করতে চান তার সাথে সম্পর্কিত at-rule ব্যবহার করুন। নীচের CSS নীচে বাম মার্জিন বাক্সে বা ডানদিকের পৃষ্ঠাগুলিতে "আমার বই" পাঠ্য যোগ করে। এটি সেই পাঠ্যকেও স্টাইল করে।
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
পাঠ্যের স্ট্রিংগুলির পাশাপাশি, আপনি মার্জিনে পৃষ্ঠা কাউন্টার যোগ করতে পারেন। পূর্বনির্ধারিত page কাউন্টারে বর্তমান পৃষ্ঠা রয়েছে। নিম্নলিখিত CSS এটিকে ডান-হাতের পৃষ্ঠাগুলির নীচে-ডানে এবং বাম-হাতের পৃষ্ঠাগুলির নীচে-বামে যোগ করে।
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
এছাড়াও একটি pages কাউন্টার রয়েছে যেখানে সর্বদা মোট পৃষ্ঠার সংখ্যা থাকে।
পৃষ্ঠা মার্জিন ব্যবহার করার সময় যে বিষয়গুলো খেয়াল রাখতে হবে
একটি ব্রাউজার থেকে মুদ্রণ করা হলে, ব্রাউজারটি স্বয়ংক্রিয়ভাবে কিছু পৃষ্ঠা মার্জিন সামগ্রী যোগ করবে যদি এটি প্রদর্শনের জন্য জায়গা থাকে। আপনি সামগ্রী যোগ করলেও এটি এটি করবে। এই স্বয়ংক্রিয়ভাবে তৈরি শিরোনাম এবং ফুটার প্রিন্ট ডায়ালগে বন্ধ করা যেতে পারে।
আপনি যদি একটি পৃষ্ঠায় মার্জিন 0 তে সেট করেন বা একটি মান এত ছোট করেন যে ব্রাউজার শিরোনাম এবং পাদচরণগুলির জন্য কোন স্থান নেই, সেগুলি প্রদর্শিত হবে না।
Chromium-এ একটি ডিফল্ট পৃষ্ঠা বিন্যাসের ধারণার কারণে, যদি আপনার মুদ্রিত নথির প্রথম পৃষ্ঠায় স্বয়ংক্রিয় বিষয়বস্তুর জন্য কোনো স্থান না থাকে, তাহলে এটি ব্রাউজার সামগ্রীকে পরবর্তী পৃষ্ঠাগুলিতে প্রদর্শিত হতে বাধা দেবে, এমনকি যদি তাদের কাছে স্থান থাকে।
পৃষ্ঠাযুক্ত মিডিয়ার জন্য ভবিষ্যতের সম্ভাবনা
পৃষ্ঠাযুক্ত মিডিয়া স্পেসিফিকেশনের মধ্যে আরও বেশ কিছু বৈশিষ্ট্য রয়েছে, যা CSS এর সাথে প্রিন্টের জন্য ডিজাইন করা নিবন্ধে বর্ণিত হয়েছে। নিচের যেকোনও ফিচারের জন্য আপনার যদি ব্যবহার কেস থাকে, তাহলে লিঙ্ক করা বাগগুলিতে যোগ করুন।
স্ট্রিং সেট করুন
বই প্রায়ই বর্তমান অধ্যায়ের শিরোনাম মার্জিনে প্রিন্ট করে। এই শিরোনামটি আপনার CSS-এ হার্ডকোড করা যাবে না কারণ আপনি বইয়ের মধ্য দিয়ে যাওয়ার সাথে সাথে এটি পরিবর্তিত হয়। string-set প্রপার্টি আপনাকে আপনার এইচটিএমএল থেকে একটি মান সেট করতে দেয় তারপর জেনারেট করা সামগ্রীতে ব্যবহার করতে। নিম্নলিখিত CSS অনুমান করে যে অধ্যায়ের শিরোনামগুলি একটি <h1> হিসাবে চিহ্নিত করা হয়েছে। এটি প্রতিটি <h1> এর বিষয়বস্তু নেয় এবং ডান-হাতের পৃষ্ঠাগুলিতে উপরের-ডান মার্জিনে এটি ব্যবহার করে। যখন এটি পরবর্তী <h1> এ পৌঁছায় তখন সেই পয়েন্টের পরে মার্জিনের জন্য মান আপডেট করা হয়।
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
string-set এবং string() এর জন্য ক্রোমিয়াম বাগ ।
ক্রস রেফারেন্স
একবার একটি নথি মুদ্রিত হলে, অন্যান্য পৃষ্ঠাগুলির রেফারেন্স সাধারণত পৃষ্ঠা নম্বর ব্যবহার করে নির্দেশিত হয় যেখানে রেফারেন্স পাওয়া যেতে পারে। এই ক্রস-রেফারেন্স target-counter ব্যবহার করে তৈরি করা যেতে পারে। একটি লিঙ্কে প্রয়োগ করা হলে, লিঙ্কটি ওয়েবে রেফারেন্সে যেতে কাজ করে, যখন প্রিন্ট করা হয় তখন পৃষ্ঠা নম্বর দেখানো হয়।
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
ক্রস-রেফারেন্সের জন্য ক্রোমিয়াম বাগ ।
পাদটীকা
পাদটীকাগুলিও পৃষ্ঠাযুক্ত মিডিয়া স্পেসিফিকেশনগুলির একটি বৈশিষ্ট্য। HTML-এ, পাঠ্য সনাক্ত করতে একটি ক্লাস ব্যবহার করুন যা একটি ফুটনোট হওয়া উচিত, উদাহরণস্বরূপ:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
তারপর এই লেখাটিকে ফুটনোটে পরিণত করতে float এর footnote মান ব্যবহার করুন। নথিটি মুদ্রিত এবং ফুটনোট হিসাবে দেখানো হলে এটি অনুচ্ছেদ থেকে সরানো হবে।
.fn {
float: footnote;
}