ভেক্টর ইমেজ এডিটিং অ্যাপ Boxy SVG কীভাবে লোকাল ফন্ট অ্যাক্সেস API ব্যবহার করে ব্যবহারকারীদের তাদের পছন্দের স্থানীয় ফন্ট বাছাই করতে দেয়

স্থানীয় ফন্ট অ্যাক্সেস API ব্যবহারকারীর স্থানীয়ভাবে ইনস্টল করা ফন্ট ডেটা অ্যাক্সেস করার জন্য একটি প্রক্রিয়া প্রদান করে, যার মধ্যে উচ্চ-স্তরের বিশদ যেমন নাম, শৈলী এবং পরিবারগুলি, সেইসাথে অন্তর্নিহিত ফন্ট ফাইলগুলির কাঁচা বাইটগুলি অন্তর্ভুক্ত রয়েছে। SVG সম্পাদনা অ্যাপ Boxy SVG কীভাবে এই API ব্যবহার করে তা জানুন।

Thomas Steiner

Jarek Foksa

ভূমিকা

(এই নিবন্ধটি একটি ভিডিও আকারে উপলব্ধ।)

বক্সি এসভিজি একটি ভেক্টর গ্রাফিক্স সম্পাদক। এর প্রধান ব্যবহারের ক্ষেত্রে চিত্র, লোগো, আইকন এবং গ্রাফিক ডিজাইনের অন্যান্য উপাদান তৈরির জন্য SVG ফাইল বিন্যাসে অঙ্কন সম্পাদনা করা। এটি পোলিশ ডেভেলপার Jarosław Foksa দ্বারা বিকশিত হয়েছে এবং প্রাথমিকভাবে 15 মার্চ, 2013-এ প্রকাশিত হয়েছিল৷ Jarosław একটি Boxy SVG ব্লগ চালান যেখানে তিনি অ্যাপে যোগ করা নতুন বৈশিষ্ট্যগুলি ঘোষণা করেন৷ বিকাশকারী ক্রোমিয়ামের প্রজেক্ট ফুগুর একটি শক্তিশালী সমর্থক এবং এমনকি অ্যাপের আইডিয়া ট্র্যাকারে একটি ফুগু ট্যাগ রয়েছে৷

Boxy SVG-তে স্থানীয় ফন্ট অ্যাক্সেস API

একটি বৈশিষ্ট্য সংযোজন Jarosław ব্লগে স্থানীয় ফন্ট অ্যাক্সেস API . স্থানীয় ফন্ট অ্যাক্সেস API ব্যবহারকারীদের তাদের স্থানীয়ভাবে ইনস্টল করা ফন্টগুলি অ্যাক্সেস করতে দেয়, যার মধ্যে উচ্চ-স্তরের বিশদ যেমন নাম, শৈলী এবং পরিবারগুলি, সেইসাথে অন্তর্নিহিত ফন্ট ফাইলগুলির কাঁচা বাইটগুলি অন্তর্ভুক্ত রয়েছে। নিম্নলিখিত স্ক্রিনশটটিতে আপনি দেখতে পাচ্ছেন যে কীভাবে আমি আমার ম্যাকবুকে স্থানীয়ভাবে ইনস্টল করা ফন্টগুলিতে অ্যাপটিকে অ্যাক্সেস দিয়েছি এবং আমার পাঠ্যের জন্য মার্কার ফেল্ট ফন্টটি বেছে নিয়েছি।

অন্তর্নিহিত কোড বেশ সহজবোধ্য. ব্যবহারকারী যখন প্রথমবারের জন্য ফন্ট ফ্যামিলি পিকার খোলে, তখন অ্যাপ্লিকেশনটি প্রথমে চেক করে যে ওয়েব ব্রাউজার স্থানীয় ফন্ট অ্যাক্সেস API সমর্থন করে কিনা।

এটি API এর পুরানো পরীক্ষামূলক সংস্করণের জন্যও পরীক্ষা করে এবং উপস্থিত থাকলে এটি ব্যবহার করে। 2023 সাল পর্যন্ত, আপনি নিরাপদে পুরানো API উপেক্ষা করতে পারেন কারণ এটি পরীক্ষামূলক Chrome পতাকার মাধ্যমে অল্প সময়ের জন্য উপলব্ধ ছিল, কিন্তু কিছু Chromium-ডেরিভেটিভ এখনও এটি ব্যবহার করতে পারে।

let isLocalFontsApiEnabled = (
  // Local Font Access API, Chrome >= 102
  window.queryLocalFonts !== undefined ||
  // Experimental Local Font Access API, Chrome < 102
  navigator.fonts?.query !== undefined
);

স্থানীয় ফন্ট অ্যাক্সেস API উপলব্ধ না হলে, ফন্ট ফ্যামিলি পিকার ধূসর হয়ে যাবে। ফন্ট তালিকার পরিবর্তে ব্যবহারকারীর কাছে একটি স্থানধারক পাঠ্য প্রদর্শিত হবে:

if (isLocalFontsApiEnabled === false) {
  showPlaceholder("no-local-fonts-api");
  return;
}

অন্যথায়, অপারেটিং সিস্টেম থেকে সমস্ত ফন্টের তালিকা পুনরুদ্ধার করতে স্থানীয় ফন্ট অ্যাক্সেস API ব্যবহার করা হয়। try…catch ব্লক যা সঠিকভাবে অনুমতি ত্রুটিগুলি পরিচালনা করার জন্য প্রয়োজন।

let localFonts;

if (isLocalFontsApiEnabled === true) {
  try {
    // Local Font Access API, Chrome >= 102
    if (window.queryLocalFonts) {
      localFonts = await window.queryLocalFonts();
    }
    // Experimental Local Font Access API, Chrome < 102
    else if (navigator.fonts?.query) {
      localFonts = await navigator.fonts.query({
        persistentAccess: true,
      });
    }
  } catch (error) {
    showError(error.message, error.name);
  }
}

একবার স্থানীয় ফন্টের তালিকা পুনরুদ্ধার করা হলে, এটি থেকে একটি সরলীকৃত এবং স্বাভাবিক fontsIndex তৈরি করা হয়:

let fontsIndex = [];

for (let localFont of localFonts) {
  let face = "400";

  // Determine the face name
  {
    let subfamily = localFont.style.toLowerCase();
    subfamily = subfamily.replaceAll(" ", "");
    subfamily = subfamily.replaceAll("-", "");
    subfamily = subfamily.replaceAll("_", "");

    if (subfamily.includes("thin")) {
      face = "100";
    } else if (subfamily.includes("extralight")) {
      face = "200";
    } else if (subfamily.includes("light")) {
      face = "300";
    } else if (subfamily.includes("medium")) {
      face = "500";
    } else if (subfamily.includes("semibold")) {
      face = "600";
    } else if (subfamily.includes("extrabold")) {
      face = "800";
    } else if (subfamily.includes("ultrabold")) {
      face = "900";
    } else if (subfamily.includes("bold")) {
      face = "700";
    }

    if (subfamily.includes("italic")) {
      face += "i";
    }
  }

  let descriptor = fontsIndex.find((descriptor) => {
    return descriptor.family === localFont.family);
  });

  if (descriptor) {
    if (descriptor.faces.includes(face) === false) {
      descriptor.faces.push(face);
    }
  } else {
    let descriptor = {
      family: localFont.family,
      faces: [face],
    };

    fontsIndex.push(descriptor);
  }
}

for (let descriptor of fontsIndex) {
  descriptor.faces.sort();
}

সাধারণ ফন্টের সূচীটি তখন IndexedDB ডাটাবেসে সংরক্ষণ করা হয় যাতে এটি সহজে জিজ্ঞাসা করা যায়, অ্যাপের মধ্যে শেয়ার করা যায় এবং সেশনের মধ্যে সংরক্ষণ করা যায়। Boxy SVG ডাটাবেস পরিচালনা করতে Dexie.js ব্যবহার করে:

let database = new Dexie("LocalFontsManager");
database.version(1).stores({cache: "family"}).
await database.cache.clear();
await database.cache.bulkPut(fontsIndex);

একবার ডাটাবেস জনবহুল হয়ে গেলে, ফন্ট পিকার উইজেট এটিকে জিজ্ঞাসা করতে পারে এবং ফলাফলগুলি স্ক্রিনে প্রদর্শন করতে পারে:

এটা উল্লেখ করার মতো যে Boxy SVG তালিকাটিকে <bx-fontfamilypicker> নামে একটি কাস্টম উপাদানে রেন্ডার করে এবং প্রতিটি ফন্ট তালিকা আইটেমকে স্টাইল করে যাতে এটি নির্দিষ্ট ফন্ট পরিবারে প্রদর্শিত হয়। বাকি পৃষ্ঠা থেকে বিচ্ছিন্ন করতে, Boxy SVG এই এবং অন্যান্য কাস্টম উপাদানগুলিতে ছায়া DOM ব্যবহার করে।

উপসংহার

স্থানীয় ফন্ট বৈশিষ্ট্যটি সত্যিই জনপ্রিয় হয়েছে, ব্যবহারকারীরা তাদের ডিজাইন এবং সৃষ্টির জন্য তাদের স্থানীয় ফন্টগুলিতে অ্যাক্সেস উপভোগ করছেন। যখন API আকৃতি পরিবর্তিত হয় এবং বৈশিষ্ট্যটি সংক্ষিপ্তভাবে ভেঙে যায় , ব্যবহারকারীরা অবিলম্বে উল্লেখ করেন। Jarosław দ্রুত কোডটিকে প্রতিরক্ষামূলক প্যাটার্নে পরিবর্তন করতে চেয়েছিলেন যা আপনি উপরের স্নিপেটে দেখতে পাচ্ছেন যা আপ-টু-ডেট Chrome এবং অন্যান্য Chromium ডেরিভেটিভের সাথে কাজ করে যেগুলি হয়ত সর্বশেষ সংস্করণে স্যুইচ করেনি। একটি ঘূর্ণনের জন্য Boxy SVG নিন এবং আপনার স্থানীয়ভাবে ইনস্টল করা ফন্টগুলি পরীক্ষা করে দেখুন৷ আপনি Zapf Dingbats বা Webdings এর মত কিছু দীর্ঘ ভুলে যাওয়া ক্লাসিক আবিষ্কার করতে পারেন।