ওয়েবসাইটে বাংলা লেখা দেখানো

আপনার ওয়েবসাইটে বাংলা লেখা ঠিকমতো দেখাতে চান? সাধারণ হিসাবে ইউনিকোডে বাংলা লিখলেই তা ওয়েবসাইটে বাংলায় দেখানোর কথা। কিন্তু সমস্যা হলো যে যেকোন ফন্টে বাংলা লেখা দেখালেই তা ঠিকমতো দেখায় না। ধরা যাক SutonnyMJ ফন্টে বাংলা লেখা সুন্দর করে দেখায়। এবং আপনি আপনার ওয়েবসাইটের স্টাইলেও এই ফন্ট ব্যবহার করতে বললেন। কিন্তু যে ব্যক্তি আপনার এই ওয়েবসাইটটি ব্রাউজ করছে, তার কম্পিউটারে যদি এই ফন্টটি না থাকে, তাহলে তার ব্রাউজার SutonnyMJ-এর পরিবর্তে অন্য কোন ডিফল্ট ফন্টে এই বাংলা লেখাটি দেখাবে, এবং বেশিরভাগ ক্ষেত্রেই বাংলা লেখাটির ফরম্যাট আর পাঠযোগ্য থাকবে না। এই সমস্যা সমাধানের জন্য আপনাকে এমন ব্যবস্থা নিতে হবে যেন আপনার ওয়েবসাইট থেকেই ক্লায়েন্টের ব্রাউজারে সঠিক ফন্টটি পাঠানো হয়, এবং সেই ফন্টে লেখাটি দেখানোর ব্যবস্থা করা হয়। বেশিরভাগ ফন্টই হলো .ttf বা ট্রু টাইপ ফন্ট। কিন্তু সব ব্রাউজার আবার সব ফরম্যাটের ফন্ট সাপোর্ট করে না। তাই আপনার ওয়েবসাইট ক্লায়েন্টের কাছে SutonnyMJ.ttf ফন্টটি পাঠালেই যে সব ব্রাউজার সেটা ঠিকমতো দেখাতে পারবে তেমন কোন গ্যারান্টি নেই।  অতএব, ওয়েবসাইটে ঠিকমতো বাংলা লেখা দেখানো একটু ঝামেলারই বটে। তারপরেও অনেক অনেক বাংলা ব্লগ, সংবাদপত্র ও অন্যান্য বাংলা ওয়েবসাইট আছে যারা সুন্দরমতো বাংলা দেখাচ্ছে। আর কিভাবে সেটা দেখানো যায়, তার উপরেই এই ব্লগে আলোকপাত করা হবে। ব্লগের বিষয়বস্তু বুঝার জন্য আপনার HTML, CSS ইত্যাদি সম্পর্কে মোটামুটি ধারণা থাকতে হবে।


১) ফন্ট বাছাই

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

http://www.pallab.com/fonts/adorsholipi.ttf


২) ওয়েবভিত্তিক ফন্টে কনভার্ট করা

এখন আপনি যদি আপনার ওয়েবসাইটে আদর্শলিপি ফন্টটি ব্যবহার করেন, তবে শুধুমাত্র যাদের কম্পিউটারে আগে থেকেই এই ফন্ট ইনস্টল করা ছিলো তারাই কেবল এই ফন্টে লেখাটি দেখতে পারবে। আর যাদের কম্পিউটারে এই ফন্ট নেই, তারা অন্য কোন ফন্টে লেখাটি দেখবে, যা দেখতে সুবিন্যস্ত নাও হতে পারে। তাই ওয়েবসাইট থেকেই যেন ফন্টটি ব্যবহারকারীর কম্পিউটারে ডাউনলোড হয়ে ঠিকমতো লেখাটি দেখায় সে ব্যবস্থা করতে হবে। সব ব্রাউজার সরাসরি .ttf ফন্ট ডাউনলোড করে তার উপর ভিত্তি করে লেখা দেখাতে পারে না। বিভিন্ন ব্রাউজার বিভিন্ন ফরম্যাটের ফন্ট সাপোর্ট করে। ওয়েবসাইটটি যেন যেকোন ব্রাউজারেই ঠিকমতো দেখায় সেজন্য ওয়েবসাইটে .ttf ফন্টের পাশাপাশি .woff, .eot ও .svc ফরম্যাটেও ফন্টটি রাখতে হবে। ফন্ট কনভার্ট করার অনেক ওয়েবসাইট আছে যেখানে গিয়ে আপনি আদর্শলিপির .ttf ফন্টটি দিয়ে তা কনভার্ট করে .woff, .eot ও .svc ফন্ট তৈরি করতে পারবেন। এমন কিছু সাইটের লিঙ্ক নিচে দিলাম।

http://www.font2web.com/
http://www.ittefaq.com.bd/apps/weblitenew/index.php?ref=MjBfMDhfMjNfMTNfMV8xXzFfNjU3MjY=

কনভার্ট করার পর আপনার কাছে এখন নিচের এই চারটি ফাইল আছে।

adorsholipi.ttf
adorsholipi.woff
adorsholipi.eot
adorsholipi.svc


৩) ওয়েবসাইটে ফন্ট যোগ করা

যে ওয়েবসাইটে আপনি বাংলা লেখা দেখাতে চান তার রুটে আপনি fonts নামে একটি ফোল্ডার তৈরি করে সেখানে এই চার ফরম্যাটের ফন্ট রাখুন। এবার ওয়েবসাইটের CSS ফাইলে গিয়ে নিচের কোডগুলো একেবারে উপরের দিকে যোগ করে দিন।

@font-face {
   font-family: 'Adorsho';
   src: url('/fonts/adorsholipi.eot');
   src: url('/fonts/adorsholipi.woff') format('woff'),
        url('/fonts/adorsholipi.ttf') format('truetype'),
        url('/fonts/adorsholipi.svg#adorsholipi') format('svg');
   font-weight: normal;
   font-style: normal;
}

এখন ওয়েবপেইজের যেসব ট্যাগের ভিতর আপনি বাংলা দেখাবেন সেখানে font-family:'Adorsho' দিতে হবে। অথবা পুরো ওয়েবসাইটটি এই ফন্টে দেখাতে চাইলে CSS ফাইলে গিয়ে body ট্যাগের ভিতর এই ফন্টটি যোগ করে দিয়ে আসুন নিচের কোড অনুযায়ী।

body {
   font-family: 'Adorsho';
}

৪) সার্ভার সেটিংস

এখন ইন্টারনেট এক্সপ্লোরার থেকে যখন ওয়েবসাইটটি ব্রাউজ করা হবে তখন ব্রাউজার .eot ফাইলটি ডাউনলোড করে ঠিকমতো বাংলা ফন্টটি দেখাবে। ফায়ারফক্স থেকে ব্রাউজ করলে .ttf ফাইল ডাউনলোড করেই সে ঠিকমতো বাংলা দেখাতে পারবে। গুগল ক্রোম থেক ব্রাউজ করতে গেলে এটি .woff ফাইলটি ডাউনলোড করে বাংলা দেখানোর চেষ্টা করবে। কিন্তু সার্ভার যদি .woff এক্সটেনশনটি চিনতে না পারে, তাহলে ব্রাউজার এই ফাইলটি ডাউনলোড করতে পারবে না। সেজন্য ওয়েবসার্ভারে গিয়ে ওয়েবসাইটের প্রপার্টিতে গিয়ে MIME টাইপ হিসাবে .woff যোগ করে দিয়ে আসতে হবে। আপনি যদি উইন্ডোজের IIS সার্ভার ব্যবহার করে থাকেন, তবে IIS-এ গিয়ে বাম পাশের প্যানেলে ওয়েবসাইটটি সিলেক্ট করুন ক্লিক করে। মাঝখানের প্যানেলে IIS সেকশনে MIME Types-এ ক্লিক করুন। এবার ডানপাশের প্যানেল থেকে Add... এ ক্লিক করে .woff এক্সটেনশনটি যোগ করুন। নতুন MIME টাইপ যোগ করার বক্সে -

File name extension-এ দিতে হবে .woff
MIME type-এ দিতে হবে application/x-font-woff

এখন ক্রোম থেকে ব্রাউজ করলে সার্ভার থেকে .woff ফন্টটি ঠিকমতো ডাউনলোড হবে এবং বাংলা ঠিকমতো দেখাবে।

৫) পরিশেষে

এতে করে উইন্ডোজ কম্পিউটারের সব ব্রাউজারে বাংলা সুন্দরমতো দেখালেও Apple-এর কম্পিউটার বা আইফোন/আইপ্যাডের সাফারি ব্রাউজারে বাংলা লেখা ভেঙ্গে ভেঙ্গে আসবে। তাই ওয়েবসাইটে কোডিং-এর মাধ্যমে নিশ্চিত করতে হবে যেন CSS ফাইলে @font-face অংশটুকু সাফারি ব্রাউজার হলে যোগ না করে।