মুদ্রণের জন্য ডকুমেন্ট ফরম্যাট করতে CSS ব্যবহার করা

মুদ্রণের জন্য ডকুমেন্ট ফরম্যাট করতে CSS ব্যবহার করা

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





উদ্বেগ বিচ্ছেদ

CSS এর একটি প্রধান সুবিধা হল উপস্থাপনা থেকে বিষয়বস্তু আলাদা করা। সহজ শর্তে, এর অর্থ খুব পুরানো ধাঁচের স্টাইলিস্টিক মার্কআপের পরিবর্তে যেমন:



Heading

আমরা শব্দার্থিক মার্কআপ ব্যবহার করি:






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

h1 { font-weight: normal; }

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



একটি প্রিন্ট স্টাইল শীট সহ

স্ক্রিন স্টাইল শীট অন্তর্ভুক্ত করার অনুরূপ পদ্ধতিতে, আমরা মুদ্রণের জন্য একটি স্টাইল শীট নির্দিষ্ট করতে পারি। একটি স্ক্রিন স্টাইল শীট সাধারণত এভাবে অন্তর্ভুক্ত করা হয়:


যাইহোক, একটি অতিরিক্ত বৈশিষ্ট্য, অর্ধেক , ডকুমেন্ট রেন্ডার করা হয়েছে সেই প্রেক্ষাপটের উপর ভিত্তি করে টার্গেটিং করার অনুমতি দেয়। ডিফল্টরূপে, পূর্ববর্তী উপাদান সমতুল্য:




এর মানে হল যে স্টাইলশীটটি ডকুমেন্টে যে কোনও মাধ্যমের জন্য প্রযোজ্য হবে। তবে, মিডিয়া অ্যাট্রিবিউট প্রিন্ট এবং স্ক্রিনের মানও নিতে পারে:


এই উদাহরণে, print.css স্টাইলশীট শুধুমাত্র তখনই ব্যবহার করা হবে যখন ডকুমেন্ট প্রিন্ট হয়ে যাবে। এটি একটি খুব দরকারী প্রক্রিয়া। আমরা একটি স্টাইলশীটে সমস্ত সাধারণ স্টাইলিং (সম্ভবত ফন্ট ফ্যামিলি বা লাইন স্পেসিং) সংগ্রহ করতে পারি যা সমস্ত মিডিয়াতে প্রযোজ্য এবং পৃথক স্টাইলশীটে মিডিয়া-নির্দিষ্ট ফর্ম্যাটিং। আবার, এটি উদ্বেগ বিচ্ছেদের আরেকটি ব্যবহার।



কিছু উদাহরণ শৈলী ঘোষণা

একটি পরিষ্কার পটভূমি

আপনি প্রায় অবশ্যই একটি রঙিন পটভূমি বা একটি পটভূমি চিত্র ছাপিয়ে কালি অপচয় করতে চান না। আপনার নথিতে সেট করা এই মানগুলির জন্য কোনও ডিফল্ট রিসেট করে শুরু করুন:

body {
background: white;
color: black;
}

আপনি যেকোনো ব্যাকগ্রাউন্ড ইমেজকে প্রিন্ট করা থেকে বিরত রাখতে চাইতে পারেন — এগুলো আলংকারিক হওয়া উচিত এবং তাই আপনার কন্টেন্টের প্রয়োজনীয় অংশ নয়:

* {
background-image: none !important;
}

সম্পর্কিত: কিভাবে CSS এ ব্যাকগ্রাউন্ড ইমেজ সেট করবেন

gopro নায়ক 4 আনুষাঙ্গিক থাকতে হবে

মার্জিন নিয়ন্ত্রণ করা

মুদ্রণের বিষয়ে বিবেচনা করার আরেকটি স্পষ্ট বিষয় হল পৃষ্ঠা মার্জিন। যদিও CSS মার্জিন আকার নির্ধারণের একটি মাধ্যম প্রদান করে, আপনার মনে রাখা উচিত যে আপনার ব্রাউজার এবং প্রিন্টার মার্জিন সেটিংসকেও প্রভাবিত করতে পারে।

উদাহরণস্বরূপ, ক্রোমের প্রিন্ট ডায়ালগে, একটি মার্জিন সেটিং রয়েছে যার মান রয়েছে কোন এবং কাস্টম যা CSS এর মাধ্যমে নির্দিষ্ট কিছুকে ওভাররাইড করবে:

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

@page {
margin: 2cm;
}

CSS- এর আরও অত্যাধুনিক প্রিন্ট লেআউটের ক্ষমতা রয়েছে, যেমন পৃষ্ঠাটি বিজোড়-সংখ্যাযুক্ত (ডান), এমনকি-সংখ্যাযুক্ত (বাম) বা কভার পৃষ্ঠা।

আমি একটি আইফোন খুঁজে পেয়েছি কিভাবে আমি এটি আনলক করব

দুর্ভাগ্যক্রমে, এটি দুর্বলভাবে সমর্থিত - বিশেষত কভার পেজ বিকল্প - তবে এটি একটি ন্যূনতম পরিমাণে ব্যবহার করা যেতে পারে। নিম্নোক্ত শৈলীগুলি পৃষ্ঠার তুলনায় সামান্য বড় নীচের মার্জিন এবং মেরুদণ্ডের চেয়ে বাইরের পৃষ্ঠার প্রান্তে সামান্য বড় মার্জিন সহ পৃষ্ঠা তৈরি করে:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

অপ্রাসঙ্গিক বিষয়বস্তু লুকানো

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

#contents, div.ad { display: none; }

হাইপারলিঙ্কগুলি স্পষ্টত মুদ্রিত উপাদানের ক্ষেত্রে প্রাসঙ্গিক নয়, তাই আপনি সম্ভবত এমন কোনও স্টাইল মুছে ফেলতে চান যা তাদের চারপাশের পাঠ্য থেকে আলাদা করে:

a { text-decoration: none; color: inherit; }

যাইহোক, আপনি এখনও পাঠকদের মূল ইউআরএলগুলিতে অ্যাক্সেস পেতে চান এবং লিঙ্কযুক্ত পাঠ্যের পরে স্বয়ংক্রিয়ভাবে তাদের সন্নিবেশ করা একটি সহজ সমাধান:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

এই CSS নিম্নলিখিত ফলাফল দেয়:

একটি [href]: পরে এর পরে অবস্থানকে বিশেষভাবে লক্ষ্য করে ( : পরে ) প্রতিটি লিঙ্ক উপাদান ( প্রতি ) এর আসলে একটি URL আছে ( [href] )। দ্য বিষয়বস্তু এখানে ঘোষণাপত্র এর মান সন্নিবেশ করায় href বন্ধনীগুলির মধ্যে বৈশিষ্ট্য। মনে রাখবেন যে উত্পাদিত সামগ্রীর প্রদর্শন নিয়ন্ত্রণের জন্য অন্যান্য শৈলী নিয়ম প্রয়োগ করা যেতে পারে।

পৃষ্ঠা বিরতিগুলি পরিচালনা করা

বিচ্ছিন্ন বিষয়বস্তু ছেড়ে পৃষ্ঠা বিরতি এড়ানোর জন্য, অথবা মাঝখানে বিশ্রীভাবে এটি ভাঙ্গার জন্য, পৃষ্ঠা-বিরতির বৈশিষ্ট্যগুলি ব্যবহার করুন: পৃষ্ঠা-বিরতি-আগে , পৃষ্ঠা-বিরতি-পরে এবং পৃষ্ঠা-বিরতি-ভিতরে । উদাহরণ স্বরূপ:

table { page-break-inside: avoid; }

এটি টেবিলগুলিকে একাধিক পৃষ্ঠার বিস্তার থেকে রক্ষা করতে সাহায্য করবে, যদি না একটি পৃষ্ঠার চেয়ে লম্বা হয়। একইভাবে:

h1, h2 { page-break-before: always; }

এর মানে হল যে এই ধরনের শিরোনাম সবসময় একটি নতুন পৃষ্ঠা শুরু করে। আপনি যদি অবিলম্বে আপনার পৃষ্ঠার h1 কে h2 দিয়ে অনুসরণ করেন তবে এটি সমস্যার কারণ হতে পারে, যদিও, h1 একটি পৃষ্ঠায় নিজেই শেষ হয়ে যাবে। এটি এড়ানোর জন্য, কেবলমাত্র এমন একটি নির্বাচক ব্যবহার করে পৃষ্ঠা বিরতি বাতিল করুন যা নির্দিষ্ট উদাহরণকে লক্ষ্য করে, উদাহরণস্বরূপ:

অ্যাপ স্টোরের অবস্থান কীভাবে পরিবর্তন করবেন
h1 + h2 { page-break-before: avoid; }

প্রিন্ট স্টাইল দেখা

সব ক্ষেত্রে, আপনার ব্রাউজার এবং অপারেটিং সিস্টেমের একটি প্রিন্ট প্রিভিউ বৈশিষ্ট্য প্রদান করা উচিত, প্রায়ই স্ট্যান্ডার্ড প্রিন্ট ডায়ালগের অংশ হিসাবে।

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

প্রদর্শিত নতুন প্যানেল থেকে, নির্বাচন করুন তালিকা , তারপর আরো সরঞ্জাম , অনুসরণ করে রেন্ডারিং :

তারপর নিচে স্ক্রোল করুন সিএসএস মিডিয়া টাইপ অনুকরণ করুন বিন্যাস. ড্রপডাউন আপনাকে আপনার ডকুমেন্টের প্রিন্ট এবং স্ক্রিন ভিউয়ের মধ্যে টগল করতে দেয়:

প্রিন্ট স্টাইলশীট অনুকরণ করার সময়, মান স্টাইল ব্রাউজার লাইভ স্টাইলের নিয়মগুলি পরিদর্শন এবং সংশোধন করার জন্য উপলব্ধ। মনে রাখবেন যে স্ক্রিনে প্রিন্ট আউটপুট অনুকরণ করা এখনও 100% সঠিক নয়। ব্রাউজার কাগজের আকার সম্পর্কে কিছুই জানে না - পৃষ্ঠা নিয়ম অনুকরণ করা যাবে না।

একটি পিডিএফ মুদ্রণ

আধুনিক অপারেটিং সিস্টেমের একটি সহজ বৈশিষ্ট্য হল পিডিএফ ফাইলে প্রিন্ট করার ক্ষমতা। প্রকৃতপক্ষে, আপনি যা কিছু মুদ্রণ করতে পারেন, তা পরিবর্তে, একটি পিডিএফ ফাইলে পাঠানো যেতে পারে — কোন পিডিএফ ফাইল একটি মুদ্রিত নথির প্রতিনিধিত্ব করে বলে মনে করা হয় না।

এটি একটি প্রিন্ট স্টাইলশীটের সাথে এইচটিএমএল তৈরি করে, একটি উচ্চমানের নথি তৈরির একটি চমৎকার মাধ্যম যা একটি সংযুক্তি হিসাবে পাঠানো যায়, সেইসাথে মুদ্রিতও।

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

শেয়ার করুন শেয়ার করুন টুইট ইমেইল কিভাবে মাইক্রোসফট এজ দিয়ে পিডিএফে ওয়েব পেজ প্রিন্ট করবেন

আপনি কি কখনও এমন একটি আকর্ষণীয় নিবন্ধ পেয়েছেন যা আপনি পরে সংরক্ষণ করতে চেয়েছিলেন? ঠিক আছে, আপনি তিনটি সহজ ধাপে এজ দিয়ে PDF হিসাবে সংরক্ষণ করতে পারেন।

পরবর্তী পড়ুন সম্পর্কিত বিষয়
  • প্রোগ্রামিং
  • মুদ্রণ
  • সিএসএস
লেখক সম্পর্কে ববি জ্যাক(58 নিবন্ধ প্রকাশিত)

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

ববি জ্যাক থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন