HTML পেস্ট করুন এবং যেকোনো স্ক্রিন উইডথে লাইভ রেন্ডার হতে দেখুন - তারপর এটি সাজিয়ে নিন, ছোট করুন বা সমস্যা পরীক্ষা করুন।
এলিমেন্ট সংখ্যা, হেডিং আউটলাইন এবং মার্কআপের সমস্যার তালিকা দেখতে Inspect চাপুন।
স্ক্রিপ্ট চালানোর অনুমতি থাকলে প্রিভিউ থেকে কনসোল আউটপুট এখানে দেখায়।
একটি ইমেল টেমপ্লেট, কোনো টিকিট থেকে নেওয়া একটি অংশ, একটি এক্সপোর্ট করা রিপোর্ট: কখনো কখনো শুধু দেখতে হয় এক টুকরো HTML দেখতে কেমন। পেস্ট করুন, টাইপ করার সঙ্গে সঙ্গে এটি একটি সুরক্ষিত ফ্রেমের ভেতরে, আপনার বেছে নেওয়া স্ক্রিন প্রস্থে রেন্ডার হবে। প্রিভিউয়ের পাশে আপনি এটি গুছিয়ে নিতে, ছোট করতে, কনসোলসহ এর স্ক্রিপ্ট চালাতে এবং মার্কআপে আসলে কী ভুল আছে তার তালিকা দেখতে পারেন।
পেস্ট করা HTML-এ এমন স্ক্রিপ্ট, ফর্ম ও লিংক থাকতে পারে যা আপনি লেখেননি। প্রিভিউ নিজস্ব opaque origin সহ একটি sandbox iframe-এ চলে, তাই এর ভেতরের কিছুই এই সাইটের কুকি বা আপনার সেশন পড়তে পারে না, আপনার হয়ে কোথাও কিছু জমা দিতে পারে না, বা এই পেজকে অন্য কোথাও সরিয়ে নিতে পারে না। আপনি চালু না করা পর্যন্ত স্ক্রিপ্ট বন্ধ থাকে।
এটি একটি মানক HTML পার্সার দিয়ে মার্কআপ পড়ে এবং শুধু যা দেখেছে তা-ই জানায়: খোলা কিন্তু কখনো বন্ধ না হওয়া ট্যাগ, খোলা ট্যাগ ছাড়া বন্ধ ট্যাগ, alt টেক্সট ছাড়া ছবি, একই id একাধিকবার, rel="noopener" ছাড়া নতুন ট্যাব খোলা লিংক, বাদ পড়া হেডিং লেভেল, http:// দিয়ে লোড হওয়া রিসোর্স, এবং পূর্ণ পেজে doctype, title, lang বা viewport ট্যাগের অনুপস্থিতি।
এটি ভুল জানায়, স্টাইল নয়। যে ক্লোজিং ট্যাগ HTML স্ট্যান্ডার্ড বাদ দিতে দেয়, যেমন </p>, </li>, </td>, </tr> ও </option>, সেগুলো কখনো বন্ধ-না-করা হিসেবে তালিকায় আসে না, আর <br>, <img> ও <input>-এর মতো খালি এলিমেন্টের ক্লোজিং ট্যাগ লাগে না। খালি alt="" অল্ট টেক্সট হিসেবে গণ্য হয়, যা সাজসজ্জার ছবির জন্য ঠিক। target="_blank" থাকা লিংক rel="noopener" বা rel="noreferrer" থাকলে পাস করে। <a href>-এ সাধারণ http:// লিংক অনিরাপদ গণ্য হয় না; শুধু লোড হওয়া রিসোর্স, যেমন ছবি, স্ক্রিপ্ট, স্টাইলশিট ও iframe গণ্য হয়। হেডিং লেভেলে আবার ওপরে যাওয়া (h4 থেকে h2) ঠিক আছে; শুধু একটি লেভেল বাদ দিয়ে নিচে লাফ (h2 থেকে h4) জানানো হয়। doctype, title, lang ও viewport পরীক্ষা তখনই চলে যখন পেস্ট করা অংশটি পুরো পেজ, অর্থাৎ তাতে doctype বা html, head বা body ট্যাগ আছে, তাই ইমেলের একটি ব্লক বা CMS স্নিপেট এগুলোর জন্য নম্বর হারায় না।
প্রথমে ফোন প্রস্থে (375 px) দেখুন, কারণ অনেকেই ফোনে ইমেল খোলেন, তারপর ট্যাবলেট (768 px) ও ডেস্কটপ (1280 px)-এ। স্ক্রিপ্ট বন্ধ রাখুন: ইমেল অ্যাপ JavaScript চালায় না, তাই স্ক্রিপ্ট ছাড়া প্রিভিউ পাঠক যা দেখবেন তার কাছাকাছি। ছবির জন্য https:// দিয়ে পূর্ণ URL দিন, কারণ প্রিভিউ বা প্রাপকের মেল অ্যাপ কেউই আপনার কম্পিউটারের ফাইল দেখতে পায় না। মিনিফাই সাধারণ কমেন্ট মুছে দেয়, তবে <!--[if দিয়ে শুরু হওয়া কন্ডিশনাল কমেন্ট রাখে, যেমন <!--[if mso]> ... <![endif]-->। <!--[if !mso]><!--> প্যাটার্নের <!--<![endif]--> ক্লোজার এটি রাখে না, তাই এই প্যাটার্ন থাকা টেমপ্লেট মিনিফাই করবেন না, নইলে Outlook তার পরের সবকিছু লুকিয়ে ফেলতে পারে। প্রিভিউ একটি ব্রাউজার রেন্ডার; ক্লাসিক Windows Outlook ইমেল Word ইঞ্জিনে আঁকে, তাই বড় মেইলিংয়ের আগে সেখানে নিজেকে একটি টেস্ট পাঠান।
প্রিভিউ, বিউটিফাই ও মিনিফাই আপনার ব্রাউজারেই হয়। শুধু পরিদর্শন রিপোর্ট মার্কআপ সার্ভারে পাঠায়, সেখানে পার্স করে একই রেসপন্সে উত্তর ফেরত দেওয়া হয়: ডিস্কে কিছু লেখা হয় না, কিছু লগ হয় না, আর ব্যবহারের রেকর্ডে শুধু সংখ্যা থাকে।
পেস্ট করা কোড বিশ্বাসযোগ্য নয়, তাই স্ক্রিপ্ট ডিফল্টভাবে বন্ধ থাকে। "স্ক্রিপ্ট চালান" টিক দিন, প্রিভিউ JavaScript চালু অবস্থায় আবার লোড হবে, তখনও স্যান্ডবক্সের ভেতরেই, এবং কনসোল আউটপুট প্রিভিউয়ের নিচে দেখা যাবে।
প্রিভিউ তৈরি হয় পেস্ট করা টেক্সট থেকে, আপনার কম্পিউটার বা সার্ভার থেকে নয়, তাই images/logo.png-এর মতো রিলেটিভ পাথ এই সাইটে খোঁজা হয় এবং পাওয়া যায় না। অ্যাবসোলিউট URL ব্যবহার করুন, অথবা ফাইলগুলো আসলে যেখানে আছে সেদিকে নির্দেশ করে এমন একটি <base href="..."> ট্যাগ যোগ করুন।
এটি শুধু ট্যাগের মাঝে ইনডেন্টেশন নতুন করে সাজায় এবং pre, textarea, script ও style-এর বিষয়বস্তু অপরিবর্তিত রাখে। ইনলাইন এলিমেন্টের মাঝের ফাঁকা জায়গা মাঝে মাঝে সামান্য সরে যেতে পারে, তাই ফরম্যাট করার পর প্রিভিউ দেখে নিন।
পরিদর্শন রিপোর্ট 1,000,000 অক্ষর পর্যন্ত নেয় এবং সর্বোচ্চ 200টি সমস্যা দেখায়। টাইপিং মসৃণ রাখতে 200,000 অক্ষরের বেশি হলে লাইভ প্রিভিউ থেমে যায়; হালনাগাদ করতে রিফ্রেশ বা Ctrl+Enter চাপুন।
হ্যাঁ। ইমেলের HTML পেস্ট করুন বা .html ফাইলটি খুলুন, দুই লেআউট দেখতে প্রস্থ ফোন (375 px) ও ডেস্কটপ (1280 px)-এ বদলান, আর alt টেক্সট ছাড়া ছবি ও এনক্রিপশনহীন http:// দিয়ে লোড হওয়া রিসোর্স খুঁজতে Inspect চাপুন। প্রিভিউ আপনার ব্রাউজারের ইঞ্জিন ব্যবহার করে, কিন্তু প্রতিটি ইমেল ক্লায়েন্টের নিজস্ব ইঞ্জিন আছে এবং অনেকেই CSS-এর কিছু অংশ বাদ দেয়। তাই এটি মোটামুটি ব্রাউজারে খোলা ওয়েবমেল যা দেখায় তা দেখায়, প্রতিটি ইনবক্সে হুবহু একই নয়। ইমেল ক্লায়েন্ট JavaScript চালায় না, তাই স্ক্রিপ্ট চালান বন্ধ রাখুন। আসল পাঠানোর আগে আপনার পাঠকেরা যেসব ক্লায়েন্ট ব্যবহার করেন সেগুলোতে একটি টেস্ট ইমেল পাঠান।
সরাসরি খোলার চেয়ে বেশি নিরাপদ। ফাইল খুলুন সেটি আপনার ব্রাউজারের এডিটরে লোড করে, আর Inspect না চাপলে সার্ভারে কিছুই যায় না। প্রিভিউ একটি আলাদা স্যান্ডবক্স ফ্রেমে চলে যেখানে স্ক্রিপ্ট ও ফর্ম পাঠানো বন্ধ থাকে, তাই পেজটি কোড চালাতে, ফর্ম পাঠাতে বা এই সাইটের কুকিতে পৌঁছাতে পারে না। পূর্ণ http(s) ঠিকানার ছবি ও স্টাইলশিট তবুও লোড হয়, তাই প্রেরক জানতে পারেন ফাইলটি খোলা হয়েছে। আগে কোড পড়ুন, স্ক্রিপ্ট চালান বন্ধ রাখুন এবং পাঠানো কোনো পেজে কখনো পাসওয়ার্ড লিখবেন না।
ফাইল খুলুন সবসময় ফাইলটিকে UTF-8 হিসেবে পড়ে এবং ভেতরের <meta charset> ট্যাগ উপেক্ষা করে। Windows-1252 বা ISO-8859-1 এ সেভ করা পেজ, যা পুরোনো Windows এডিটর ও এক্সপোর্টে সাধারণ, é, ü ও £ এর মতো অক্ষর এমন বাইটে রাখে যা বৈধ UTF-8 নয়, তাই প্রতিটি অক্ষর রিপ্লেসমেন্ট ক্যারেক্টার � হিসেবে দেখায়। ফাইলটি আপনার এডিটরে খুলুন, আবার UTF-8 এ সেভ করুন (Notepad: Save as, Encoding UTF-8; VS Code: স্ট্যাটাস বারে এনকোডিংয়ে ক্লিক করে Save with Encoding) এবং এখানে আবার খুলুন। অথবা ফাইলটি ব্রাউজারে খুলে তার সোর্স দেখে এখানে পেস্ট করুন, কারণ ব্রাউজার পেজের নিজের charset দিয়ে সেটি আগেই ডিকোড করেছে।
স্যান্ডবক্স কখনো ফর্ম জমা দেওয়া বা পপ-আপের অনুমতি দেয় না, স্ক্রিপ্ট চালান চালু থাকলেও না, তাই সাবমিট চাপলে কিছুই পাঠানো হয় না এবং target="_blank" লিংক ও window.open() কল ব্লক হয়। এতে পেস্ট করা পেজ ডেটা পাঠাতে বা অন্য সাইট খুলতে পারে না। সাধারণ লিংক প্রিভিউ ফ্রেমের ভেতরেই খোলে, আর যে সাইট ফ্রেমে দেখাতে দেয় না সেগুলো সেখানে ফাঁকা বা প্রত্যাখ্যাত দেখায়। কোনো ফর্ম যাচাই করতে সোর্সে তার action, method ও ফিল্ড পড়ুন; Inspect প্রতিটি rel="noopener" ছাড়া target="_blank" লিংকের তালিকাও দেয়। আসল সাবমিশন নিজের ডেভেলপমেন্ট সার্ভারে পরীক্ষা করুন।