যুগে যুগে 2005 সালের নভেম্বরে, আলিস্টাপার্ট ডট কম কীভাবে তারা এইচটিএমএল এবং সিএসএস ব্যতীত আর কিছু ব্যবহার করে একটি বই প্রকাশ করেছিল তা নিয়ে একটি নিবন্ধ প্রকাশ করেছিল। দেখুন: http://alistapart.com/article/boom
এই নিবন্ধটির একটি অংশ এখানে দেওয়া হয়েছে:
অবিচ্ছিন্ন মিডিয়া (থিঙ্ক স্ক্রোলবার) এর বিপরীতে সিএসএস 2 এর পেজযুক্ত মিডিয়া (চিন্তার কাগজগুলির পত্রক) ধারণা রয়েছে not স্টাইল শিটগুলি পৃষ্ঠাগুলির আকার এবং তাদের মার্জিন সেট করতে পারে। পৃষ্ঠাগুলি টেমপ্লেটগুলিকে নাম দেওয়া যেতে পারে এবং উপাদানগুলি কোনও পৃষ্ঠায় নাম প্রকাশ করতে চাইলে তা নাম প্রকাশ করতে পারে। এছাড়াও, উত্স নথির উপাদানগুলি পৃষ্ঠা বিরতিতে বাধ্য করতে পারে। আমরা যে স্টাইল শীটটি ব্যবহার করেছি তার একটি স্নিপেট এখানে দেওয়া হয়েছে:
@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
মার্কিন-ভিত্তিক প্রকাশক থাকায় আমাদের পৃষ্ঠার আকার ইঞ্চি দেওয়া হয়েছিল। আমরা, ইউরোপীয় হয়ে, মেট্রিক পরিমাপের সাথে চালিয়ে যাই। সিএসএস উভয়কেই গ্রহণ করে।
পৃষ্ঠার আকার এবং মার্জিন সেট আপ করার পরে, আমাদের সঠিক জায়গাগুলিতে পৃষ্ঠা বিরতি রয়েছে তা নিশ্চিত করা দরকার। নিম্নলিখিত অংশগুলি অধ্যায় এবং পরিশিষ্টগুলির পরে পৃষ্ঠা বিরতি কীভাবে উত্পন্ন হয় তা দেখায়:
div.chapter, div.appendix {
page-break-after: always;
}
এছাড়াও, আমরা নামযুক্ত পৃষ্ঠাগুলি ঘোষণা করতে CSS2 ব্যবহার করেছি:
div.titlepage {
page: blank;
}
অর্থাৎ শিরোনাম পৃষ্ঠাটি "ফাঁকা" নামযুক্ত পৃষ্ঠাগুলিতে মুদ্রিত করতে হবে। সিএসএস 2 নামযুক্ত পৃষ্ঠাগুলির ধারণাকে বর্ণনা করেছে, তবে শিরোনাম এবং পাদচরণগুলি উপলব্ধ হলে তাদের মানটি তখনই স্পষ্ট হয়।
যাই হোক ...
যেহেতু আপনি A4 মুদ্রণ করতে চান, আপনার অবশ্যই অবশ্যই বিভিন্ন মাত্রার প্রয়োজন:
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
নিবন্ধটি পৃষ্ঠা-ব্রেকগুলি সেট করা ইত্যাদির মতো জিনিসগুলিতে ডুব দেয় যাতে আপনি এটি পুরোপুরি পড়তে চাইতে পারেন।
আপনার ক্ষেত্রে, কৌশলটি হ'ল প্রথমে প্রিন্ট সিএসএস তৈরি করা। বেশিরভাগ আধুনিক ব্রাউজারগুলি জুমিং সমর্থন করে এবং ইতোমধ্যে মুদ্রণ সিএসএসের উপর ভিত্তি করে কোনও ওয়েবসাইট প্রদর্শন করতে সক্ষম হবে।
এখন, আপনি ওয়েব প্রদর্শনকে কিছুটা আলাদা দেখতে এবং বেশিরভাগ ব্রাউজারগুলিতে ফিট করার জন্য পুরো নকশাটি মানিয়ে নিতে চাই (পুরানো, ২০০৫ পূর্ববর্তীগুলি সহ)। তার জন্য, আপনাকে একটি ওয়েব সিএসএস ফাইল তৈরি করতে হবে বা আপনার মুদ্রণ সিএসএসের কিছু অংশ ওভাররাইড করতে হবে। ওয়েব প্রদর্শনের জন্য সিএসএস তৈরি করার সময় মনে রাখবেন যে কোনও ব্রাউজারের যে কোনও আকার থাকতে পারে (মনে করুন: "মোবাইল" পর্যন্ত "বড় স্ক্রিন টিভিগুলি")। অর্থ: ওয়েব সিএসএসের জন্য আপনার পৃষ্ঠা-প্রস্থ এবং চিত্র-প্রস্থকে যতটা সম্ভব ডিসপ্লে ডিভাইস এবং ওয়েব-ব্রাউজিং ক্লায়েন্টকে যথাসম্ভব সমর্থন করতে একটি ভেরিয়েবল প্রস্থ (%) ব্যবহার করে সেরা সেট করা হয়েছে।
সম্পাদনা (26-02-2015)
আজ, আমি স্ম্যামিং ম্যাগাজিনে আরও একটি সাম্প্রতিক নিবন্ধে হোঁচট খেয়েছি যা এইচটিএমএল এবং সিএসএসের সাথে মুদ্রণের জন্য ডিজাইনিংয়ের ক্ষেত্রেও ডাইভ করে ... ঠিক তেমন ক্ষেত্রে আপনি যদি অন্য-টিউটোরিয়াল ব্যবহার করতে পারেন।
সম্পাদনা (30-10-2018)
এটি আমার নজরে এনেছে যে sizeএটি সিএসএস 3 বৈধ নয়, যা সত্যই সঠিক - আমি কেবল নিবন্ধে উদ্ধৃত কোডটি পুনরাবৃত্তি করেছি যা (যেমন উল্লিখিত) ভাল পুরানো সিএসএস 2 ছিল (যখন আপনি বছরটি নিবন্ধটি দেখবেন তখন তা বোধগম্য হয়) এই উত্তরটি প্রথম প্রকাশিত হয়েছিল)। যাইহোক, আপনার অনুলিপি এবং পেস্ট সুবিধার জন্য এখানে বৈধ CSS3 কোড রয়েছে:
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
আপনি যদি মনে করেন যে আপনার সত্যিই পিক্সেল প্রয়োজন ( আপনার প্রকৃতপক্ষে পিক্সেল ব্যবহার করা উচিত নয় ), আপনাকে মুদ্রণের জন্য সঠিক ডিপিআই বেছে নেওয়ার যত্ন নিতে হবে:
- 72 ডিপিআই (ওয়েব) = 595 এক্স 842 পিক্সেল
- 300 ডিপিআই (মুদ্রণ) = 2480 এক্স 3508 পিক্সেল
- 600 ডিপিআই (উচ্চমানের মুদ্রণ) = 4960 এক্স 7016 পিক্সেল
তবুও, আমি ঝামেলা এড়িয়ে যাব এবং সাইজিংয়ের জন্য কেবল cm(সেন্টিমিটার) বা mm(মিলিমিটার) ব্যবহার করব কারণ আপনি কোন ক্লায়েন্ট ব্যবহার করছেন তার উপর নির্ভর করে উত্থাপন করতে পারে এমন গ্ল্যাচগুলি এড়াতে পারে।