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

Adam Argyle

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

Chrome 133 থেকে, 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> । প্রতিটি ফন্ট এই ব্লকের দিকনির্দেশনামূলক স্থানের একটি ভিন্ন পরিমাণ তৈরি করে যা উপাদানটির আকারে অবদান রাখে। এই বিশৃঙ্খল স্থান অবদান সহজে পরিমাপ করা যায় না এবং এখন পর্যন্ত নিয়ন্ত্রণ করা অসম্ভব।

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

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

এই ইতিহাসটি অর্থবহ কারণ, text-box আমাদের প্রতিটি অর্ধেকের নাম দেয়: উপরে এবং নীচে। এছাড়াও, এটি ছাঁটাই করার ক্ষমতা।

text-box পূর্ববর্তী শিল্প রয়েছে, আপনার হয়তো ইথান ওয়াং-এর "লিডিং-ট্রিম: দ্য ফিউচার অফ ডিজিটাল টাইপসেটিং" শিরোনামের উত্তেজনাপূর্ণ পোস্টটি মনে আছে, যেখানে leading-trim (পূর্বে text-box নামটি ছিল) প্রথম চালু করা হয়েছিল।

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

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

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

আমার মতে, 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 ইনলাইন লেআউট ।
• size-adjust বা ascent-override সাথে বিভ্রান্ত হবেন না
• সিএসএস বেসলাইন: ভালো, খারাপ এবং কুৎসিত ।
• অনেক HTML উপাদানের ক্ষেত্রে প্রয়োগ করা হয়: CodePen ।
• সাফারির ব্লগ পোস্ট ।
• একজন ডিজাইনার হিসেবে text-box-trim নিয়ে আমি কেন উত্তেজিত ?