আমি ব্যবহার করি এমন বেশ কয়েকটি ওয়েবসাইটের মুদ্রণ মিডিয়ার জন্য সত্যই খারাপ স্টাইলশিট রয়েছে তবে তাদের স্ক্রিন স্টাইলশিটগুলি বেশ ভাল।
আমার ব্রাউজারকে মুদ্রণ স্টাইলশীট উপেক্ষা করার এবং স্ক্রীন স্টাইলশিট দিয়ে কেবল মুদ্রণ করার কোনও উপায় আছে কি?
আমি যখন ক্লায়েন্টদের দুজনের মধ্যে পার্থক্য দেখাতে চাই তখন আমি এটি করতে চাই।
উত্তর:
Chrome বিকাশকারী সরঞ্জাম ( Ctrl+ Shift+ I) ব্যবহার করা কেবলমাত্র আমি খুঁজে পেয়েছি যা কাজ করে।
media="screen"এবং সেই গুণটি মুছুন।media="print"এবং পুরো লিঙ্কটি মুছুন।এটি সাধারণত স্ক্রিন স্টাইলিং সহ পৃষ্ঠাটি দেয়।
আপনি যদি সত্যিই প্রিন্ট শৈলীগুলি অক্ষম করতে চান তবে আপনি ওয়েব বিকাশকারী এক্সটেনশনটি ইনস্টল করতে পারেন (আমি মনে করি ফায়ারফক্স এবং ক্রোমের একটি সংস্করণ রয়েছে)। মুদ্রণ শৈলী অক্ষম করার জন্য এটিতে একটি বোতাম রয়েছে। তবে এটি মুদ্রণের জন্য "স্ক্রিন" স্টাইলটি প্রসারিত করে না, তাই বেশিরভাগ সময় এটি আপনার আশা মতো কাজ করে না।
জেমস ধারণা অনুসরণ করে কিন্তু jQuery ব্যবহার:
$('*[media="screen"],*[media="print"]').attr('media', '')
পৃষ্ঠায় jQuery না থাকলে এটি ইনজেকশন করুন:
var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);
বিকাশকারী সরঞ্জামগুলিতে সরাসরি মিডিয়া এমুলেশন চয়ন করার জন্য একটি নতুন পদ্ধতি রয়েছে, https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/ দেখুন
লিওর একটি ভাল ধারণা ছিল, কিন্তু এটি জেমস যা বলেছিল তা পুরোপুরি করে না : এটি হওয়া উচিত
$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();
ইঙ্গিত: সহজ ব্যবহারের জন্য বুকমার্কলেট হিসাবে নিম্নলিখিতটি সংরক্ষণ করুন:
javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)
এই প্রিলোডটি jQuery প্রেরণ করে এবং এটি শেষ হওয়ার জন্য 2 সিসি অপেক্ষা করে, তবে এই অপেক্ষাটি যদি পর্যাপ্ত না হয় তবে কেবল আবার এটি চালান, এর মধ্যেই jQuery লোড করা উচিত ছিল।
আমি এটি Chrome এ করার একটি সহজ উপায় পেয়েছি ।
এমপুট সিএসএস মিডিয়াতে বিকাশকারী সরঞ্জাম> রেন্ডারিং> 'স্ক্রিন' নির্বাচন করুন খুলুন।
এখন মুদ্রণের চেষ্টা করুন। এটি প্রিন্ট সিএসএসের পরিবর্তে স্ক্রিন সিএসএস চয়ন করবে।
কিছু করতে জেমস বলেন ;)
আপনি ক্রোম বিকাশকারী সরঞ্জাম সেটিংস (ডান নীচের কোণায়) খোলার আউটপুটটি চেক করতে পারেন এবং "ওভাররাইডস" বিকল্পটি "সিএসএস মিডিয়া প্রিন্ট এমুলেট করুন" -দলটি বেছে নিতে পারেন। এই বিকল্পটি টগল করে আপনি মুদ্রণ এবং স্ক্রিন ভিউ তুলনা করতে পারেন। আনন্দ কর!
এই অ্যাডনটি ইনস্টল করুন: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk
এখন ব্যাকগ্রাউন্ড-চিত্র এবং রঙগুলিও মুদ্রিত হয়।
বাগ: সিএসএস স্প্রাইটসের সাথে কাজ করে না।
সম্পাদনা: ২০১৪ সালে ক্রোম মুদ্রণের ভিউ পরিবর্তন করেছে আমার মনে হয় তাই আপনার আর লিঙ্কযুক্ত অ্যাডন ব্যবহার করার দরকার নেই।
আমি কেবল একটি ওয়েবসাইট নিয়ে এই সমস্যায় পড়েছি যার একটি সিএসএস ফাইল ব্যবহার করে ছিল @media printএবং @media screenতাই পৃথক মুদ্রণ সিএসএস ফাইলটি অক্ষম করার সমাধানটি আমার পক্ষে কার্যকর হয়নি। পৃষ্ঠাটি দেখার সময় আমি অবশ্যই সিএসএস সম্পাদনা করতে এবং মুদ্রণ ব্লকটিতে মন্তব্য করতে পেরেছিলাম, তবে এই পরিবর্তনগুলি মুদ্রণ পূর্বরূপে নিয়ে যায় নি।
আমি যে সমাধানটি পেয়েছি সেটি হ'ল ফায়ারফক্স এবং ক্রোমের মুদ্রণ সম্পাদনা এক্সটেনশন । এটি আপনাকে মুদ্রণের আগেই পৃষ্ঠা সম্পাদনা করতে দেয় এবং পৃষ্ঠার জন্য ওয়েব স্টাইল ( @media screen) ব্যবহার করার জন্য একটি সাধারণ বোতাম অন্তর্ভুক্ত করে।
আমি যে স্কেলটি প্রিন্ট করছিলাম তা আমাকে কিছুটা বদলাতে হবে, যেহেতু মুদ্রণের পৃষ্ঠটি প্রায় 17: 17 অনুপাত, যখন আমার ব্রাউজারটি প্রায় 16: 9, তাই পৃষ্ঠার কিছু উপাদান অনুভূতভাবে কিছুটা ভিড় করে চলেছিল। আমাকে পৃথকভাবে পটভূমির রঙ এবং চিত্রগুলি মুদ্রণ করতে সক্ষম করতে হয়েছিল
কখনও কখনও ওয়েব সাইটগুলি সিএসএস ব্যবহার করে নির্দিষ্ট করে দেয় যে অনস্ক্রিনে এবং মুদ্রণের সময় বিভিন্ন স্টাইল ব্যবহার করা উচিত। এটি প্রায়শই ভাল, তবে এটি বিভ্রান্তিকর এবং সমস্যাযুক্তও হতে পারে। পৃষ্ঠার উত্স কোডটি পরীক্ষা করুন এবং এর মতো কিছু সন্ধান করুন:
@media print {
*:after {
color: #000 !important;
background: transparent !important;
}
এই সমস্যাটি সাধারণ হওয়ার একটি কারণ হ'ল জনপ্রিয় বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করে ওয়েব সাইটগুলি সর্বব্যাপী বুটস্ট্র্যাপ.মিন.সিএসএস ফাইল ব্যবহার করে , যা উপরে সিএসএস স্টাইল ধারণ করে।
মূল বিষয়টি হ'ল @media print। ওয়েব সাইটগুলির প্রায়শই জটিল কাঠামো থাকে এবং এটি স্থানীয়ভাবে পৃষ্ঠাটি সংরক্ষণ করতে এবং পুনরাবৃত্ত পাঠ্য-অনুসন্ধান সরঞ্জামের সাহায্যে এটি পরিদর্শন করতে সহায়তা করতে পারে।
আপনি যখন মনে করেন আপনি সিএসএস কোডে স্পটটি পেয়েছেন, আপনি পৃষ্ঠাটির বিকাশকারী বৈশিষ্ট্যগুলি ব্যবহার করে সরাসরি আপনার ব্রাউজারে পরিবর্তন করতে পারেন। (Chrome এ আপনি সেগুলি চালু করতে Ctrl+ Shift+ টিপুন I))
সিএসএস কোড সন্ধান করুন এবং সমস্যা তৈরির সারিগুলি সরিয়ে বা অকার্যকর করুন। "মুদ্রণ প্রাকদর্শন" ব্যবহার করে অপারেশনটি কাজ করেছে তা যাচাই করুন।
গ্রিসমোনকি অ্যাডন ইনস্টল করুন এবং নীচে দেওয়া স্ক্রিপ্টটি ব্যবহার করুন।
আমি এখানে পাওয়া একটি স্ক্রিপ্ট পরিবর্তন করেছি http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/
আমি শেষে "স্ক্রিন" কে "মুদ্রণ" এ পরিবর্তন করেছি (jQuery সম্পর্কে আমার কোনও ধারণা নেই, সুতরাং আমাকে কোনও প্রশ্ন জিজ্ঞাসা করবেন না) যাতে ফলস্বরূপ এটি স্ক্রিন সংস্করণটি প্রিন্টারে প্রেরণ করে। পিডিএফ প্রিন্ট করার সময়, (ফক্সিট বা নাইট্রো পিডিএফ প্রিন্টার ব্যবহার করে), আমি পৃষ্ঠার ধরণটি ল্যান্ডস্কেপ মোডে ট্যাবলয়েড অতিরিক্ততে সেট করেছি যাতে পিডিএফ আকারটি কমবেশি স্ক্রিনের আকারের সাথে মেলে। উপভোগ করুন! মনে রাখবেন, আমি প্রোগ্রামিং সম্পর্কে একটি জিনিস জানি না, তাই কৃতিত্ব মূল লেখকের কাছে যায়।
// ==UserScript==
// @name Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace netsi
// @match http://*/*
// @author Sten Hougaard
// @description Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==
// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
var script = document.createElement("script");
script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
script.addEventListener('load', function () {
var script = document.createElement("script");
script.textContent = "(" + callback.toString() + ")();";
document.body.appendChild(script);
}, false);
document.body.appendChild(script);
}
// the guts of this userscript
function main() {
var bPrint = (window.location.toString().indexOf('#print')!=-1);
if (bPrint) {
// The user wants to print this page
jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
jQuery('link[media*="print"]').remove(); // remove any styling related to print
}
}
// load jQuery and execute the main function
addJQuery(main);
জেমস অনুরূপ - ব্যবহার ক্রোম বিকাশকারী সরঞ্জাম মধ্যে "উত্স" ট্যাব, এবং প্রতিস্থাপন সমস্ত উদাহরণ media printদিয়ে media speech। সুতরাং নববার ইত্যাদি আড়াল করার জন্য সমস্ত CSS পরিবর্তনগুলি প্রিন্ট করার সময় প্রয়োগ করা হবে না (তবে পাঠ্য থেকে স্পিচ ব্যবহার করার সময় প্রয়োগ করা হবে)
এটি উপরের মতো JQuery এর সাথে করণীয়যোগ্য হতে পারে।
আমি সিএসএসের সিডিএন ব্যবহার করছি তাই কাস্টমাইজেশন ঠিক আছে
ম্যাকের জন্য এটির জন্য দুর্দান্ত সরঞ্জাম রয়েছে।
পাপারাজ্জি => ইউপিআরএল অনুলিপি করুন পাপারাজ্জি => চিত্র হিসাবে => পিডিএফ সংরক্ষণ করুন
(পিডিএফ রফতানিতে, এমনকি পাঠ্য নির্বাচনযোগ্য নয়, এটি কেবল একটি "চিত্র" নয়)
https://derailer.org/paparazzi/screenshots
উপভোগ করুন :-)
Delete This Node।