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

লেখকের অনুমতি নিয়ে বানান, ভাষারীতি, বিষয়ের  কিছু পরির্বতন ও ইংরেজী অনুবাদ করেছেন আলমগীর মোহাম্মদ।

মাইক্রোসফটের ওয়েবসাইট থেকে WEFT  টুলটি ডাউনলোড করে ইনস্টল করুন। WEFT  প্রোগ্রামটি চালু করলে সেটি প্রথমেই আপনার সিস্টেমের সব ফন্ট চেক করে একটি ডেটাবেজ তৈরি করবে। এরপর উইজার্ড চালু হবে। আপনি উইজার্ডটি বাতিল করে বের হয়ে যান, কেননা আমাদের কিছু প্রস্তুতি আছে।

আপনার C:\ ড্রাইভে Bangla নামে একটি ফোল্ডার তৈরী করুন। ফোল্ডারের ভিতর একটি টেক্সট ফাইল তৈরি করুন SolaimanLipi.txt নামে। (চিত্র -১)

EOT step1

চিত্র -১

ফাইলটি নোটপ্যাডে ওপেন করুন এবং চিত্র -২ এর মতো এইচটিএমএল কোডগুলি (বক্সগুলো না) লিখুন।

Step 3

চিত্র -২

এবার মাইক্রোসফট ওয়ার্ডে (চিত্র - ৩) অভ্র ব্যবহার করে সোলাইমানলিপি ফন্টে কিছু লিখুন। সেটা কপি করে নোটপ্যাডে এসে (চিত্র - ২) জায়গা মত পেস্ট করুন। টেক্সট ফাইলটিতে বাংলা লেখাগুলি বক্স আকারে দেখা যাবে। ফাইলটি সেভ করে ক্লোজ করুন।

step 2

চিত্র - ৩

এরপর, ফাইলটির এক্সটেনশন txt বদলে htm দিন। (চিত্র - ৪)

step 4

চিত্র - ৪

ফাইলটি চিত্র - ৫ এর মতো দেখাবে-

 step 5

চিত্র - ৫ 

এবার WEFT টুলটি রান করুন। টুলস মেনু থেকে 'Update Font Database' এ ক্লিক করুন। ফন্ট ডাটাবেজ আপডেট হবে, চিত্র - ৬।

step 6

চিত্র - ৬

View মেনুতে গিয়ে  'Available Fonts' এ ক্লিক করুন। আপনার সিস্টেমে থাকা সবগুলো ফন্টের একটা তালিকা দেখা যাবে। এই তালিকা থেকে বুঝা যাবে কোন ফন্টের EOT তৈরি করা যাবে এবং কোনটির যাবে না। আপনার কাঙ্খিত ফন্টটি তালিকায় সবুজ রং-এ আছে এটি নিশ্চিত হোন। এখানে দেখুন সোলাইমানলিপি ফন্টটি সবুজ দেখা যাচ্ছে, যেটি দিয়ে আমরা EOT বানাতে যাচ্ছি। চিত্র - ৭ দেখুন।
step 7

চিত্র - ৭

তবে চলুন EOT তৈরি শুরু করি।

টুলস মেনু থেকে উইজার্ড রান করুন।
প্রথম ধাপ: Welcome জানাবে, চিত্র - ৮।
step 8

চিত্র - ৮

Next >
Set User Information ডায়ালগ বক্স আসবে, চিত্র - ৯। এখানে আপনার নাম এবং ইমেইল এড্রেস লিখুন। মনে রাখবেন একবার যদি এই ফরমটি পূরণ করে থাকেন তবে, উইজার্ডের শুরুতে এ বক্সটি আর আসবে না।
 step 9

চিত্র - ৯

Next >
দ্বিতীয় ধাপ: এখানে যে এইচটিএমএল ফাইলটির সাহায্যে EOT করবেন তা দেখিয়ে দিতে হবে, চিত্র - ১০।
step 10

চিত্র - ১০

এখান থেকে ব্রাউজ করে (চিত্র - ১১) আপনার তৈরিকৃত এইচটিএমএল ফাইলটি দেখিয়ে দিন।
step11

চিত্র - ১১

Next >
তৃতীয় ধাপ: এখানে উইজার্ড আপনার পেজটির সঠিকতা যাচাই করে দেখবে, চিত্র - ১২।
 step12

চিত্র - ১২

একটি মেসেজ দেখাবে, চিত্র - ১৩। আপনার ফাইলটিতে মাল্টি-লিঙ্গুয়াল কনটেন্ট থাকার কারনে কোন কোন অপারেটিং সিস্টেমে অসুবিধা হতে পারে এমন মেসেজ দেখাচ্ছে। ইয়েস বাটনে ক্লিক করুন।
 step 13

চিত্র - ১৩

চতুর্থ ধাপ: এখানে সোলাইমানলিপি ফন্টটি দেখাচ্ছে, চিত্র - ১৪।
 step14

চিত্র - ১৪

এখানে Subsetting কী হবে তা বলে দিতে হবে। কম্বো বক্স থেকে Per site subsetting- সেট করুন, চিত্র - ১৫। তাহলে ক্লায়েন্ট যখন সাইটটি ভিজিট করবে তখন একবার মাত্র EOT তার কম্পিউটারে ডাউনলোড হবে। এরপর প্রতি পেজ ভিজিট করতে ক্লায়েন্টের আর কোন অসুবিধা হবে না। Per page subsetting সিলেক্ট করলে ক্লায়েন্টের প্রতিটি পেজের সঙ্গে EOT ডাউনলোড হতো। এতে অনেক সময় অপচয় হবে এবং আপনার সাইট ধীর গতির মনে হবে।
 step15

চিত্র - ১৫

এরপর দেখুন সোলাইমানলিপি ফন্টের ক্যারেক্টার ১৬টি দেখাচ্ছে। ফন্টের সবগুলো ক্যারেক্টার সিলেক্ট করা নাই। এর কারন, আপনি যে এইচটিএমএল ফাইল দিয়েছেন তাতে ফন্টের সবগুলো অক্ষর ব্যবহৃত হয়নি। আপনাকে সবগুলো অক্ষর সিলেক্ট করে নিতে হবে। ফন্টটি সিলেক্ট করুন এবং Subset বাটনে ক্লিক করুন। চিত্র - ১৬ এর মতো বক্সটি আসবে।

step16

চিত্র - ১৬

ড্রপ-ডাউন লিস্ট থেকে প্রতিটি ল্যাঙ্গুয়েজ সিলেক্ট করুন এবং সেই ল্যাঙ্গুয়েজ থেকে যে অক্ষরগুলি এই ফন্টে ব্যবহার হচ্ছে সেগুলো সিলেক্ট করে দিন। চিত্র - ১৭ দেখুন।
step17

চিত্র - ১৭

 বাংলা ফন্টগুলি প্রায় সবই ডিসিলেক্ট অবস্থায় ছিলো। সেগুলি সিলেক্ট করুন, চিত্র - ১৮।
 step18

চিত্র - ১৮ 

এখানে আপনাকে খুব সতর্কতার সাথে অক্ষর সিলেক্ট করতে হবে, চিত্র - ১৯। কোন প্রয়োজনীয় অক্ষর বাদ পড়লে, সেই অক্ষরের জন্য পেজে বক্স দেখাবে।
step19

চিত্র - ১৯ 

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

শেষ হলে ওকে করুন। এখানে দেখা যাচ্ছে (চিত্র - ২০) আমি ১১৫টি অক্ষর সিলেক্ট করেছি।
 step20

চিত্র - ২০

Next >

পঞ্চম ধাপ: ফন্ট অবজেক্ট বা EOT তৈরির জন্য সবকিছু প্রস্তুত হয়েছে। এখন প্রয়োজন কোন সাইটে এই EOT ব্যবহার হবে তা বলে দেয়া, চিত্র - ২১। ইচ্ছা করলে আপনি একাধিক সাইটের জন্য বলে দিতে পারেন। মনে রাখবেন এক সাইটের জন্য তৈরি EOT অন্য সাইটে ব্যবহার করা যাবে না যদি না এখানে বলে দেয়া থাকে।
step21

চিত্র - ২১

এডিট বাটনে ক্লিক করুন।
ওয়েব এড্রেস যুক্ত করুন। আমি এখানে ছয়টি ওয়েব সাইটে ব্যবহার করবো বলে ছয়টি সাইটকে যুক্ত করেছি, চিত্র - ২২।
step22

চিত্র - ২২ 

এখানে লক্ষ্য করুন (চিত্র - ২৩) আমি একটি সাইটকে দু'বার যুক্ত করেছি। একবার এভাবে http://www.shujan.org এবং অন্যবার এভাবে http://shujan.org
step23

চিত্র - ২৩ 

OK বাটনে ক্লিক করুন। চিত্র - ২৪ এর মতো ডায়ালগ আসবে।step24

চিত্র - ২৪

Next >
এখানে নিচের (চিত্র - ২৫) মেসেজটি দেখাবে। একটু অপেক্ষা করুন

step25

চিত্র - ২৫

আপনার EOT ফাইল তৈরি হয়েছে। এবার প্রজেক্টটিকে সেভ করতে পারেন। এখানে (চিত্র - ২৬) ডিফল্ট লোকেশন দেয়া আছে। ইচ্ছা করলে পরিবর্তন করতে পারেন।

step26

চিত্র - ২৬ 

Next >
সমাপ্ত দেখাবে, চিত্র - ২৭।

step27

চিত্র - ২৭

কীভাবে বুঝবেন EOT ফাইল তৈরি হয়েছে?

১. C:\Bangla বাংলা ফোল্ডারে যান (চিত্র - ২৮), দেখবেন আপনার এইচটিএমএল ফাইলটির পাশাপাশি EOT এক্সটেনশনের একটি নতুন ফাইল তৈরি হয়েছে।
step28

চিত্র - ২৮

 

২. নোটপ্যাডের সাহায্যে আপনার SolaimanLipi.htm ফাইলটি খুলুন, চিত্র - ২৯। লক্ষ্য করুন, টাইটেলের পরে স্টাইল ট্যাগে কিছু বাড়তি তথ্য যোগ হয়েছে। এই তথ্য যোগ হওয়ার ফলে বোঝা যাচ্ছে আপনি EOT ফাইলটি সফলভাবে তৈরি করতে পেরেছেন।

step29

চিত্র - ২৯

কীভাবে আপনার ওয়েবসাইটে EOT ব্যবহার করবেন?

১. 'eot' এবং 'htm' ফাইল দুইটি কপি করুন, আপনার সাইটের রুটে পেস্ট করুন। এফটিপি ব্যবহার করে আপলোডও করতে পারেন।
২. যে সব পেজে সোলাইমানলিপি ফন্টটি ব্যবহার করতে চান তার প্রতিটি পেজটি ওপেন করুন। সোর্স কোডে </TITLE> - এর পর এবং </HEAD> - এর আগে <STYLE> ... </STYLE> কোডগুলি জুড়ে দিন যেগুলি আপনার solaimanlipi.htm ফাইলটিতে তৈরি হয়েছিলো। এভাবে আপনি যেসব পেজে বাংলা ব্যবহার করবেন সেই পেজগুলিতে কোডগুলি কপি-পেস্ট করলেই চলবে।  


কাজ শেষ। এখন আপনার পেজে বাংলা লেখা থাকলে ক্লায়েন্টের দেখতে কোন অসুবিধা হবে না। তবে বাংলা পেজ ডেভেলপ করার পর বাংলা (ইউনিকোড) ফন্ট নেই এমন একটি কম্পিউটার থেকে চেক করা খুবই প্রয়োজন। তবে মনে রাখতে হবে EOT মাইক্রোসফটের একার প্রযুক্তি বলে শুধু ইন্টারনেট এক্সপ্লোরারে কাজ করে। মোজিলা, নেটস্ক্যাপ বা অপেরাতে EOT সমর্থন করে না। এসব ব্রাউজারের বেলায় আপনাকে মূল  ফন্ট ডাউনলোডের সুবিধা রাখতে হবে। তবে উইন্ডোজ ২০০০ এর পরের সব ভার্শনেই ইউনিকোড আছে বলে কেবল ৯৮ বা এমই এর জন্য হয়ত আর বেশী দিন EOT তৈরী করতে হবে না। তখন এই গাইডটিরও প্রয়োজনীয়তা শেষ হয়ে যাবে।

Dynamic font (EOT) with Joomla

Joomla is independent of any type of font, and all issues of typography have been put into what is called template or theme. Default Joomla installation may have one or two templates. Third-party commercial and free templates for joomla are also available. To use EOT font with Joomla, first you have to decide on the template. Whatever is the template you would find a folder of that name in templates folder of Joomla installation. For example, Joomla.org.bd has js_simplicity as the default template. In templates/js_simplicity folder you should expect these files/folder:

  • index.php
  • templateDetails.xml
  • template_thumbnail.png
  • css/template_css.css
  • images/ lots of names the template uses

To put the dynamic font, you need to add the dynamic font declaration statement.

<style type="text/css">
<!-- EOT stuff
@font-face{
font-family:SolaimanLipi;
font-style:normal;
font-weight:normal;
src:url(solaima0.eot);
}
-->
</style>


Now you can put this font in your class id's. For this, you have to edit the font-family tags in the CSS file.

 
 
Template by Joomlashack