ফন্ট পার্সিং ও রাইটিংয়ের জন্য ফ্রি জাভাস্ক্রিপ্ট লাইব্রেরি
ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা ট্রু টাইপ বা ওপেনটাইপ ফন্ট পার্স, রিড এবং রাইট করতে সক্ষম। এটি জেএস অ্যাপের মধ্যে ফন্ট হ্যান্ডলিং, গ্লিফ মেট্রিক্স এবং টেক্সট লেআউট সমর্থন করে।
ওয়েব ডিজাইন ও ডেভেলপমেন্টের বিশাল রাজ্যে, টাইপোগ্রাফি সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা গঠনে গুরুত্বপূর্ণ ভূমিকা পালন করে। তবে, ওয়েবে টাইপোগ্রাফি নিয়ে কাজ করা নিজস্ব চ্যালেঞ্জ নিয়ে আসে। সৌভাগ্যবশত, opentype.js, একটি ওপেন-সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি, একটি শক্তিশালী টুল হিসেবে উদ্ভূত হয়েছে যা সফটওয়্যার ডেভেলপারদের ওয়েব অ্যাপ্লিকেশনে টাইপোগ্রাফির সম্ভাবনা নিয়ন্ত্রণ ও ব্যবহার করার ক্ষমতা প্রদান করে। লাইব্রেরিটি একটি সহজ ও স্বজ্ঞাত API সরবরাহ করে, যা সব স্তরের ডেভেলপারদের জন্য সহজলভ্য করে তোলে। এটি ডেভেলপারদের তাদের নির্দিষ্ট ডিজাইন প্রয়োজনীয়তার সাথে মানিয়ে নিতে এবং কাস্টমাইজ করার নমনীয়তা প্রদান করে।
Opentype.js আধুনিক ওয়েব ব্রাউজারগুলোর বিস্তৃত পরিসরে কাজ করে, যা টাইপোগ্রাফিক ফিচার বাস্তবায়নের জন্য একটি নির্ভরযোগ্য এবং সঙ্গতিপূর্ণ সমাধান প্রদান করে। লাইব্রেরির বেশ কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে, যেমন শক্তিশালী ফন্ট পার্সিং মেকানিজম, ফন্টের মধ্যে পৃথক গ্লিফের সাথে ইন্টারঅ্যাক্ট করা, জটিল টেক্সট লেআউট সাপোর্ট, বিভিন্ন ফন্ট রেন্ডারিং, ক্রস-ব্রাউজার সামঞ্জস্যতা, বিস্তারিত ফন্ট ডেটা বের করা, উন্নত টেক্সট লেআউট সাপোর্ট, পৃথক গ্লিফ অ্যানিমেট করা এবং আরও অনেক কিছু। এটি বিদ্যমান ওয়েব প্রযুক্তির সঙ্গে নিখুঁতভাবে সংহত হয় এবং HTML5 ক্যানভাস, SVG, অথবা CSS এবং জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের সঙ্গে মিলিয়ে ব্যবহার করা যায়।
Opentype.js হল একটি ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা ওয়েব ডেভেলপারদের OpenType ফন্টের সঙ্গে কাজ করতে দেয়, যা ব্যাপকভাবে ব্যবহৃত ফন্ট ফরম্যাট। OpenType ফন্টগুলি উন্নত টাইপোগ্রাফিক বৈশিষ্ট্য প্রদান করে, যেমন লিগেচার, কার্নিং, এবং গ্লিফ প্রতিস্থাপন, যা টেক্সটের ভিজ্যুয়াল আকর্ষণ এবং পাঠযোগ্যতা উল্লেখযোগ্যভাবে বৃদ্ধি করে। opentype.js ব্যবহার করে সফটওয়্যার ডেভেলপাররা এই বৈশিষ্ট্যগুলি উন্মুক্ত করতে এবং OpenType ফন্টের অন্তর্নিহিত ডেটা অ্যাক্সেস করতে পারে, যা তাদেরকে ওয়েবে ডাইনামিক এবং ইন্টারেক্টিভ টাইপোগ্রাফিক অভিজ্ঞতা তৈরি করতে সক্ষম করে। তা হোক টাইপোগ্রাফিক বিবরণ সূক্ষ্মভাবে টিউন করা বা জটিল টাইপোগ্রাফিক অ্যানিমেশন তৈরি করা, OpenType.js হল ডিজিটাল জগতে টাইপোগ্রাফির শিল্পের প্রতি উত্সাহী যে কারো জন্য অমূল্য একটি টুল।
Opentype.js দিয়ে শুরু করা
Opentype.js ইনস্টল করার সুপারিশকৃত পদ্ধতি হল npm ব্যবহার করা। আপনার প্রকল্পে মেভেন নির্ভরতা যোগ করতে দয়া করে নিম্নলিখিত কমান্ডটি ব্যবহার করুন।
npm এর মাধ্যমে Opentype.js ইনস্টল করুন
npm install opentype.jsআপনি ম্যানুয়ালি ইনস্টল করতেও পারেন; সর্বশেষ রিলিজ ফাইলগুলি সরাসরি GitHub রিপোজিটরি থেকে ডাউনলোড করুন।
JavaScript API মাধ্যমে ফন্ট ডেটা অ্যাক্সেস করা
OpenType.js এর প্রধান বৈশিষ্ট্যগুলোর একটি হল এটি কেবল কয়েকটি জাভাস্ক্রিপ্ট কোডের লাইনের মাধ্যমে বিস্তারিত ফন্ট ডেটা বের করতে সক্ষম। ওপেন সোর্স Opentype.js লাইব্রেরি তাদের জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনের মধ্যে ফন্ট সম্পর্কিত ডেটা লোড এবং অ্যাক্সেস করার জন্য সম্পূর্ণ কার্যকারিতা প্রদান করেছে। ডেভেলপাররা ফন্টের নাম, ডিজাইনারের তথ্য, গ্লিফের আকার, কার্নিং জোড়া এবং আরও অনেক বৈশিষ্ট্য অ্যাক্সেস করতে পারেন। এই তথ্য টাইপোগ্রাফির উপর সুনির্দিষ্ট নিয়ন্ত্রণ সম্ভব করে এবং সৃজনশীল পরীক্ষণকে সহজ করে। নিম্নলিখিত উদাহরণটি দেখায় কীভাবে জাভাস্ক্রিপ্ট কমান্ড ব্যবহার করে ফন্ট সম্পর্কিত ডেটা লোড এবং প্রদর্শন করা যায়।
JavaScript অ্যাপ্লিকেশনের মধ্যে ফন্ট সম্পর্কিত ডেটা কীভাবে প্রদর্শন করবেন?
function displayFontData() {
document.getElementById("font-data").innerHTML = JSON.stringify(font.tables, null, 4);
var html, tablename, table, property, value;
for(tablename in font.tables) {
table = font.tables[tablename];
html = '';
for(property in table) {
value = table[property];
html += ''+property+' ';
html += value;
html += ' ';
}
document.getElementById(tablename+"-table").innerHTML = html;
}
}
function onFontLoaded(font) {
@@ -331,6 +384,13 @@ ফ্রি সফটওয়্যার
fontSizeSlider.addEventListener('input', fontSizeChanged, false);
fontSizeSlider.addEventListener('change', fontSizeChanged, false);
var tableHeaders = document.getElementById('font-data').getElementsByTagName('h3');
for(var i = tableHeaders.length; i--; ) {
tableHeaders[i].addEventListener('click', function(e) {
e.target.className = (e.target.className === 'collapsed') ? 'expanded' : 'collapsed';
}, false);
}
opentype.load(fontFileName, function (err, font) {
var amount, glyph, ctx, x, y, fontSize;
if (err) {
showErrorMessage(err.toString());
return;
}
onFontLoaded(font);
});
JavaScript অ্যাপ্লিকেশনের মধ্যে ফন্ট খুলুন ও পার্স করুন
ওপেন সোর্স Opentype.js লাইব্রেরি সফটওয়্যার ডেভেলপারদেরকে তাদের নিজস্ব জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনের মধ্যে বিভিন্ন ধরনের ফন্ট লোড এবং রূপান্তর করতে সক্ষম করে। লাইব্রেরিটি একটি শক্তিশালী ফন্ট পার্সিং মেকানিজম প্রদান করে, যা ডেভেলপারদেরকে OpenType (WOFF, OTF, TTF) ফন্ট ফাইলগুলি তাদের ওয়েব অ্যাপ্লিকেশনে লোড করতে দেয়। ফন্ট লোড হওয়ার পরে, ডেভেলপাররা গ্লিফের আকার, মেট্রিক্স এবং মেটাডেটা সহ বিভিন্ন ফন্ট প্রপার্টি অ্যাক্সেস এবং পরিবর্তন করতে পারেন। নিম্নলিখিত উদাহরণটি দেখায় কীভাবে জাভাস্ক্রিপ্ট অ্যাপে WOFF, OTF, TTF ফন্টের মতো বিভিন্ন ধরনের ফন্ট লোড করা যায়।
JavaScript API মাধ্যমে WOFF বা TTF ফন্ট কীভাবে লোড করবেন?
// case 1: from an URL
const buffer = fetch('/fonts/my.woff').then(res => res.arrayBuffer());
// case 2: from filesystem (node)
const buffer = require('fs').promises.readFile('./my.woff');
// case 3: from an
const buffer = document.getElementById('myfile').files[0].arrayBuffer();
// if running in async context:
const font = opentype.parse(await buffer);
console.log(font);
// if not running in async context:
buffer.then(data => {
const font = opentype.parse(data);
console.log(font);
})
