প্রকাশিত: ৩০ অক্টোবর, ২০২৪
Chrome 131 থেকে আপনি পৃষ্ঠাগুলি মুদ্রণের সময় মার্জিনে কন্টেন্ট যোগ করতে CSS ব্যবহার করতে পারেন। এই পোস্টে পেজড মিডিয়ার জন্য পৃষ্ঠা মডেল এবং আপনার ওয়েবপৃষ্ঠাগুলি থেকে মুদ্রণ আউটপুট উন্নত করতে এই বৈশিষ্ট্যটি কীভাবে ব্যবহার করবেন তা ব্যাখ্যা করা হয়েছে।
CSS-এ পেজড মিডিয়া, CSS পেজড মিডিয়া মডিউল এবং পেজড মিডিয়ার জন্য CSS জেনারেটেড কন্টেন্ট সম্পর্কিত স্পেসিফিকেশন অন্তর্ভুক্ত রয়েছে। এগুলি এমন বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করে যা শুধুমাত্র একটি পৃষ্ঠা মুদ্রিত হওয়ার সময় ব্যবহৃত হয় (পিডিএফ সহ)। এমন ব্যবহারকারী-এজেন্ট রয়েছে যা এই CSS সমর্থন করে এবং আপনাকে HTML এবং CSS থেকে বই এবং অন্যান্য মুদ্রিত উপাদান তৈরি করতে দেয়। যাইহোক, ওয়েব ব্রাউজারগুলিতে এই কার্যকারিতাটি কখনই ভালভাবে সমর্থিত হয়নি, যদিও আমাদের প্রায়শই অ্যাপ্লিকেশন থেকে PDF মুদ্রণ বা তৈরি করতে হয়।
ক্রোম এবং ফায়ারফক্স @page at-rule সমর্থন করে। এই নিয়মটি আপনাকে যে পৃষ্ঠায় মুদ্রণ করছেন তার আকার এবং কন্টেন্টের চারপাশের মার্জিনের আকার নির্ধারণ করতে দেয়। ক্রোম ১৩১ থেকে, আপনি প্রাসঙ্গিক মার্জিন at-rule লক্ষ্য করে মার্জিনে কন্টেন্ট যোগ করতে জেনারেটেড কন্টেন্ট ব্যবহার করতে পারেন।
পৃষ্ঠা মডেল
পেজড মিডিয়াতে ব্যবহৃত পেজ মডেলটি একটি পেজ বক্সকে সংজ্ঞায়িত করে, এটি আপনার কাগজের শীট। পেজ বক্সের ভিতরে একটি পেজ মার্জিন , একটি পেজ বর্ডার , পেজ প্যাডিং এবং অবশেষে আপনার কন্টেন্ট প্রদর্শিত হয় এমন পেজ এরিয়া থাকে। যখন কন্টেন্ট প্রিন্ট করা হয় তখন এটি যতটা প্রয়োজন ততটা পৃষ্ঠায় বিভক্ত করা হয় যাতে এটি ধারণ করা যায়।
এরপর পৃষ্ঠার মার্জিনটি ১৬টি বাক্সে বিভক্ত করা হয়, প্রতিটি বাক্সের একটি সংশ্লিষ্ট at-rule থাকে।
-
@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 ব্যবহার করে একটি flex লেআউটে বাক্সের মতোই আচরণ করে, তাই এগুলি স্থান পূরণ করার জন্য প্রসারিত হয়, কিন্তু যদি আপনি একটিতে লেখার একটি দীর্ঘ স্ট্রিং রাখেন এবং অন্যটিতে কিছুই না রাখেন, তাহলে লেখাটি লেখাটি মোড়ানোর পরিবর্তে বৃদ্ধি পাবে।
মার্জিন বাক্সে কন্টেন্ট যোগ করুন
মার্জিন বাক্সে কন্টেন্ট যোগ করার জন্য CSS জেনারেটেড কন্টেন্ট ব্যবহার করুন, ঠিক যেমন আপনি ::before এবং ::after সিউডো-এলিমেন্টের ক্ষেত্রে করবেন। এই ক্ষেত্রে, আপনি যে বাক্সটি লক্ষ্য করতে চান তার সাথে সম্পর্কিত at-rule ব্যবহার করুন। নিম্নলিখিত CSS নীচের বাম মার্জিন বাক্সে বা ডান-হাতের পৃষ্ঠাগুলিতে "My book" লেখাটি যোগ করে। এটি সেই লেখাটিকে স্টাইলও করে।
@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 বৈশিষ্ট্যটি আপনাকে আপনার HTML থেকে একটি মান সেট করতে দেয় যা পরে তৈরি সামগ্রীতে ব্যবহার করা হয়। নিম্নলিখিত 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;
}