আপনার পাঠ্য বিষয়বস্তুর উপরে এবং নীচে স্থান ফিরে নিন; অপটিক্যাল ভারসাম্য অর্জন।
প্রকাশিত: 14 জানুয়ারী, 2025
Chrome 133 থেকে, text-box
ডেভেলপার এবং ডিজাইনারদের টেক্সটের উপরে এবং নীচের জায়গাটি সাজাতে দেয়।
Browser Support
লম্বা হাত:
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>
। প্রতিটি ফন্ট এই ব্লক দিকনির্দেশক স্থানের একটি ভিন্ন পরিমাণ উত্পাদন করে যা উপাদানটির আকারে অবদান রাখে। এই বিশৃঙ্খল স্থান অবদান সহজে পরিমাপ করা হয় না, এবং এখন পর্যন্ত নিয়ন্ত্রণ করা অসম্ভব হয়েছে.
ফন্ট জানে, এখন সিএসএস জানে!
একটি ফন্টের উপরে এবং নীচের স্থানটি ওয়েব কিভাবে টেক্সট তৈরি করে, যার নাম "হাফ-লিডিং"। ম্যাথিয়াস ওটের একটি পোস্টে এটি দক্ষতার সাথে কভার করা হয়েছে যার নাম The Thing With Leading In CSS । মূলত, যখন টাইপসেটিং হাত দিয়ে করা হত, তখন টেক্সটের লাইনগুলিকে আলাদা করতে ধাতব সীসার টুকরা ব্যবহার করা হত। ওয়েব, নেতৃস্থানীয় দ্বারা অনুপ্রাণিত, সেই সীসার অংশটিকে অর্ধেক ভাগ করে এবং একটি অংশ উপরে এবং একটি অংশের নীচে বিতরণ করে৷
![অর্ধ-প্রধান দেখানোর জন্য পাঠ্যের উপরে এবং নীচে একটি হটপিঙ্ক বার সহ একটি শিরোনাম দেখানো হয়েছে।](https://developer.chrome.google.cn/static/blog/css-text-box-trim/half-leading.png?authuser=0&hl=bn)
এই ইতিহাস অর্থবহ কারণ, 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
দেখায় কারণ এটি তার নিজস্ব অনন্য উপায়ে অপটিক্যাল ভারসাম্যের জন্য দরকারী।
এক্সপ্লোরার খেলার মাঠ
নিম্নলিখিত ডেমো আপনাকে সিনট্যাক্স অন্বেষণ করতে এবং ড্রপডাউন মেনু ব্যবহার করে ফলাফল দেখতে দেয়। আপনি ফন্ট পরিবর্তন করতে পারেন, ট্রিম মান পরিবর্তন করতে পারেন এবং কালার কোডেড ভিজ্যুয়াল এবং লেবেল সহ অনুসরণ করতে পারেন।
চেষ্টা করার জিনিস:
- একক লাইন এবং মাল্টি-লাইন টেক্সট ভেরিয়েন্ট জুড়ে
text-box-trim
কীভাবে কাজ করে তা দৃশ্যত পরিদর্শন করা। - একটি ভেরিয়েন্টের উপর ঘোরানো, সেই প্রভাবটি অর্জন করতে ব্যবহৃত ট্রিম মানগুলি দেখে৷
- ফন্ট পরিবর্তন.
- একটি টেক্সট বক্সের শুধুমাত্র এক পাশ ছাঁটাই করা।
- আপনি খেলা হিসাবে সিনট্যাক্স পর্যালোচনা করুন.
আমি এটি দিয়ে কী তৈরি করতে পারি বা এটি কী সমস্যার সমাধান করে?
এই ট্রিম ক্ষমতা থেকে উদ্ভূত কিছু অনেক সহজ কেন্দ্রীকরণ এবং প্রান্তিককরণ সমাধান রয়েছে। আপনি এমনকি সঠিক নেতৃত্বের কাছাকাছি যেতে পারেন, যেখানে বিষয়বস্তুর মধ্যে gap
মতো কিছু ব্যবহার করা যেতে পারে।
![কন্টেন্টের 2 গোষ্ঠীর মধ্যে একটি তুলনা দেখানো হয়েছে। প্রথম গোষ্ঠীর অর্ধ-নেতৃত্ব রয়েছে, দ্বিতীয়টি অগ্রণী ছাঁটাই করেছে। ফলাফল দ্বিতীয় গ্রুপ একসঙ্গে শক্ত হয়.](https://developer.chrome.google.cn/static/blog/css-text-box-trim/leading.png?authuser=0&hl=bn)
সহজ কেন্দ্রীকরণ
ছোট, আরও ইনলাইন এবং বিষয়বস্তুর অভ্যন্তরীণ উপাদানগুলির জন্য, padding: 10px
হল একটি যুক্তিসঙ্গত শৈলী যা একটি উপাদানের জন্য সমস্ত দিকে সমান ব্যবধানের জন্য নির্দিষ্ট করে৷ যাইহোক, ফলাফলটি লোকেদের বিভ্রান্ত করতে পারে, কারণ এটি প্রায়শই উপরে এবং নীচে অতিরিক্ত স্থান থাকে।
এটিকে ঘিরে কাজ করার জন্য, বিকাশকারীরা প্রায়শই অর্ধেক লিডিংয়ের প্রভাবগুলি অফসেট করার জন্য উপরে এবং নীচে (ব্লক) কম প্যাডিং রাখে।
button {
padding-block: 5px;
padding-inline: 10px;
}
এই মুহুর্তে জিনিসগুলি অপটিক্যালি কেন্দ্রিক না হওয়া পর্যন্ত আমরা মান সংমিশ্রণ চেষ্টা করতে বাকি আছি। এটি একটি স্ক্রীন এবং অপারেটিং সিস্টেমে ভাল দেখতে পারে, তবে অন্যটিতে নয়।
text-box
আমাদের টেক্সট থেকে অর্ধেক লিডিং স্পেস ছাঁটাই করতে দেয়, সমান প্যাডিং মান যেমন 10px
দরকারী করে:
button {
text-box: trim-both cap alphabetic;
padding: 10px;
}
![দুটি উদাহরণ দেখানো হয়েছে। প্রথমটি প্যাডিং সহ একটি উপাদান দেখায়: 10px এবং অর্ধ-লিডিং। দ্বিতীয়টি টেক্সট-বক্সের সাথে একই উপাদান দেখায়: ট্রিম-বোথ ক্যাপ বর্ণমালা। ফলাফল হল দ্বিতীয় বোতামটি অপটিক্যালি কেন্দ্রিক।](https://developer.chrome.google.cn/static/blog/css-text-box-trim/centering.png?authuser=0&hl=bn)
এখানে কয়েকটি <button>
উপাদান রয়েছে যা দেখায় কিভাবে text-box
সাহায্যে স্থান ছাঁটাই padding: 10px
সব দিকে সমান দেখায়। লক্ষ্য করুন কিভাবে বিকল্প ফন্ট কিছু অর্ধেক অগ্রণী স্থান তৈরি করতে পারে।
![বোতামের তিনটি গ্রুপ দেখানো হয়েছে। প্রথম গ্রুপটি একটি নিয়মিত সান সেরিফ ফন্ট দেখায়। দ্বিতীয় গ্রুপটি একটি অভিনব বা মজার ফন্ট দেখায়। তৃতীয় গ্রুপ একই প্রভাব দেখায় কিন্তু হাতে লেখা ফন্ট দিয়ে। পয়েন্টটি হল প্রতিটি ফন্টের বিভিন্ন অর্ধেক অগ্রণী স্থান রয়েছে, কিন্তু ট্রিম মানগুলি একই এবং স্থানটিকে স্বাভাবিক করতে পারে।](https://developer.chrome.google.cn/static/blog/css-text-box-trim/buttons.png?authuser=0&hl=bn)
এখানে <span>
উপাদান রয়েছে, প্রায়শই বিভাগ বা ব্যাজ দেখাতে ব্যবহৃত হয়। আরেকটি মুহূর্ত যেখানে সমান পার্শ্বযুক্ত প্যাডিং সেরা সমাধান হওয়া উচিত, কিন্তু text-box
পর্যন্ত আমাদের এটিকে ঘিরে কাজ করতে হয়েছিল।
![ট্যাগগুলি পাশাপাশি তুলনা করা হয়। প্রথম গোষ্ঠীর অর্ধ-নেতৃত্ব রয়েছে, দ্বিতীয়টি অগ্রণী ছাঁটাই করেছে। ফলাফল হল দ্বিতীয় গ্রুপটি একসাথে শক্ত এবং অপটিক্যালি কেন্দ্রিক।](https://developer.chrome.google.cn/static/blog/css-text-box-trim/tags.png?authuser=0&hl=bn)
সহজ সারিবদ্ধকরণ
একটি টেক্সট বক্সের উপরে ( over
) এবং নীচে ( under
) অতিরিক্ত, অনিয়ন্ত্রিত, অর্ধেক অগ্রণী স্থানও প্রান্তিককরণকে কঠিন করে তোলে। নিম্নলিখিত উদাহরণগুলি দেখায় যে কখন অর্ধেক অগ্রণী সারিবদ্ধকরণকে কঠিন করে তুলতে পারে এবং কীভাবে একটি পাঠ্য বাক্সের ব্লক দিকগুলিকে ছাঁটাই করা আরও ভাল প্রান্তিককরণ তৈরি করতে পারে।
এখানে পাঠ্যের পাশে একটি চিত্র স্থাপন করা হয়েছে। চিত্রটি পাঠ্যের প্রয়োজনীয় উচ্চতায় বৃদ্ধি পাবে, কিন্তু text-box
ছাড়া, চিত্রটি সর্বদা একটু লম্বা হয়। text-box
সাহায্যে, চিত্রটি পাঠ্য বিষয়বস্তুর সাথে পুরোপুরি সারিবদ্ধ হতে পারে।
![](https://developer.chrome.google.cn/static/blog/css-text-box-trim/trimmed-half-leading-for-alignment.jpg?authuser=0&hl=bn)
লক্ষ্য করুন হোয়াইটস্পেসটি টেক্সটের প্রথম ফরম্যাট করা লাইনের উপরে এবং লাইন র্যাপিং সহ পরিস্থিতিতে টেক্সটের শেষ ফরম্যাট করা লাইনের নিচে।
নিম্নলিখিত উদাহরণে, লক্ষ্য করুন কীভাবে বৈশিষ্ট্যটি writing-mode
পরিবর্তনের সাথে যৌক্তিকভাবে খাপ খায় । টেক্সট পরিবর্তন করার চেষ্টা করুন, লেআউটটি কীভাবে সারিবদ্ধ থাকে তা দেখুন।
![](https://developer.chrome.google.cn/static/blog/css-text-box-trim/super-rad-design.png?authuser=0&hl=bn)
অধ্যয়ন চালিয়ে যান
আরো জানতে চান? নিম্নলিখিত লিঙ্কগুলির তালিকা বিভিন্ন পরিমাণে অতিরিক্ত তথ্য এবং ব্যবহারের ক্ষেত্রে অফার করে।
- https://codepen.io/collection/zxQBaL - উপরের সমস্ত ডেমোর একটি কোডপেন সংগ্রহ
- https://github.com/jantimon/text-box-trim-examples - জ্যান নিকলাসের দুর্দান্ত গবেষণা এবং ডেমো
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- https://drafts.csswg.org/css-inline-3/#text-edges
-
size-adjust
বাascent-override
সাথে বিভ্রান্ত হবেন না https://web.dev/articles/css-size-adjust - https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- অনেক HTML উপাদানে প্রয়োগ করা হয়েছে https://codepen.io/nileshprajapati/pen/RweKdmw
- সাফারির ব্লগ পোস্ট https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
- https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/