তরল সুপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্ট | CSS-কৌশল

সুপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্টগুলি একাডেমিক এবং বৈজ্ঞানিক বিষয়বস্তুর অপরিহার্য উপাদান – উদ্ধৃতি রেফারেন্স থেকে রাসায়নিক সূত্র এবং গাণিতিক অভিব্যক্তি। তবুও ব্রাউজারগুলি এই উপাদানগুলিকে একটি স্থির পদ্ধতির সাথে পরিচালনা করে যা উল্লেখযোগ্য সমস্যা তৈরি করতে পারে: উপাদানগুলি হয় মোবাইল ডিভাইসে খুব ছোট হয়ে যায় বা ডেস্কটপ প্রদর্শনে অসামঞ্জস্যপূর্ণভাবে বড় হয়৷

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

স্ট্যাটিক স্কেলিং সঙ্গে সমস্যা

ব্রাউজার ডিফল্টের সাথে পেশাদার টাইপোগ্রাফির তুলনা করার সময় স্কেলিং সমস্যাটি বিশেষভাবে স্পষ্ট হয়। এই উদাহরণটি নিন (উইকিপিডিয়া থেকে অভিযোজিত), যেখানে প্রথম “2” পেশাদারভাবে ডিজাইন করা হয়েছে এবং গ্লিফ সেটে অন্তর্ভুক্ত করা হয়েছে, যখন দ্বিতীয়টি ব্যবহার করে <sub> (শীর্ষ) এবং <sup> (নীচে) উপাদান:

ব্রাউজার ঐতিহাসিকভাবে ব্যবহার করা হয়েছে font-size: smaller জন্য <sup> এবং <sub> উপাদান, যা প্রায় 0.83x স্কেলিং-এ অনুবাদ করে। যদিও এটি সাধারণ নথিগুলির জন্য CSS-এর প্রথম দিনগুলিতে উপলব্ধি করেছিল, এটি আধুনিক প্রতিক্রিয়াশীল ডিজাইনগুলিতে সমস্যা তৈরি করতে পারে যেখানে ফন্টের আকার নাটকীয়ভাবে পরিবর্তিত হতে পারে। এটি ব্যবহার করার সময় বিশেষভাবে সত্য তরল টাইপোগ্রাফিযেখানে পাঠ্যের আকারগুলি চরমগুলির মধ্যে মসৃণভাবে স্কেল করতে পারে।

তরল স্কেলিং: একটি ভাল সমাধান

আমি একটি সমাধান তৈরি করেছি যা স্থির এবং আনুপাতিক একককে একত্রিত করে বিভিন্ন আকার জুড়ে আরও স্বাভাবিকভাবে স্কেল করে। প্রসঙ্গ-নির্দিষ্ট সামঞ্জস্যের প্রয়োজনীয়তা দূর করে, বড় আকারে যথাযথ অনুপাত বজায় রাখার সময় এই পদ্ধতিটি ছোট আকারে স্পষ্টতা নিশ্চিত করে।

এটি কিভাবে কাজ করে তা এখানে:

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* Simplified top: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* Simplified top: calc(0.42em - 1.66px) */
}

• প্রাকৃতিক স্কেলিং: অবনতিশীল সূত্র নিশ্চিত করে যে সুপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্ট সব আকারে সমানুপাতিক থাকে
• বেসলাইন প্রান্তিককরণ: ব্যবহার করে vertical-align: baseline এবং আপেক্ষিক অবস্থান, আমরা উপাদানগুলিকে লাইনের উচ্চতা প্রভাবিত করতে বাধা দিই এবং এটি আমাদের আপনার নির্দিষ্ট চাহিদা মেলে অফসেটের উপর আরও ভাল নিয়ন্ত্রণ দেয়। আপনি সম্ভবত ভাবছেন যে এই মানগুলি কোথা থেকে এসেছে — আমি নিম্নলিখিতটিতে ব্যাখ্যা করব।

গণিত ভেঙে ফেলা

আসুন দেখুন কিভাবে এটি কাজ করে, টুকরো টুকরো:

ফন্টের আকার গণনা করা হচ্ছে (px)

ছোট আকারে, নির্দিষ্ট 4px উপাদান আরো প্রভাব আছে. বড় আকারে, 0.5em অনুপাত প্রভাবশালী হয়ে ওঠে। ফলাফল সব মাপ জুড়ে আরো প্রাকৃতিক স্কেলিং হয়.

sup, sub {
  font-size: calc(0.5em + 4px);
  /* ... */
}

sub { 
  /* ... */
}

মূল ফন্টের আকার গণনা করা হচ্ছে (em)

মধ্যে <sup> এবং <sub> উপাদান, আমরা পিতামাতার গণনা করতে পারেন font-size:

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(2 * (1em - 4px));
}

sub { 
  top: calc(2 * (1em + 4px));
}

তরল ফন্ট আকার হিসাবে সংজ্ঞায়িত করা হয় calc(0.5em + 4px). জন্য ক্ষতিপূরণ 0.5emআমাদের প্রথমে সমাধান করতে হবে 0.5em * x = 1em যা আমাদের দেয় x = 2. দ 1em এখানে ফন্ট সাইজ প্রতিনিধিত্ব করে <sup> এবং <sub> উপাদান নিজেদের। আমরা বিয়োগ 4px আমাদের বর্তমান থেকে নির্দিষ্ট উপাদান em গুণ করার আগে মান।

উল্লম্ব অফসেট

উল্লম্ব অফসেটের জন্য, আমরা ডিফল্ট CSS পজিশনিং মান দিয়ে শুরু করি এবং আমাদের তরল স্কেলিং এর সাথে কাজ করার জন্য তাদের সামঞ্জস্য করি:

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px));
}

sub { 
  top: calc(0.25 * 0.83 * 2 * (1em - 4px));
}

মানক ব্রাউজার পজিশনিং এর সাথে মেলে ফর্মুলাটি সাবধানে ক্যালিব্রেট করা হয়েছে:

• 0.5em (সুপার) এবং 0.25em (সাব) হল ডিফল্ট উল্লম্ব অফসেট মান (যেমন টেলউইন্ড সিএসএস এবং বুটস্ট্র্যাপের মতো ফ্রেমওয়ার্কগুলিতে ব্যবহৃত)।
• আমরা দ্বারা গুন 0.83 ব্রাউজারের জন্য অ্যাকাউন্ট করতে font-size: smaller স্কেলিং ফ্যাক্টর, যা সুপারস্ক্রিপ্ট এবং সাবস্ক্রিপ্টের জন্য ডিফল্ট প্রতি ব্যবহৃত হয়।

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

সহায়ক টিপস

সঠিক স্কেলিং ফ্যাক্টর font-size: (0.5em + 4px) সাধারণ ফন্টগুলিতে সুপারস্ক্রিপ্ট ইউনিকোড অক্ষরগুলির আমার বিশ্লেষণের উপর ভিত্তি করে। আপনার নির্দিষ্ট ডিজাইনের চাহিদা মেলে এই মানগুলিকে বিনা দ্বিধায় সামঞ্জস্য করুন। আপনি এই পদ্ধতিটি কীভাবে কাস্টমাইজ করতে চান তা এখানে কয়েকটি উপায় রয়েছে:

বড় স্কেলিং জন্য:

sup, sub {
  font-size: calc(0.6em + 3px);
  /* adjust offset calculations accordingly */
}

ছোট স্কেলিং জন্য:

sup, sub {
  font-size: calc(0.4em + 5px);
  /* adjust offset calculations accordingly */
}

পশ্চাদপদ সামঞ্জস্য জন্যআপনি চাইতে পারেন একটি মধ্যে এটি সব মোড়ানো @supports ব্লক:

@supports (font-size: calc(1em + 1px)) {
  sup, sub {
    ...
  }
}

চূড়ান্ত ডেমো

আমি বিভিন্ন তরল স্কেলিং বিকল্পগুলি দেখানোর জন্য এই ছোট ইন্টারেক্টিভ ডেমোটি তৈরি করেছি, সেগুলিকে ব্রাউজারের স্ট্যাটিক স্কেলিং এর সাথে তুলনা করতে এবং আপনার ব্যবহারের ক্ষেত্রে কোনটি সবচেয়ে ভাল কাজ করে তা দেখতে উল্লম্ব অবস্থানকে সূক্ষ্ম-টিউন করেছি:

আপনার পরবর্তী প্রকল্পে এটি চেষ্টা করুন এবং আপনার চিন্তা শুনতে খুশি!