CSS টেক্সট-বক্স-ট্রিম

Adam Argyle

প্রকাশিত: ১৪ জানুয়ারি, ২০২৫

ক্রোম ১৩৩ সংস্করণ থেকে, text-box ডেভেলপার এবং ডিজাইনারদেরকে টেক্সটের উপরে ও নিচের স্থান নিজেদের প্রয়োজন অনুযায়ী সাজানোর সুযোগ দেয়।

দীর্ঘহাতে:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

সংক্ষিপ্ত রূপ:

text-box: trim-both cap alphabetic;

এই প্রপার্টিটি আপনাকে টেক্সটের উপরে এবং নীচের স্পেস নিয়ন্ত্রণ করতে দেয়, যেমন <h1> , <button> এবং <p> । প্রতিটি ফন্ট এই ব্লক ডিরেকশনাল স্পেসের ভিন্ন ভিন্ন পরিমাণ তৈরি করে, যা এলিমেন্টের আকারে অবদান রাখে। স্পেসের এই বিশৃঙ্খল অবদান সহজে পরিমাপ করা যায় না এবং এখন পর্যন্ত এটি নিয়ন্ত্রণ করা অসম্ভব ছিল।

ফন্ট জানত, এখন সিএসএস-ও জানে।

ফন্টের উপরে এবং নীচে যে ফাঁকা জায়গা থাকে, তার কারণ হলো ওয়েব যেভাবে টেক্সট সাজায়, যাকে বলা হয় ‘হাফ-লিডিং’। ম্যাথিয়াস অট- এর ‘The Thing With Leading In CSS’ নামক একটি পোস্টে এই বিষয়টি দক্ষতার সাথে আলোচনা করা হয়েছে। মূলত, যখন হাতে টাইপসেটিং করা হতো, তখন টেক্সটের লাইনগুলোকে আলাদা করার জন্য সীসার ধাতব টুকরো ব্যবহার করা হতো। লিডিং থেকে অনুপ্রাণিত হয়ে ওয়েব সেই সীসাকে দুটি টুকরোয় ভাগ করে এবং একটি টুকরো কন্টেন্টের উপরে ও অন্যটি নিচে স্থাপন করে।

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

text-box পূর্ববর্তী ব্যবহার রয়েছে, আপনার হয়তো ইথান ওয়াং-এর ‘লিডিং-ট্রিম: ডিজিটাল টাইপসেটিং-এর ভবিষ্যৎ’ নামক চমৎকার পোস্টটির কথা মনে আছে, যেখানে leading-trim ( text-box পূর্ববর্তী নাম) প্রথম প্রবর্তন করা হয়েছিল।

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

আপনি যেভাবে এখানে এসে থাকুন না কেন, এই সামান্য মনে হওয়া টাইপোগ্রাফি কন্ট্রোলটি একটি বড় পার্থক্য গড়ে দিতে পারে।

বৈশিষ্ট্য এবং সিনট্যাক্স

আমার মতে, text-box নিয়ে কাজ করার সময় আপনার সবচেয়ে বেশি প্রয়োজন হবে এমন দুটি এক-লাইনের কোড নিচে দেওয়া হলো:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

উভয়কে cap alphabetic পর্যন্ত ট্রিম করাই হবে এই ফিচারের সবচেয়ে সাধারণ ব্যবহার। নিম্নলিখিত ডেমোগুলোতে এটি বহুবার ব্যবহার করা হয়েছে। তবে, পূর্ববর্তী উদাহরণটিতে ex alphabetic দেখানো হয়েছে, কারণ এটি নিজস্ব অনন্য উপায়ে অপটিক্যাল ব্যালেন্সের জন্য উপযোগী।

এক্সপ্লোরার খেলার মাঠ

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

চেষ্টা করার মতো বিষয়গুলো:

1. এক-লাইন এবং একাধিক-লাইন টেক্সট ভ্যারিয়েন্ট জুড়ে text-box-trim কীভাবে কাজ করে তার চাক্ষুষ পর্যবেক্ষণ।
2. কোনো ভ্যারিয়েন্টের উপর মাউস রাখলে, সেই ইফেক্টটি অর্জন করতে ব্যবহৃত ট্রিম ভ্যালুগুলো দেখা যায়।
3. ফন্ট পরিবর্তন করা।
4. একটি টেক্সট বক্সের শুধু এক পাশ ছাঁটাই করা।
5. খেলার সময় বাক্যগঠন পর্যালোচনা করুন।

আমি কী তৈরি করতে পারি এবং এটি কী কী সমস্যার সমাধান করে?

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

সহজ কেন্দ্রীকরণ

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

এই সমস্যা সমাধানের জন্য, ডেভেলপাররা প্রায়শই হাফ লিডিং-এর প্রভাব প্রশমিত করতে ব্লকের উপরে এবং নীচে প্যাডিং কমিয়ে দেন।

button {
  padding-block: 5px;
  padding-inline: 10px;
}

এই পর্যায়ে, সবকিছু দৃষ্টিগতভাবে কেন্দ্রে না আসা পর্যন্ত আমাদের বিভিন্ন মানের সমন্বয় চেষ্টা করে দেখতে হবে। এটি হয়তো একটি স্ক্রিন ও অপারেটিং সিস্টেমে ভালো লাগতে পারে, কিন্তু অন্যটিতে নয়।

text-box আমাদেরকে টেক্সটের শুরুর অর্ধেক স্পেস ছেঁটে ফেলার সুযোগ দেয়, যার ফলে 10px মতো সমান প্যাডিং মান ব্যবহার করা যায়:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

এখানে কয়েকটি <button> এলিমেন্ট দেখানো হলো, যা থেকে বোঝা যায় কিভাবে text-box ব্যবহার করে স্পেস ছেঁটে ফেললে একটি ব্যবহারিক ইন্টারেক্টিভ এলিমেন্টে padding: 10px সব দিকে সমান দেখায়। লক্ষ্য করুন, বিকল্প ফন্টটি কীভাবে সম্পূর্ণ ভিন্ন হাফ লিডিং স্পেস তৈরি করতে পারে।

এখানে <span> এলিমেন্টগুলো রয়েছে, যা প্রায়শই ক্যাটাগরি বা ব্যাজ দেখানোর জন্য ব্যবহৃত হয়। এটি এমন আরেকটি ক্ষেত্র যেখানে সমান পার্শ্বযুক্ত প্যাডিংই সর্বোত্তম সমাধান হওয়া উচিত, কিন্তু text-box আসার আগে পর্যন্ত আমাদের এর বিকল্প ব্যবস্থা করতে হয়েছে।

সহজতর সারিবদ্ধকরণ

একটি টেক্সট বক্সের উপরে এবং over under অতিরিক্ত, অনিয়ন্ত্রিত হাফ লিডিং স্পেসও অ্যালাইনমেন্টকে কঠিন করে তোলে। নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে কখন হাফ লিডিং অ্যালাইনমেন্টকে কঠিন করে তুলতে পারে এবং কীভাবে একটি টেক্সট বক্সের ব্লক সাইডগুলি ট্রিম করে আরও ভালো অ্যালাইনমেন্ট তৈরি করা যায়।

এখানে লেখার পাশে একটি ছবি রাখা হয়েছে। ছবিটি লেখার প্রয়োজন অনুযায়ী উচ্চতায় বড় হয়। text-box ছাড়া, ছবিটি সবসময় কিছুটা লম্বা হয়। text-box ব্যবহার করলে, ছবিটি লেখার সাথে নিখুঁতভাবে মিলে যেতে পারে।

লক্ষ্য করুন, লাইন র‍্যাপিংযুক্ত ক্ষেত্রে ফাঁকা স্থানটি টেক্সটের প্রথম ফরম্যাট করা লাইনের উপরে এবং শেষ ফরম্যাট করা লাইনের নিচে থাকে।

নিচের উদাহরণটিতে লক্ষ্য করুন, কীভাবে ফিচারটি writing-mode পরিবর্তনের সাথে যৌক্তিকভাবে খাপ খাইয়ে নেয় । লেখাটি পরিবর্তন করে দেখুন, লেআউটটি কীভাবে তার বিন্যাস বজায় রাখে।

পড়াশোনা চালিয়ে যান

আরও জানতে চান? নিচের লিঙ্কের তালিকায় বিভিন্ন পরিমাণ অতিরিক্ত তথ্য ও ব্যবহারের উদাহরণ দেওয়া আছে।

• সমস্ত ডেমোগুলোর কোডপেন সংগ্রহ ।
• জান নিকলাসের চমৎকার গবেষণা ও ডেমো ।
• CSS Tricks-এ টেক্সট বক্সের অতিরিক্ত অংশ ছাঁটাই করার দুটি CSS প্রোপার্টি ।
• টেক্সটের প্রান্তে CSS ইনলাইন লেআউট ।
• size-adjust বা ascent-override সাথে গুলিয়ে ফেলবেন না।
• সিএসএস বেসলাইন: ভালো, মন্দ এবং কুৎসিত ।
• অনেক HTML এলিমেন্টে প্রয়োগ করা হয়: CodePen ।
• সাফারির ব্লগ পোস্ট ।
• একজন ডিজাইনার হিসেবে কেন আমি টেক্সট-বক্স-ট্রিম নিয়ে উচ্ছ্বসিত ।