সমান-প্রস্থের টেক্সট লাইন

পোস্টার-স্টাইল লকআপ যেখানে প্রতিটি লাইন স্কেল করা হয় যাতে এটি কন্টেনারের সম্পূর্ণ প্রস্থ জুড়ে থাকে, তা দৃশ্যত আকর্ষণীয় শিরোনাম তৈরি করতে পারে। text-fit ব্যবহার করে, ব্রাউজার লেআউট চলাকালীন প্রতিটি লাইন স্কেল করে, তাই এটি রিসাইজ, কপি পরিবর্তন এবং ফন্ট লোডে সঠিক থাকে।

একটি লাইনের জন্য তার কন্টেনার পূরণ করা (যেমন, একটি হেডিং বা পুল কোট), সরাসরি সেই এলিমেন্টে text-fit প্রয়োগ করুন; এই নির্দেশিকা মাল্টি-লাইন লকআপ কভার করে।

প্রাথমিক প্রয়োগ

জোরপূর্বক লাইনের জন্য:

• display: block সহ <span>-এ প্রতিটি লাইন র‍্যাপ করুন।
• প্রতিটি ফোর্সড লাইনে <span> white-space: nowrap প্রয়োগ করুন।

প্রয়োগ সংক্রান্ত নির্দেশিকা:

• শিরোনামেই text-fit: grow per-line-all <percentage> ব্যবহার করুন।
• per-line-all ব্যবহার করুন, per-line নয়। per-line শেষ লাইন এবং জোর করে ব্রেক করা হয়েছে এমন লাইনের শেষ অংশ এড়িয়ে যায়, তাই প্রতি লাইনে একটি ব্লক থাকলে এটি কিছুই স্কেল করে না।
• grow-এর সাথে shrink যোগ করা যাবে না। কোনটি আরও ভাল ফলব্যাক হবে বা গণনা করা সহজ হবে তার উপর নির্ভর করে বেস font-size সর্বাধিক বা সর্বনিম্ন সেট করুন এবং সেই অনুযায়ী text-fit থেকে shrink বা grow সেট করুন। shrink ব্যবহার করার কোনও কারণ না থাকলে, grow + সেটিং font-size ন্যূনতম হিসেবে সেট করুন, কারণ বেশিরভাগ ক্ষেত্রে এটি নিরাপদ।
• সর্বদা শতাংশ (যেমন, 300%) দিয়ে বৃদ্ধি বা হ্রাস সীমিত করুন।
• কন্টেনারের একটি নির্দিষ্ট ইনলাইন সাইজ থাকতে হবে। text-fit কখনও অন্তর্নিহিত সাইজ পরিবর্তন করে না, তাই এটি fit-content/max-content প্রস্থ বা কন্টেন্ট-সাইজড ফ্লেক্স/গ্রিড আইটেমে কিছু করে না।
• প্রথম লাইনের উপরে এবং শেষ লাইনের নিচে লিডিং ট্রিম করুন: সুনির্দিষ্ট টেক্সট অ্যালাইনমেন্ট দেখুন।
• line-height ছোট, 1 বা তার কম রাখুন, অন্যথায় বিভিন্ন ফন্ট-সাইজের লাইনের মধ্যে ব্যবধান বিশ্রী দেখাবে।
• গুরুত্বপূর্ণ: মনে রাখবেন যে গণনা করা font-size অপরিবর্তিত, তাই em স্পেসিং স্কেল করে না।
• ভুলবশত অতিরিক্ত জোর দেওয়া অনাথ এড়াতে, খালি লাইন থাকলে text-wrap: balance বা text-wrap: pretty প্রয়োগ করুন।

ব্যবধান

সব লাইন যদি জোর করে দেখানো হয়, তাহলে স্পেসিংয়ের উপর আরও বেশি নিয়ন্ত্রণ পাওয়া যায়:

• প্রতিটি লাইন ব্লকে text-box: trim-both cap alphabetic প্রয়োগ করুন যাতে এর বক্স নিজের গ্লিফকে আলিঙ্গন করে। এটি স্কেল করা মেট্রিক ব্যবহার করে ট্রিম করে। আরও বিবরণের জন্য সুনির্দিষ্ট টেক্সট অ্যালাইনমেন্ট দেখুন।
• Flexbox বা Grid + gap ব্যবহার করে লাইনের মধ্যে স্পেস দিন, line-height নয়। প্রতিটি লাইনের ফন্ট-সাইজের সাথে সাথে না বেড়ে, ফাঁকগুলি তখন অভিন্ন হয়।

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

ভিজ্যুয়াল ডিজাইন

• লাইনগুলির মধ্যে ফন্ট সাইজের উল্লেখযোগ্য পার্থক্য থাকলে লকআপগুলি সবচেয়ে ভালো দেখায়। বেশিরভাগ ক্ষেত্রে একই ধরনের লাইন সহ টেক্সট থেকে লকআপ তৈরি করা এড়িয়ে চলুন, কারণ এর ফলে ফন্টের সাইজ একই রকম বা যথেষ্ট আলাদা হবে না, যা কনট্রাস্ট-এর ডিজাইন নীতি লঙ্ঘন করে। আপনি ছোট লাইন ব্যবহার করে এটি নিশ্চিত করতে পারেন: জোর দেওয়ার জন্য শব্দগুলি একটি ব্লকে র‍্যাপ করুন এবং বাকিগুলি র‍্যাপ হতে দিন, অর্থাৎ একটি মিক্সড লকআপ। text-wrap: balance-এর সাথে একত্রিত করার সময় এটি বিশেষভাবে গুরুত্বপূর্ণ।
• পাশ্চাত্য স্ক্রিপ্টের সাথে ব্যবহার করার সময় এটিকে text-transform: uppercase-এর সাথে একত্রিত করা ভালো, কারণ অ্যাসেন্ডার এবং ডিসেন্ডারগুলি ট্র্যাপড স্পেস এবং/অথবা ওভারল্যাপ করা সংলগ্ন লাইন তৈরি করে, যা নান্দনিকভাবে কম আনন্দদায়ক ফলাফল তৈরি করে।
• ছোট লাইন বেছে নেওয়ার সময় এমন শব্দ বেছে নিন যা জোর দিয়ে বললে মেসেজটি আরও ভালভাবে বোঝা যাবে।
• সীমাবদ্ধতা: টেক্সট বড় করার সাথে সাথে ভিজ্যুয়াল ওয়েটও বাড়বে এবং এর স্ট্রোক আরও স্পষ্ট হবে। বর্তমানে এটি ব্যালেন্স করার কোনও উপায় নেই, যেমন, বড় টেক্সটের জন্য font-weight কমানো, কারণ গণনার জন্য কোনও ইউনিট নেই, যেহেতু স্কেলিং em-এর মতো ফন্ট-রিলেটিভ ইউনিটকে প্রভাবিত করে না।

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

text-box-এর জন্য

text-box-এর জন্য আলাদা কোনও ফলব্যাক প্রয়োজন নেই: ফিক্সড লকআপেও ছোট line-height রাখুন। এটি text-box-এর অধীনে কোনও অপারেশন নয় এবং যেখানে এটি কাজ করে না সেখানে ফাঁকগুলি ছোট রাখে, প্রতিটি লাইনের ফন্ট-সাইজ অনুযায়ী ফাঁকগুলি স্কেল করার খরচে।

text-wrap: balance-এর জন্য

text-fit-এর জন্য

ফোর্সড লাইনের একটি ছোট, বিশ্বস্ত ফলব্যাক আছে: প্রতিটি লাইনকে তার বেস সাইজে পরিমাপ করুন এবং একই ক্যাপ সহ কন্টেনারের অনুপাতে স্কেল করুন।

@supports not (text-fit: grow) {
  .lockup > span {
    /* Shrink-wrap each line so its width is the text width */
    width: fit-content;
    /* --text-fit-scale is measured by the script; the cap mirrors the text-fit percentage */
    font-size: min(var(--text-fit-scale, 1) * 1em, 300%);
  }
}

if (!CSS.supports('text-fit', 'grow per-line-all')) {
  const fit = lockup => {
    const lines = [...lockup.querySelectorAll(':scope > span')];
    // Unscale first: on a refit, offsetWidth would otherwise include the previous scale
    for (const line of lines) line.style.removeProperty('--text-fit-scale');
    // MANDATORY: all reads, then all writes. Interleaving them (e.g. reading
    // lockup.clientWidth inside the write loop) forces one reflow per line.
    const scales = lines.map(line => lockup.clientWidth / line.offsetWidth);
    lines.forEach((line, i) => line.style.setProperty('--text-fit-scale', scales[i]));
  };
  // Refit on resize and font load
  for (const lockup of document.querySelectorAll('.lockup')) {
    new ResizeObserver(() => fit(lockup)).observe(lockup);
  }
}

ফ্রি লাইনের কোনও বিশ্বস্ত ফলব্যাক নেই (লেআউট না হওয়া পর্যন্ত লাইন ব্রেক অজানা থাকে): clamp(2rem, 1rem + 5cqi, 5rem)-এর মতো ফ্লুইড বেস সাইজ সহ একটি ব্যালেন্সড হেডিংয়ের প্রোগ্রেসিভ এনহ্যান্সমেন্ট। মিক্সড লকআপে উপরের স্ক্রিপ্ট এখনও জোর করে তৈরি করা লাইনে ফিট করে; একটি র‍্যাপিং ব্লক কন্টেনারের মতো চওড়া পরিমাপ করে, তাই এটি স্কেল ১ রাখে এবং শুধুমাত্র ফ্লুইড বেস সাইজ পায়।

টেক্সট ফিটিং গুরুত্বপূর্ণ হলে, JS লাইব্রেরি (যেমন, fitty) ব্যবহার করার কথা বিবেচনা করুন, text-fit কাজ না করলে তবেই শর্তসাপেক্ষে লোড করা হয়।