টেক্সট অ্যালাইনমেন্টের নিখুঁত সুবিধা

সমস্যা

ব্রাউজার অটোমেটিক টেক্সট অক্ষরের উপরে এবং নিচে অতিরিক্ত হোয়াইটস্পেস যোগ করে যাতে লাইনের উচ্চতা এবং ফন্ট-নির্দিষ্ট মেট্রিক যেমন অ্যাসেন্ডার এবং ডিসেন্ডার অ্যাডজাস্ট করা যায়। এই "ঘোস্ট স্পেস" স্ট্যান্ডার্ড CSS ব্যবহার করে পিক্সেল-পারফেক্ট ভার্টিক্যাল অ্যালাইনমেন্ট অর্জন করা অসম্ভব করে তোলে।

সাধারণ সমস্যার মধ্যে এগুলি পড়ে:

• মিসঅ্যালাইন করা আইকন: align-items: center ব্যবহার করার পরেও, টেক্সট তার পাশের আইকনের থেকে উপরে বা নিচে দেখা যায়।
• ভুল প্যাডিং: ফন্টের ইন্টার্নাল লিডিংয়ের কারণে padding: 12px সহ বোতামের উপরে বা নিচে বেশি জায়গা আছে বলে মনে হয়।
• ফ্লাশ অ্যালাইনমেন্ট: "ম্যাজিক নম্বর" নেগেটিভ মার্জিন ব্যবহার না করে আপনি কোনও বড় হাতের অক্ষরের উপরের অংশটি কোনও কন্টেনার বা সংলগ্ন ছবির উপরের অংশের সাথে সঠিকভাবে অ্যালাইন করতে পারবেন না।

সমাধান

text-box-trim এবং text-box-edge প্রপার্টি (শর্টহ্যান্ড text-box) আপনাকে নির্দিষ্ট ফন্ট মেট্রিক্সের উপর ভিত্তি করে এই ইন্টার্নাল লিডিং ট্রিম করার অনুমতি দেয়। টেক্সট বক্সকে ক্যাপ-হাইট (বড় হাতের অক্ষরের উপরের অংশ) এবং অ্যালফাবেটিক বেসলাইন (অধিকাংশ অক্ষরের নিচের অংশ) অনুযায়ী ট্রিম করে, আপনি নিশ্চিত করতে পারবেন যে এলিমেন্টের বাউন্ডিং বক্স তার ভিজ্যুয়াল কন্টেন্টের সাথে ম্যাচ করছে।

প্রয়োগ সংক্রান্ত স্ট্র্যাটেজি

1. বাধ্যতামূলক: টেক্সট আছে এমন এলিমেন্টে text-box-trim: trim-both (বা text-box শর্টহ্যান্ড) প্রয়োগ করুন।
2. বাধ্যতামূলক: text-box-edge-এর সাথে ট্রিম করার জন্য কোন মেট্রিক ব্যবহার করতে হবে তা উল্লেখ করুন। বেশিরভাগ UI অ্যালাইনমেন্টের জন্য, cap alphabetic ব্যবহার করুন।
3. DO use this to achieve visual vertical centering in flex or grid containers.
4. আপনার CSS padding ভ্যালু যাতে টেক্সট ও কন্টেনারের প্রান্তের মধ্যে ভিজ্যুয়াল গ্যাপের সাথে ম্যাচ করে তা নিশ্চিত করতে এটি ব্যবহার করুন।
5. বড় দৈর্ঘ্যের বডি টেক্সটে এটি ব্যবহার করবেন না, যেখানে পড়ার সুবিধার জন্য প্রথাগত লাইন-স্পেসিং প্রয়োজন। এটি হেডিং, বোতাম ও UI লেবেলের জন্য সবচেয়ে উপযুক্ত।

প্রয়োগ করার নির্দেশিকা

ব্যবহারের উদাহরণ ১: ব্যাজের জন্য ইন্টার্নাল লিডিং ট্রিম করা

বিভিন্ন ফন্টে টেক্সটের উপরে ও নিচে বিভিন্ন পরিমাণে বিল্ট-ইন স্পেসিং থাকে। এর ফলে কোনও ডিজাইন ম্যাচ করতে বা ব্যাজের মধ্যে টেক্সট ভিজ্যুয়ালি সেন্টারে রাখতে সমস্যা হতে পারে। আপনি যখন চান যে কোনও কন্টেনারের প্যাডিং টেক্সটকে ঠিকভাবে হাগ করুক, তখন text-box: trim-both cap alphabetic ব্যবহার করুন। ব্যাজ বা ট্যাগের মতো ঘন UI কম্পোনেন্টের জন্য এটি বিশেষভাবে উপযোগী। এটি সব দিকে টেক্সটের ঠিক শেষ প্রান্ত থেকে প্যাডিং শুরু করার অনুমতি দেয়।

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

ব্যবহারের উদাহরণ ২: আইকন সহ টেক্সট মাঝখানে দেখানো

টেক্সট ও আইকন অ্যালাইন করার জন্য Flexbox ব্যবহার করার সময়, "ঘোস্ট স্পেস" প্রায়ই টেক্সটকে সামান্য অফ-সেন্টার করে দেয়। বক্স ট্রিম করলে, লেআউট ইঞ্জিন অ্যালাইনমেন্টের জন্য অক্ষরের আসল দৃশ্যমান উচ্চতা ব্যবহার করে।

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

ব্যবহারের উদাহরণ ৩: টেক্সটকে উপরের প্রান্তের সাথে অ্যালাইন করা

কোনও হেডিংকে তার ঠিক পাশে থাকা ছবি বা আলঙ্কারিক এলিমেন্টের উপরের অংশের সাথে নিখুঁতভাবে অ্যালাইন করতে, trim-start cap alphabetic ব্যবহার করুন। শেষের অংশ ট্রিম করা না হলেও, শেষ প্রান্তটি অবশ্যই নির্দিষ্ট করতে হবে।

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

পেশাদার পদ্ধতি

• সংক্ষিপ্ত করার জন্য text-box শর্টহ্যান্ড ব্যবহার করুন: text-box: <trim-direction> <edges>।
• সবসময় দুটি প্রান্তই নির্দিষ্ট করুন, এমনকি একটি প্রান্ত ট্রিম করা হলেও (ডিফল্ট text প্রান্ত ব্যবহার না করলে)।
• নিয়ন্ত্রিত স্পেসিংয়ের জন্য line-height-এর সাথে DO একত্রিত করুন। ট্রিম করার ফলে টেক্সটের প্রথম ও শেষ লাইনের আগে লিডিং সরিয়ে দেওয়া হয়, তবে line-height এখনও মাল্টি-লাইন টেক্সটের লাইনের মধ্যে দূরত্বকে প্রভাবিত করে।
• প্রতিটি এলিমেন্টে প্রয়োগ করবেন না। শুধুমাত্র যেখানে সুনির্দিষ্ট অ্যালাইনমেন্ট প্রয়োজন সেখানে এটি ব্যবহার করুন।

ফলব্যাক স্ট্র্যাটেজি

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

বিবেচনা করার মতো অন্যান্য বিষয়

1. ফন্ট মেট্রিক্স: বিভিন্ন ফন্টের বিভিন্ন ইন্টার্নাল মেট্রিক্স থাকে। cap alphabetic হল একটি নির্ভরযোগ্য ডিফল্ট, তবে কিছু ফন্ট বা ব্যবহারের ক্ষেত্রে ছোট হাতের অক্ষরের আরও ভালো অ্যালাইনমেন্টের জন্য ex (x-উচ্চতা) প্রয়োজন হতে পারে।
2. একাধিক লাইনের টেক্সট: ব্লকের প্রথম ও শেষ লাইনে ট্রিম করা হয়। ইন্টার্নাল লাইন প্রভাবিত হয়নি।