একটি মুদ্রণযোগ্য পৃষ্ঠা তৈরি করার দুটি উপায় রয়েছে:

1. মেনু এবং অপ্রয়োজনীয় ডিজাইন ছাড়া একটি পৃষ্ঠা প্রদর্শন করতে বিশেষভাবে একটি পৃথক স্ক্রিপ্ট ব্যবহার করুন।

2. সাইটটি দেখার সময় আমরা যে পৃষ্ঠাটি দেখি সেই একই পৃষ্ঠাটি প্রদর্শন করুন, কিন্তু বিভিন্ন সমর্থিত শৈলী সহ, যেখানে অপ্রয়োজনীয় উপাদানগুলি লুকানো থাকে।

আমি প্রিন্ট করার জন্য নথি (চালান, চালান, ইত্যাদি) তৈরি করার সুযোগ পেয়েছি। তাই আমি প্রথম বিকল্প দিয়ে গিয়েছিলাম. কিন্তু এই আমার ক্ষেত্রে সহজ. দ্বিতীয় বিকল্পটি আমার কাছে আরও নমনীয় বলে মনে হচ্ছে।

এখানে আমার অভিজ্ঞতা, নোট:

1. প্রধান নিয়ম হল সহজ হওয়া এবং লোকেরা এখানে আপনার (গুলি) কাছে আকৃষ্ট হবে৷ 🙂 সংক্ষেপে, বিভিন্ন ডিজাইন ব্যবহার করবেন না। একজন ব্যক্তির কেবল মুদ্রিত পাঠ্যটি পড়তে হবে, অপ্রয়োজনীয় নকশা দিয়ে এটি বোঝার দরকার নেই। হ্যাঁ, এবং প্রিন্টারে কালি নষ্ট করুন।

2. আমরা ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করি না; যাইহোক প্রিন্ট করার সময় সেগুলি থাকবে না। অথবা তারা করবে, কিন্তু সব ব্রাউজারে নয়। অন্তত কিছু অনুরূপ রেক আমার ঘটেছে.

3. আমরা একটি সাদা ব্যাকগ্রাউন্ড এবং কালো টেক্সট ব্যবহার করার চেষ্টা করি। যদি এটি অন্যভাবে হয় তবে আপনি অনেক পেইন্ট নষ্ট করবেন। আমি মনে করি না যে রঙিন পাঠ্য করার কোন প্রয়োজন আছে-অনেকের কাছে যেভাবেই হোক কালো-সাদা প্রিন্টার রয়েছে।

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

পেজব্রেক (পৃষ্ঠা-ব্রেক-পর: সর্বদা;)

পৃষ্ঠা বিরতি ( পৃষ্ঠা - বিরতি - পরে : সর্বদা ;

এই ব্লকের পিছনের পাঠ্যটি একটি নতুন পৃষ্ঠায় মুদ্রিত হবে। সমস্ত আধুনিক ব্রাউজারে কাজ করে। এবং আধুনিকও নয়। সংস্করণ 7 পর্যন্ত একটি IE অন্তর্ভুক্ত ব্যর্থ হয়। কিন্তু আপনাকে তার উপর গোল করতে হবে!

5. এবং তাই, মুদ্রণ. ব্যবহারকারী নিজেই মুদ্রণ চয়ন করতে পারেন. আপনি বাজি ধরতে পারেন

window.onload = ফাংশন () ( window.print(); )

এবং বোতাম নিজেই:

সীল

< button onclick = "window.print();" >সীল< / button >

পৃষ্ঠাটি দেখার সময় এই বোতামটি উপস্থিত হবে, কিন্তু মুদ্রিত হবে না, যেহেতু আমরা প্রদর্শন সেট করেছি: কোনটি নয়; মিডিয়া="প্রিন্ট" এর জন্য স্টাইলে, অর্থাৎ, মুদ্রণ ডিভাইসের শৈলীতে। আপনি বোতামটি ক্লিক করলে, একটি মুদ্রণ উইন্ডো প্রদর্শিত হবে।

যারা মুদ্রণ প্রক্রিয়াটিকে সুপার স্বয়ংক্রিয় করতে চান তাদের জন্য, যাতে, উদাহরণস্বরূপ, আমরা একটি পৃষ্ঠা খুলি এবং প্রিন্টারটি অবিলম্বে পৃষ্ঠাটি মুদ্রণ করা শুরু করে - আপনার আগ্রহকে ঠান্ডা করুন বা যে আপনাকে এটি করতে বলে। আমি এই পদ্ধতি খুঁজে পাইনি. হ্যাঁ, তার অস্তিত্ব নেই। কারণ এটা যৌক্তিক। কল্পনা করুন, আপনি একটি ওয়েবসাইটে যান, এবং এটি জাভাস্ক্রিপ্টের মাধ্যমে একশত কপি পৃষ্ঠা মুদ্রণের জন্য প্রোগ্রাম করা হয়েছে। এবং প্রিন্টার নির্বিকার হয়ে যায় এবং আপনার অজান্তেই এই গুচ্ছ পৃষ্ঠাগুলি মুদ্রণ করা শুরু করে। অযৌক্তিক? অযৌক্তিক !

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

7. উপায় দ্বারা, পূর্ববর্তী একটি অনুসরণ. ধরা যাক ব্যবহারকারী পৃষ্ঠার ঠিকানা সহ সমস্ত শিরোনাম এবং ফুটারের প্রদর্শন নিষ্ক্রিয় করেছে৷ অর্থাৎ ব্যবহারকারী যদি কিছুক্ষণ পর প্রিন্টআউটটি দেখেন তবে তিনি বুঝতে পারবেন না কোন সাইট থেকে প্রিন্ট করেছেন। তাই হয়তো সম্পদ, পৃষ্ঠার ঠিকানা, লোগো বা অন্য কিছু নির্দেশ করে একটি ছোট নোট তৈরি করা মূল্যবান।

8. বড় ফন্ট সাইজ ব্যবহার করুন (অবশ্যই কারণের মধ্যে)। মূল জিনিসটি মুদ্রিত হলে সবকিছুই পাঠযোগ্য।

10. আমি মনে করি আমাদের এমন মাত্রা ব্যবহার করতে হবে যা ডিভাইস থেকে স্বাধীন - পরম মাত্রা। উদাহরণস্বরূপ, সেমি, মিমি, পিটি, পিসিতে।

11. এখানে একটি দরকারী লিঙ্ক http://www.webdevout.net/browser-support-css#css2propsprint। শৈলীর বিবরণ http://htmlbook.ru ওয়েবসাইটে পাওয়া যাবে
সাধারণভাবে, আমি আপনাকে পরামর্শ দিচ্ছি যে আপনি একজন অভিজ্ঞ ডেভেলপার হলেও CSS বৈশিষ্ট্যের সম্পূর্ণ তালিকার মধ্য দিয়ে যান। আমি অপরিচিত CSS বৈশিষ্ট্যগুলি আবিষ্কার করে অবাক হয়েছিলাম এবং কিছু CSS বৈশিষ্ট্য ইতিমধ্যেই ভয় ছাড়াই ব্যবহার করা যেতে পারে।

অবশ্যই তা নয় সম্পুর্ণ তালিকাপরামর্শ এই শুধু আমার চিন্তা.

ওয়েবসাইটগুলির বিকাশ, রক্ষণাবেক্ষণ এবং প্রচার একটি ওয়েব পৃষ্ঠার একটি "মুদ্রণযোগ্য সংস্করণ" তৈরি করা

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

অবশ্যই, প্রিন্ট কমান্ড বা CTRL+P সংমিশ্রণ ব্যবহার করে সরাসরি ব্রাউজারে আসল পৃষ্ঠার একটি প্রিন্টআউট পেতে কেউ আপনাকে বিরক্ত করবে না, তবে এটি অপ্রয়োজনীয় পৃষ্ঠা উপাদানগুলি প্রিন্ট করবে - মেনু, হেডার ইত্যাদি, যা এটি তৈরি করে। প্রয়োজনীয় তথ্য উপলব্ধি করা কঠিন। উপরন্তু, একরঙা প্রিন্টারে মুদ্রিত হলে রঙিন উপাদানগুলি সাধারণত আকর্ষণীয় দেখায় না।

ব্যবহারকারীদের সুবিধার জন্য, সাইট বিকাশকারীরা সাধারণত একটি পৃথক পৃষ্ঠা তৈরি করে - একটি মুদ্রণযোগ্য সংস্করণ, যার উপর শুধুমাত্র প্রয়োজনীয় পাঠ্য, কালো এবং সাদা (গ্রেস্কেল) ছবি এবং যোগাযোগের তথ্য অবশিষ্ট থাকে।

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

পৃষ্ঠার নীচে, সম্পূর্ণ যোগাযোগের তথ্য নির্দেশ করার পরামর্শ দেওয়া হয়: ঠিকানা, টেলিফোন, ই-মেইল, ICQ, ওয়েবসাইট URL, ইত্যাদি।

মূল পৃষ্ঠা থেকে মুদ্রণযোগ্য সংস্করণে স্যুইচ করতে, আপনি যেকোনো উপযুক্ত ছবি এবং পাঠ্য ব্যবহার করতে পারেন, উদাহরণস্বরূপ, এরকম কিছু:

মুদ্রণ সংস্করণ পৃষ্ঠায়, একটি মুদ্রণ বোতাম ইনস্টল করা ভাল অনুশীলন হিসাবে বিবেচিত হয়, যা ক্লিক করা হলে, প্রিন্টার সেটিংস উইন্ডোটি খোলে। এটি করার জন্য, JavaScript window.print() পদ্ধতি ব্যবহার করা হয়; যা প্রিন্টারের বর্তমান উইন্ডোতে অবস্থিত ওয়েব পৃষ্ঠাটি প্রিন্ট করে। মূল পৃষ্ঠায় ফিরে যাওয়ার জন্য একটি লিঙ্ক অন্তর্ভুক্ত করাও একটি ভাল ধারণা।

সহজ লিঙ্ক দিয়ে বোতাম ডিজাইন করা যেতে পারে
ছাপা(কোড প্রিন্ট) এবং , কিন্তু আরো আকর্ষণীয়ভাবে - ট্যাগ ব্যবহার করে:

এই সমন্বয়ের জন্য HTML কোড:

উভয় ক্ষেত্রেই, একটি আদর্শ নথি মুদ্রণ উইন্ডো খুলবে, যা আপনি প্রদত্ত উদাহরণ বোতামগুলিতে ক্লিক করে দেখতে পারেন।

পরিশেষে, আপনার পণ্য বা পরিষেবার বিবরণের একটি "হার্ড কপি" সংরক্ষণ করা দর্শকদের সংখ্যা ট্র্যাক করতে আপনার মুদ্রণ পৃষ্ঠায় একটি পরিসংখ্যান কাউন্টার কোড অন্তর্ভুক্ত করতে ভুলবেন না, যদিও এই ডেটা সবসময় আপনাকে খুশি নাও করতে পারে। দুর্ভাগ্যবশত...

"ওয়েবসাইটের উন্নয়ন, রক্ষণাবেক্ষণ এবং প্রচার" বিষয়ে দরকারী নিবন্ধ

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

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

কেন একটি পৃথক সংস্করণ করা?

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

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

কি প্রিন্ট করতে হবে তা আমি কিভাবে নির্দিষ্ট করব?

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

সুতরাং, বিষয়বস্তু এলাকায় যা আছে তা প্রিন্ট করা হবে। প্রিন্ট করার সময় আপনি যে সমস্ত উপাদানগুলি লুকাতে চান সেগুলিকে আপনার নিজস্ব ক্লাস বরাদ্দ করুন, উদাহরণস্বরূপ "নো-প্রিন্ট"৷

আমরা আরও নির্দিষ্ট করতে পারি যে ব্যানার সহ ফোল্ডারে অবস্থিত ছবিগুলি মুদ্রণের জন্য পাঠানো উচিত নয়৷ এটি একটি মুখোশ ব্যবহার করে করা হয়। এটি করার জন্য আপনাকে CSS এ উল্লেখ করতে হবে:

img (প্রদর্শন: কিছুই নয়! গুরুত্বপূর্ণ;)

এই কোডের সাহায্যে আমরা পৃষ্ঠার যেকোনো জায়গায় প্রদর্শিত সমস্ত ব্যানার লুকিয়ে রাখব। একইভাবে, আপনাকে অবশিষ্ট উপাদানগুলিকে অদৃশ্য করতে হবে।

নো-প্রিন্ট (প্রদর্শন: কিছুই নয়! গুরুত্বপূর্ণ;)

অনুশীলনে আবেদন

print.css ফাইলটি শুধুমাত্র মুদ্রণের সময় প্রক্রিয়া করার জন্য, আপনাকে এইভাবে এটি নির্দিষ্ট করতে হবে:

পেইজটা ছাপাও

বেশ কয়েক বছর আগে আমি এমন একটি ফাংশনের অস্তিত্ব সম্পর্কে জানতে পেরে আনন্দিতভাবে অবাক হয়েছিলাম। এটি সুবিধাজনক এবং বেশ সহজ, তাই আমি আপনাকে এটি ব্যবহার করার পরামর্শ দিই।

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

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

পৃষ্ঠার গঠন

তাই আসুন প্রথমে আমাদের ডকুমেন্টের গঠন তৈরি করতে HTML ব্যবহার করি। উদাহরণের জন্য, আমি বুঝতে সহজ করার জন্য একটি টেবিল লেআউট ব্যবহার করার সিদ্ধান্ত নিয়েছি:

প্রবন্ধের শিরোনাম

নেভিগেশন হোম পেজ প্রবন্ধ পরিচিতি

নিবন্ধের শিরোনাম এই পৃষ্ঠাটি প্রিন্ট করা যেতে পারে। শুধু প্রবন্ধের লেখা ছাপা হবে।

আপনার বিজ্ঞাপন এখানে হতে পারে

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

CSS যোগ করা হচ্ছে

এখন আপনাকে CSS ব্যবহার করতে হবে ব্রাউজারকে জানাতে যে এটি স্ক্রিনে পৃষ্ঠার উপাদানগুলি প্রদর্শন করার জন্য কোন স্টাইল ব্যবহার করবে এবং মুদ্রণের সময় কোনটি ব্যবহার করা উচিত। style.css তৈরি করুন এবং সেখানে নিম্নলিখিত লিখুন:

@মিডিয়া স্ক্রিন ( বডি (ব্যাকগ্রাউন্ড-রঙ: #0B73BD; ফন্ট-ফ্যামিলি: তাহোমা; রঙ: #FFFFFF; ) টেবিল ( প্রস্থ: 600px; ) #leftcolumn ( প্রস্থ: 140px; উল্লম্ব-সারিবদ্ধ: শীর্ষ; ফন্ট-আকার: 15px ); ) ) @মিডিয়া প্রিন্ট ( বডি (ব্যাকগ্রাউন্ড-রঙ: #FFFFFF; ফন্ট-ফ্যামিলি: তাহোমা; রঙ: #000000; ) #সামগ্রী (পটভূমির রঙ: #FFFFFF; প্যাডিং: 5px; ফন্ট-আকার: 15px; রঙ: # 000000; প্রস্থ: 600px; ) #leftcolumn ( display: none; ) #rightcolumn ( display: none; )

CSS কোডের প্রথম ব্লকটি বর্ণনা করে যে কীভাবে পৃষ্ঠার উপাদানগুলি ব্রাউজারে প্রদর্শিত হবে। ব্লকটি অতিরিক্ত কোঁকড়া ধনুর্বন্ধনীতে স্থাপন করা হয়েছিল যার আগে আমরা @media স্ক্রিন যোগ করেছি। এটি ব্রাউজারকে জানতে দেয় যে প্রদর্শনের জন্য এই শৈলীগুলি প্রয়োগ করা প্রয়োজন:

একটি ব্রাউজারে দেখা হলে পৃষ্ঠাটি এমন দেখায়

দ্বিতীয় ব্লকটি প্রথমটির মতো একই পৃষ্ঠার উপাদানগুলির প্রদর্শনকে বর্ণনা করে, তবে এই ক্ষেত্রে যে ফর্মে নথিটি মুদ্রিত হলে দেখাবে এবং @media প্রিন্ট প্যারামিটার দ্বারা নির্দেশিত হবে। যেহেতু আমরা শুধুমাত্র দরকারী বিষয়বস্তু প্রিন্ট করতে চাই, তাই আমরা বাম (#leftcolumn) এবং ডান (#rightcolumn) কক্ষগুলিকে প্রদর্শন থেকে নিষ্ক্রিয় করি তাদের মান প্রদর্শন নির্ধারণ করে: কোনোটিই নয়।

সাইটের পৃষ্ঠার একটি মুদ্রিত সংস্করণ দেখতে এইরকম

পৃথক শৈলী ফাইল

এক শৈলী ফাইলে সবকিছু একত্রিত করার দরকার নেই। পরিবর্তে, আপনি দুটি স্টাইল ফাইল ব্যবহার করতে পারেন এবং সাইট পৃষ্ঠাগুলির সাথে সংযোগ করার সময়, ব্রাউজারকে বলুন কোন স্টাইল ফাইলটি মুদ্রণের জন্য ব্যবহার করতে হবে এবং কোনটি প্রদর্শনের জন্য৷ প্রথমটি (স্ক্রীনে প্রদর্শনের জন্য) media="screen" প্যারামিটার দ্বারা নির্ধারিত হয়, এবং দ্বিতীয়টি মুদ্রণের জন্য ব্যবহৃত হবে এবং media="print" প্যারামিটার দ্বারা নির্ধারিত হয়:

মুদ্রণের শৈলীগুলি অবশ্যই অন্যদের পরে বর্ণনা করতে হবে, অন্যথায় অপেরা ব্রাউজারে আউটপুট করার উদ্দেশ্যে রঙিন ব্যাকগ্রাউন্ড সহ সামগ্রীর ব্লক মুদ্রণ করবে, এবং আমরা মুদ্রণের জন্য যে সাদা রঙটি বেছে নিয়েছি তা নয়।

এছাড়াও, প্রিন্ট করার সময়, আমরা কঠোরভাবে কন্টেন্ট ব্লকের প্রস্থ 600px এ কমিয়ে দেই, কারণ 100% প্রস্থের সাথে, প্রিন্টারটি পৃষ্ঠার ডানদিকে লেখার একটি ছোট স্ট্রিপ "কাট" করে। অনুগ্রহ করে আরও মনে রাখবেন যে Opera থেকে মুদ্রণ করার সময়, শীটের প্রান্ত বরাবর ইন্ডেন্টেশন ইন্টারনেট এক্সপ্লোরারের তুলনায় সামান্য ছোট হয় এবং কাগজের শীটে পাঠ্যের লাইনগুলি প্রশস্ত হয়।

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

নিবন্ধটি অনুলিপি করা নিষিদ্ধ।

যেখানে তিনি ইঙ্গিত দিয়েছিলেন যে তাদের অর্ডারের বিশদ পৃষ্ঠাগুলি মুদ্রিত আকারে ব্যবহারযোগ্য নয়।

আমি যখন এই টুইটটি দেখেছিলাম তখন আমি হতবাক হয়ে গিয়েছিলাম - আমি বুঝতে পেরেছিলাম যে আমি প্রিন্টের জন্য শৈলীগুলিকে অপ্টিমাইজ করার অনেক দিন হয়ে গেছে এবং আমি সেগুলি পরীক্ষা করার কথাও ভাবিনি৷

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

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

আমি অনেক আগেই হোম প্রিন্টার ছেড়ে দিয়েছিলাম কারণ তারা সবসময় 10 মিনিট ব্যবহারের পরে ভেঙে যায়। তবে সবাই আমার মতো নয়। - হেডন পিকারিং (ইনক্লুসিভ ডিজাইন প্যাটার্নস)

আপনি যদি নিজেকে একই অবস্থানে খুঁজে পান, তাহলে এই পোস্টটি আপনাকে দ্রুত রিফ্রেশারে সাহায্য করবে। আপনি যদি মুদ্রণের জন্য আপনার পৃষ্ঠাগুলি অপ্টিমাইজ না করে থাকেন, নিম্নলিখিত টিপসআপনাকে শুরু করতে সাহায্য করবে।

1. মুদ্রণ জন্য শৈলী সংযোগ

সর্বোত্তম পথআপনার CSS-এ @media নির্দেশিকা ঘোষণা করে প্রিন্টিংয়ের জন্য কানেক্ট করা শৈলী।

বডি (ফন্ট-সাইজ: 18px; ) @media প্রিন্ট ( /* মুদ্রণ শৈলী এখানে যান */ বডি (ফন্ট-সাইজ: 28px; ) )

বিকল্পভাবে, আপনি HTML-এ শৈলী অন্তর্ভুক্ত করতে পারেন, তবে এর জন্য একটি অতিরিক্ত HTTP অনুরোধের প্রয়োজন হবে।

2. পরীক্ষা

প্রতিবার শৈলীতে একটি ছোট পরিবর্তন করার সময় আপনাকে একটি পৃষ্ঠা মুদ্রণ করতে হবে না। আপনার ব্রাউজারের উপর নির্ভর করে, আপনি পৃষ্ঠাটিকে PDF এ রপ্তানি করতে পারেন, প্রিন্ট প্রিভিউ ব্যবহার করতে পারেন বা ব্রাউজারে সরাসরি ডিবাগ করতে পারেন।

ফায়ারফক্সে প্রিন্ট শৈলী ডিবাগ করতে, ডেভেলপমেন্ট প্যানেল খুলুন (Shift + F2 বা টুলস > ওয়েব ডেভেলপার > ডেভেলপার টুলবার), ইনপুট ফিল্ডে মিডিয়া এমুলেট প্রিন্ট টাইপ করুন এবং এন্টার টিপুন। সক্রিয় ট্যাবটি এমনভাবে আচরণ করবে যেন রিলোড না হওয়া পর্যন্ত মিডিয়া টাইপ প্রিন্ট করা হয়েছে।

ফায়ারফক্সে মুদ্রণ শৈলী অনুকরণ করা

ক্রোমে, বিকাশকারী সরঞ্জামগুলি খুলুন (CMD + Opt + I (macOS) বা Ctrl + Shift + I (Windows) বা View > Developer > Developer Tools) এবং কনসোলটি আনুন, রেন্ডার প্যানেলটি খুলুন এবং এমুলেট সিএসএস থেকে প্রিন্ট নির্বাচন করুন। মিডিয়া মেনু।

Chrome এ মুদ্রণ শৈলী অনুকরণ করা

3. পরিমাপের পরম একক

পরম ইউনিটগুলি স্ক্রিনে খারাপ, তবে মুদ্রণের জন্য দুর্দান্ত। মুদ্রণ শৈলীতে, তাদের ব্যবহার সম্পূর্ণ নিরাপদ এবং এমনকি cm, mm, in, pt বা pc এর মতো ইউনিটগুলি ব্যবহার করার পরামর্শ দেওয়া হয়।

বিভাগ ( মার্জিন-নিচ: 2 সেমি;)

4. পৃষ্ঠাগুলির জন্য নির্দিষ্ট নিয়ম

আপনি @পৃষ্ঠা নির্দেশিকা ব্যবহার করে মুদ্রিত পৃষ্ঠার জন্য নির্দিষ্ট বৈশিষ্ট্যগুলি সেট করতে পারেন, যেমন এর মাত্রা, অভিযোজন এবং প্যাডিং। আপনি যদি সমস্ত পৃষ্ঠাগুলিতে নির্দিষ্ট ইন্ডেন্ট থাকতে চান তবে এটি খুব সুবিধাজনক।

@মিডিয়া প্রিন্ট ( @পৃষ্ঠা ( মার্জিন: 1 সেমি; ) )

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

5. পৃষ্ঠা বিরতি পরিচালনা করা

যেহেতু মুদ্রিত পৃষ্ঠাগুলি, ওয়েব পৃষ্ঠাগুলির বিপরীতে, অন্তহীন নয়, সামগ্রীগুলি পৃষ্ঠাগুলির মধ্যে বিভক্ত হবে৷ এটি কীভাবে ঘটে তা নিয়ন্ত্রণ করার জন্য আমাদের 5টি বৈশিষ্ট্য রয়েছে।

উপাদান আগে পৃষ্ঠা বিরতি.

যদি আমরা চাই যে উপাদানটি সর্বদা পৃষ্ঠার শুরুতে থাকুক, আমরা পৃষ্ঠা-ব্রেক-আগে নিয়ম ব্যবহার করে একটি পৃষ্ঠা বিরতি জোর করতে পারি।

বিভাগ (পৃষ্ঠা-ব্রেক-আগে: সর্বদা;)

উপাদানের পরে পৃষ্ঠা বিরতি।

পৃষ্ঠা বিরতি-পরবর্তী নিয়ম আমাদের একটি উপাদানের পরে পৃষ্ঠা বিরতি জোরপূর্বক বা অক্ষম করতে দেয়।

H2 (পেজ-ব্রেক-পর: সর্বদা;)

একটি উপাদান ভিতরে পৃষ্ঠা বিরতি

আপনি যদি একটি উপাদানের মধ্যে পৃষ্ঠা বিরতি এড়াতে চান তবে এই বৈশিষ্ট্যটি কার্যকর।

উল (পেজ-ব্রেক-ভিতরে: এড়িয়ে চলুন;)

বিধবা এবং অনাথ (ঝুলন্ত লাইন)

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

পি (বিধবা: 4;)

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

P(এতিম: 3;)

এই কোডটির অর্থ হল বর্তমান পৃষ্ঠায় কমপক্ষে 3টি লাইন ফিট হওয়া আবশ্যক যাতে অনুচ্ছেদটি পরবর্তী পৃষ্ঠায় না যায়৷

এই সমস্ত বৈশিষ্ট্য এবং মান প্রতিটি ব্রাউজারে কাজ করে না; আপনার বিভিন্ন ব্রাউজারে মুদ্রণ শৈলী পরীক্ষা করা উচিত।

6. শৈলী রিসেট করুন

প্রিন্টিংয়ের জন্য ব্যাকগ্রাউন্ড-কালার, বক্স-শ্যাডো এবং রঙের মতো কিছু স্টাইল রিসেট করা বোধগম্য।

*, *:আগে, *:পরে, *:প্রথম-পত্র, p:প্রথম-লাইন, div:প্রথম-লাইন, ব্লককোট:প্রথম-লাইন, li:প্রথম-লাইন (পটভূমি: স্বচ্ছ ! গুরুত্বপূর্ণ; রঙ: #000 গুরুত্বপূর্ণ

ব্যবহার করার সময় মুদ্রণ শৈলী কয়েকটি ব্যতিক্রমগুলির মধ্যে একটি কীওয়ার্ড!গুরুত্বপূর্ণ বেশ স্বাভাবিক.

7. অপ্রয়োজনীয় বিষয়বস্তু অপসারণ

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

আপনি মূলত শুধুমাত্র প্রধান বিষয়বস্তু প্রদর্শন করতে পারেন এবং অন্য সবকিছু লুকাতে পারেন:

বডি > *:নট(প্রধান) (প্রদর্শন: কিছুই নয়;)

8. লিঙ্ক ঠিকানা মুদ্রণ করুন

A:পরে ( বিষয়বস্তু: " (" attr(href) ")";)

অবশ্যই, সবকিছু এইভাবে দেখানো হবে: আপেক্ষিক লিঙ্ক, পরম লিঙ্ক, অ্যাঙ্কর, ইত্যাদি। নিম্নলিখিত বিকল্পটি আরও ভাল কাজ করবে:

A:not(): পরে ( বিষয়বস্তু: " (" attr(href) ")";)

পাগল মনে হচ্ছে, আমি জানি. এই লাইনগুলি যেভাবে কাজ করে তা হল যে কোনো লিঙ্কের পাশে href অ্যাট্রিবিউটের মান প্রদর্শন করা, যদি এটি http দিয়ে শুরু হয় কিন্তু আমাদের mywebsite.com-এর দিকে নির্দেশ না করে।

9. মুদ্রণ সংক্ষেপণ

শিরোনাম বৈশিষ্ট্যে সংজ্ঞা নির্দেশ করে এমন একটি উপাদানের সাথে সংক্ষেপণগুলি আবৃত করা আবশ্যক৷ এটা এই মুদ্রণ জ্ঞান করে তোলে.

Abbr:পরে ( বিষয়বস্তু: " (" attr(টাইটেল)")";)

10. প্রিন্ট ব্যাকগ্রাউন্ড

ব্রাউজারগুলি সাধারণত পটভূমির রঙ এবং পটভূমির ছবিগুলি মুদ্রণ করে না যদি না আপনি তাদের স্পষ্টভাবে না বলেন৷ একটি অ-প্রমিত প্রিন্ট-কালার-অ্যাডজাস্ট বৈশিষ্ট্য রয়েছে যা আপনাকে কিছু ব্রাউজারে ডিফল্ট সেটিংস ওভাররাইড করতে দেয়।

শিরোনাম ( -ওয়েবকিট-প্রিন্ট-রঙ-অ্যাডজাস্ট: সঠিক; মুদ্রণ-রঙ-সামঞ্জস্য: সঠিক;)

11. মিডিয়া প্রশ্ন

আপনি যদি নিম্নলিখিত উদাহরণের মতো মিডিয়া প্রশ্নগুলি লেখেন, তাহলে মনে রাখবেন যে এই মিডিয়া কোয়েরির শৈলীগুলি প্রিন্ট করার সময় প্রয়োগ করা হবে না।

@মিডিয়া স্ক্রিন এবং (মিনিট-প্রস্থ: 48এম) ( /* শুধুমাত্র স্ক্রিন */ )

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

@media (মিনিমাম-প্রস্থ: 48em) ( /* সমস্ত মিডিয়া প্রকার */ )

12. প্রিন্টিং কার্ড

ফায়ারফক্স এবং ক্রোমের বর্তমান সংস্করণ মানচিত্র মুদ্রণ করতে পারে, কিন্তু সাফারি পারে না। কিছু পরিষেবা স্থির মানচিত্র সরবরাহ করে যা মূলের পরিবর্তে মুদ্রিত হতে পারে।

মানচিত্র ( প্রস্থ: 400px; উচ্চতা: 300px; ব্যাকগ্রাউন্ড-ছবি: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&mapreshualform= "); -ওয়েবকিট-প্রিন্ট-রঙ-অ্যাডজাস্ট: সঠিক; মুদ্রণ-রঙ-সামঞ্জস্য: সঠিক;)

13. QR কোড অ্যাড-অন 2: গুটেনবার্গ

আপনি যদি একটি ফ্রেমওয়ার্ক খুঁজছেন, আপনি গুটেনবার্গ পছন্দ করতে পারেন, যা আপনার পৃষ্ঠাগুলিকে অপ্টিমাইজ করা একটু সহজ করে তোলে৷

সংযোজন 3: হারটিয়া

এটি থেকে মুদ্রণ শৈলী তৈরি করার জন্য আরেকটি কাঠামো