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

আপনার পাঠ্য বিষয়বস্তুর উপরে এবং নীচে স্থান ফিরে নিন; অপটিক্যাল ভারসাম্য অর্জন।

অ্যাডাম আর্গিল

প্রকাশিত: 14 জানুয়ারী, 2025

Chrome 133 থেকে, text-box ডেভেলপার এবং ডিজাইনারদের টেক্সটের উপরে এবং নীচের জায়গাটি সাজাতে দেয়।

Browser Support

  • ক্রোম: 133।
  • প্রান্ত: 133।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: 18.2।

লম্বা হাত:

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

শর্টহ্যান্ড:

text-box: trim-both cap alphabetic;

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

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

https://codepen.io/web-dot-dev/pen/xbKjRxL

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

অর্ধ-প্রধান দেখানোর জন্য পাঠ্যের উপরে এবং নীচে একটি হটপিঙ্ক বার সহ একটি শিরোনাম দেখানো হয়েছে।
উৎস

এই ইতিহাস অর্থবহ কারণ, 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 দেখায় কারণ এটি তার নিজস্ব অনন্য উপায়ে অপটিক্যাল ভারসাম্যের জন্য দরকারী।

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

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

সিনট্যাক্স এক্সপ্লোরার ডেমোর একটি স্ক্রিনশট। একটি ভিন্ন ফন্ট চয়ন করতে ফন্ট এবং একটি ড্রপডাউন দেখায়৷ টেক্সট-বক্স সহ একটি সিনট্যাক্স পূর্বরূপ: ট্রিম-উভয় ক্যাপ বর্ণমালার সিনট্যাক্স হাইলাইট এবং দেখানো হয়েছে। সবশেষে, ট্রিম মান বেছে নিতে আরও 3টি ড্রপডাউন আছে।

চেষ্টা করার জিনিস:

  1. একক লাইন এবং মাল্টি-লাইন টেক্সট ভেরিয়েন্ট জুড়ে text-box-trim কীভাবে কাজ করে তা দৃশ্যত পরিদর্শন করা।
  2. একটি ভেরিয়েন্টের উপর ঘোরানো, সেই প্রভাবটি অর্জন করতে ব্যবহৃত ট্রিম মানগুলি দেখে৷
  3. ফন্ট পরিবর্তন.
  4. একটি টেক্সট বক্সের শুধুমাত্র এক পাশ ছাঁটাই করা।
  5. আপনি খেলা হিসাবে সিনট্যাক্স পর্যালোচনা করুন.
https://codepen.io/web-dot-dev/pen/RNbyooE

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

এই ট্রিম ক্ষমতা থেকে উদ্ভূত কিছু অনেক সহজ কেন্দ্রীকরণ এবং প্রান্তিককরণ সমাধান রয়েছে। আপনি এমনকি সঠিক নেতৃত্বের কাছাকাছি যেতে পারেন, যেখানে বিষয়বস্তুর মধ্যে gap মতো কিছু ব্যবহার করা যেতে পারে।

কন্টেন্টের 2 গোষ্ঠীর মধ্যে একটি তুলনা দেখানো হয়েছে। প্রথম গোষ্ঠীর অর্ধ-নেতৃত্ব রয়েছে, দ্বিতীয়টি অগ্রণী ছাঁটাই করেছে। ফলাফল দ্বিতীয় গ্রুপ একসঙ্গে শক্ত হয়.
https://codepen.io/web-dot-dev/pen/RNbyoKE

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

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

এটিকে ঘিরে কাজ করার জন্য, বিকাশকারীরা প্রায়শই অর্ধেক লিডিংয়ের প্রভাবগুলি অফসেট করার জন্য উপরে এবং নীচে (ব্লক) কম প্যাডিং রাখে।

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

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

text-box আমাদের টেক্সট থেকে অর্ধেক লিডিং স্পেস ছাঁটাই করতে দেয়, সমান প্যাডিং মান যেমন 10px দরকারী করে:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
দুটি উদাহরণ দেখানো হয়েছে। প্রথমটি প্যাডিং সহ একটি উপাদান দেখায়: 10px এবং অর্ধ-লিডিং। দ্বিতীয়টি টেক্সট-বক্সের সাথে একই উপাদান দেখায়: ট্রিম-বোথ ক্যাপ বর্ণমালা। ফলাফল হল দ্বিতীয় বোতামটি অপটিক্যালি কেন্দ্রিক।
https://codepen.io/web-dot-dev/pen/NPKMbgq

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

বোতামের তিনটি গ্রুপ দেখানো হয়েছে। প্রথম গ্রুপটি একটি নিয়মিত সান সেরিফ ফন্ট দেখায়। দ্বিতীয় গ্রুপটি একটি অভিনব বা মজার ফন্ট দেখায়। তৃতীয় গ্রুপ একই প্রভাব দেখায় কিন্তু হাতে লেখা ফন্ট দিয়ে। পয়েন্টটি হল প্রতিটি ফন্টের বিভিন্ন অর্ধেক অগ্রণী স্থান রয়েছে, কিন্তু ট্রিম মানগুলি একই এবং স্থানটিকে স্বাভাবিক করতে পারে।
https://codepen.io/web-dot-dev/pen/mybLOMg

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

ট্যাগগুলি পাশাপাশি তুলনা করা হয়। প্রথম গোষ্ঠীর অর্ধ-নেতৃত্ব রয়েছে, দ্বিতীয়টি অগ্রণী ছাঁটাই করেছে। ফলাফল হল দ্বিতীয় গ্রুপটি একসাথে শক্ত এবং অপটিক্যালি কেন্দ্রিক।
https://codepen.io/web-dot-dev/pen/mybLOMg

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

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

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

https://codepen.io/web-dot-dev/pen/yyBjVpg

লক্ষ্য করুন হোয়াইটস্পেসটি টেক্সটের প্রথম ফরম্যাট করা লাইনের উপরে এবং লাইন র‌্যাপিং সহ পরিস্থিতিতে টেক্সটের শেষ ফরম্যাট করা লাইনের নিচে।

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

https://codepen.io/web-dot-dev/pen/dPbeOJQ

অধ্যয়ন চালিয়ে যান

আরো জানতে চান? নিম্নলিখিত লিঙ্কগুলির তালিকা বিভিন্ন পরিমাণে অতিরিক্ত তথ্য এবং ব্যবহারের ক্ষেত্রে অফার করে।