প্রিন্ট শৈলীপত্রগুলি বিকাশ এবং পরীক্ষার আরও দ্রুত উপায় (প্রতি বার প্রিন্ট পূর্বরূপ এড়ানো)?


179

এটি এখনই আমার প্রক্রিয়া:

  1. মুদ্রণ। CSS এ পরিবর্তনগুলি সংরক্ষণ করুন
  2. ব্রাউজার খুলুন এবং রিফ্রেশ পৃষ্ঠা।
  3. ডান ক্লিক করুন এবং মুদ্রণ> মুদ্রণ প্রাকদর্শন (ফায়ারফক্স, কিন্তু সত্যিই যে কোনও ব্রাউজার) চয়ন করুন

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

আপনি কীভাবে আপনার মুদ্রণের স্টাইলশিট পরীক্ষা করেন? আপনি কি সবসময় রিফ্রেশের পরে মুদ্রণ পূর্বরূপ ক্লিক করেন?


সবাইকে তাদের পরামর্শের জন্য ধন্যবাদ. মোজিলা মুদ্রণ পূর্বরূপ উইন্ডোতে "রিফ্রেশ" ক্ষমতা সক্ষম করার জন্য কোনও বিকাশকারী সেটিং যুক্ত করে (অবশ্যই শেষ ব্যবহারকারী-বিভ্রান্তি এড়াতে ডিফল্ট নয়) আমি এটি পছন্দ করব। এটা আমার আদর্শ সমাধান, কারণ (Faust সঙ্গে সম্মত) আমি সাধারণত মুদ্রণ পূর্বরূপ এটি দেখতে দেখানোর জন্য প্রয়োজন ঠিক কিভাবে এটা (-background চিত্র, পৃষ্ঠা বিরতি, মার্জিন, ইত্যাদি) প্রদর্শন করা হবে। ডিফল্টরূপে এটি পূর্বরূপ দেখায় তাই Chrome কিছুটা সহায়তা করতে পারে। আমি স্লাইফ দ্বারা প্রস্তাবিত ফায়ারফক্স প্রিন্টপ্রিভিউ অ্যাড-অনটিও দেখব।
মাইকেল 19

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

কেবল একটি স্পষ্টকরণ দিয়ে, এটি উপস্থিত হয় যে ওএসএক্স-এ, ফাইল ... মেনুতে মুদ্রণ পূর্বরূপ বিকল্পটি পাওয়া যায় না, তবে প্রিন্ট / মুদ্রণ পূর্বরূপ এক্সটেনশান সহ আপনার কাছে একটি বোতাম এটি চালু করতে পারে। addons.mozilla.org/en-US/firefox/addon/printprint-preview
নীল মনরো

উত্তর:


208

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

আপডেট 21/11/2017

আপডেট হওয়া ডেভটুলস ডকটি এখানে পাওয়া যাবে: মুদ্রণ মোডে একটি পৃষ্ঠা দেখুন

মুদ্রণ মোডে একটি পৃষ্ঠা দেখতে:
1. কমান্ড মেনু খুলুন । ( টিএল; ডা। Cmd+Shift+P (ম্যাক) বা Ctrl+Shift+P(উইন্ডোজ, লিনাক্স))
২. টাইপিং শুরু Renderingকরুন এবং নির্বাচন করুন Show Rendering
3. এমুলেট সিএসএস মিডিয়া ড্রপডাউন জন্য, মুদ্রণ নির্বাচন করুন ।


আপডেট 29/02/2016

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

ব্রাউজার ভিউপোর্টের উপরের ডানদিকে আরও ওভাররাইড ••• আরও ওভাররাইড আইকনটি ক্লিক করে ডিভটুলস এমুলেশন ড্রয়ারটি খুলুন । তারপরে, এমুলেশন ড্রয়ারে মিডিয়া নির্বাচন করুন ।

আপডেট 12/04/2016

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

  1. ক্রোম ডিভটুলগুলি খুলুন
  2. escআপনার কীবোর্ড হিট
  3. ক্লিক করুন (উল্লম্ব ঊহ্য শব্দ)
  4. রেন্ডারিং চয়ন করুন
  5. টিক এমুলেট প্রিন্ট মিডিয়া

স্ক্রিনশটটি নীচে দেখুন:

রেন্ডারিং সেটিংস 12/04/2016

আপডেট 28/06/2016

ক্রোম ডেভটুলগুলির চারপাশে গুগল বিকাশকারী ডক্স এবং ক্রোম> 51 এর জন্য "এমুলেট মিডিয়া" বিকল্প আপডেট করা হয়েছে:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

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

রেন্ডারিং সেটিংস 28/06/2016

আপডেট 24/05/2016

সেটিংসের নামকরণ আবার পরিবর্তন হয়েছে:

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

সিএসএস মিডিয়া অনুকরণ


2
@ সুপাইরিশ হ্যাঁ, ফায়ারফক্সের জন্য সিজোনের উত্তর দেখুন।
djule5

ডকুমেন্টেশনটি সম্পূর্ণরূপে নির্ধারিত and যেখানে এটা গিয়েছিলে?
তেত্রদেব

2
এটি "কনসোল (এসসি)" এর পরে অবস্থিত তারপরে "3 উল্লম্ব বিন্দু" এর পরে "রেন্ডারিং" এর পরে নীচে "প্রিন্ট মিডিয়া এমুলেট করুন" - কেন এত লুকানো আমার কোনও ধারণা নেই।
তেত্রদেব

ওএসএক্সে এই বিকল্পটি নির্বাচন করে কিছু করার মনে হচ্ছে না?
v3nt

165

ফায়ারফক্সে আপনি Shift+F2বিকাশকারী সরঞ্জামদণ্ড কমান্ড লাইনটি খুলতে টাইপ করতে পারেন এবং তারপরে টাইপ করতে পারেনmedia emulate print

আপনি অন্যান্য মিডিয়া প্রকারগুলিও এভাবে অনুকরণ করতে পারেন।


3
আমি লক্ষ করেছি, এটি মুদ্রণ পূর্বরূপে প্রদত্ত একই মতামতটি প্রতিফলিত করতে পারে না - স্পেসিফিকালি যখন এটি অতিরিক্ত শ্বেত স্পেসের ক্ষেত্রে আসে - নিশ্চিত হয়ে নিন যে আপনি এই সাবসেটপটি সম্পন্ন করার পরে আপনার মুদ্রণ পূর্বরূপটি আলাদা নয়।
jave.web

15
দুঃখজনকভাবে, জিএলসিআই ফায়ারফক্স থেকে 62 সংস্করণে বাদ পড়েছে A
জিরপ্সড

4
জিএলসিআই (শিফট + এফ 12) ছাড়া এটি কীভাবে সক্ষম করবেন?
শে

3
: @StR আপনি অন্য পথে এখন ফায়ারফক্স মুদ্রণ শৈলী অনুকরণ করতে stackoverflow.com/questions/47877112/...
TylerH

2
@TylerH ফায়ারফক্স v68 এ যা বলেছিল তা আমি কেবল পরীক্ষা করেছি এবং এটি কাজ করে।
14

22

ফায়ারফক্স + ওয়েব বিকাশকারী সরঞ্জামদণ্ডের এক্সটেনশনের বিভিন্ন স্টাইলশিট সক্ষম / অক্ষম করার একটি উপায় রয়েছে।

সিএসএস মেনুতে দেখুন। স্বতন্ত্র স্টাইলশিটগুলি অক্ষম করতে এবং সক্ষম করতে একটি মেনু রয়েছে এবং পাশাপাশি "মিডিয়া টাইপ দ্বারা প্রদর্শন" মেনু রয়েছে।

এছাড়াও, ফায়ারফক্সে প্রিন্টপ্রিভিউতে যাওয়ার পদক্ষেপগুলি হ্রাস করতে, প্রিন্টপ্রিভিউ এক্সটেনশানটি চেষ্টা করুন , এটি একটি সরঞ্জামদণ্ডের বোতাম তৈরি করবে।

ক্রোমের জন্য, সেই এক্সটেনশনের একটি বন্দর রয়েছে । আমি Chrome সংস্করণ দিয়ে যা বলতে পারি তা থেকে আপনি "মুদ্রণের শৈলীগুলি দেখান" চয়ন করতে পারেন


12

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

ক্রোমে, control+pমুদ্রণ পূর্বরূপে অবিলম্বে যায়। (কেবল আপনার মেনু বারের উপর চাপ দেওয়া ভুলে যাবেন)। এটা বেশ সহজ।


ক্রোম অবশ্যই মুদ্রণ মিডিয়া অনুকরণে প্রদর্শিত হয় না to আমি খুঁজে পেয়েছি যে যদি আপনার 2 মিটারেরও কম ক্রোম মিডিয়া ক্যোয়ারী প্রিপ্রিন্ট ফাংশন না থাকে তবে এটি পরিবর্তনটি আঁকবে না।
চেম্বারলাইন

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

6

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


5

আমার জন্য সহজ ( এফএফ সহ@screen অংশগুলি বা অনুরূপ 1 নেই ) :

  • করা @media print { ...আপনার সিএসএস বিষয়বস্তু শেষে অংশ
  • কেবল মোড়ক ঘোষণার বাইরে মন্তব্য/*@media print {*/ ... /*}*/
    • এইভাবে প্রিন্ট স্টাফগুলি আপনার শৈলীতে প্রযোজ্য সেখানে তত্ক্ষণাত ওভাররাইড করে
  • (আমি লাইভরেলোড ব্যবহার করছি এভাবে পরিবর্তনগুলি সংরক্ষণের সাথে সাথে আমার ব্রাউজার পৃষ্ঠাটি রিফ্রেশ হয় )
  • ( অন্যথায় , লাইভরেলোড ব্যবহার না করা হলে ) CTRL+Rপৃষ্ঠাটি পুনরায় লোড করতে টিপুন
  • এখন আপনি ইতিমধ্যে অনেকগুলি প্রিন্ট সিএসএস অ্যাডজাস্টমেন্ট (ফন্ট শৈলী, ফন্টের আকার, স্পেসিংস, রঙ) করতে পারেন যেখানে মুদ্রণের পূর্বরূপের প্রয়োজন নেই
  • ALT+F+Vমুদ্রণ পূর্বরূপ খুলতে এবং ALT+Wআবার এটি বন্ধ করতে টিপুন

1 : যদি কারও কাছে সেগুলি থাকে, আপনার পরীক্ষিত মিডিয়াটির উপর নির্ভর করে এগুলি আউট-ইন-মন্তব্য করে, অন্যথায় এটি কোনও বড় বিষয় নাও হতে পারে


3

এই অন্যান্য পোস্টে বর্ণিত হিসাবে ( মুদ্রণের পূর্বরূপ মোডে ক্রোমের এলিমেন্ট ইন্সপেক্টর ব্যবহার করছেন? ), আপনি মুদ্রণের স্টাইলশিটটি সহজেই অনুকরণ করতে ক্রোম ব্যবহার করতে পারেন। এটি দুর্দান্ত কারণ আপনি মুদ্রণ কথোপকথনটি যখন দেখবেন তখন অনুমানের চেয়ে স্টাইলগুলি কোথা থেকে আসছে তা দেখতে আপনি পরিদর্শককে ব্যবহার করতে পারেন।

Chrome এর এলিমেন্ট ইন্সপেক্টরটির নীচে ডানদিকে কোণায় গিয়ার আইকনটি ক্লিক করে ওভাররাইড সেটিংস ডায়ালগটি অ্যাক্সেস করুন। তারপরে টার্গেট মিডিয়া টাইপ হিসাবে মুদ্রণ নির্বাচন করুন।

অসাধারণ!


2

কমপক্ষে ক্রোমে: বিকাশের সময়, বডি ট্যাগটিতে যুক্ত করুন onload="window.print()"। এটি আপনাকে রিফ্রেশ করার সাথে সাথে মুদ্রণ মোডটি খুলবে।

দুর্ভাগ্যক্রমে এটি বোধ হয় না যে বিকাশকারী সরঞ্জামগুলি বেশিরভাগ ব্যবহারের কারণে এটি মূলত এমবেডেড পিডিএফ রয়েছে।

ঘটনাক্রমে ২ য় পদক্ষেপ নির্মূল করার উপায় রয়েছে are একটি জনপ্রিয় লাইভরেলোড।


0

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


0

ক্রোম 62 এ, সেন্টিমিডি-আর / সেমিডি-পি একটি @ মিডিয়া প্রিন্ট স্টাইলড পৃষ্ঠাটির দুর্দান্ত প্রাকদর্শন আনতে একটি ম্যাকের উপর ভাল কাজ করে।

এটি ব্রাউজার উইন্ডো নিজেই উপরের ডানদিকে উল্লম্ব এলিপিসের মাধ্যমে অ্যাক্সেসযোগ্য (বিকাশকারী সরঞ্জাম নয়) / মুদ্রণ ...

পূর্বরূপ উইন্ডো বাতিল করতে এস্ক ব্যবহার করুন।

সুতরাং, ইন্টেলিজ আইডিইএ এবং ক্রোমের সাথে আমার কর্মপ্রবাহের জন্য এটি: সেন্টিমিডি-এস, সেন্টিমিডি-ট্যাব, সেন্টিমিডি-আর, সেমিডি-পি, এসকে, সেমিডি-ট্যাব এবং আমি আইডিইতে ফিরে এসেছি।

উইন্ডোজ 10-এ ক্রোম 62 এর একই মুদ্রণ ... একই জায়গায় মেনু রয়েছে, সিটিআরটিএল-পি সহ অ্যাক্সেসযোগ্য: ক্রোম 62 এ মুদ্রণ করুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.