CSS টেক্সট-র্যাপ: ব্যালেন্স

ভারসাম্যপূর্ণ পাঠ্য ব্লকের জন্য হাতে-লেখক লাইন বিরতির একটি ক্লাসিক টাইপোগ্রাফি কৌশল, CSS এ আসে।

Adam Argyle

text-wrap জন্য balance মান হল CSS টেক্সট লেভেল 4 এর অংশ। CSS-এর এই একটি লাইন কীভাবে আপনার টেক্সট লেআউটগুলিকে ব্যাপকভাবে উন্নত করতে পারে তা জানতে এই পোস্টের উদাহরণগুলি দেখুন।

ব্রাউজার সমর্থন

• 114
• 114
• 121
• 17.5

উৎস

একটি ডেমো চেষ্টা করুন

text-wrap: balance ; ডিজাইনার, বিষয়বস্তু সম্পাদক এবং প্রকাশকদের কাছে লাইনগুলি ভারসাম্যপূর্ণ করার উপায় পরিবর্তন করার জন্য কয়েকটি সরঞ্জাম রয়েছে.. <wbr> বা ­ কোথায় লাইন এবং শব্দ ভাঙতে হবে সে সম্পর্কে টেক্সট লেআউটগুলিকে বুদ্ধিমান সিদ্ধান্ত নিতে সাহায্য করতে।

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

একটি ডেমো চেষ্টা করুন

.unbalanced {
  max-inline-size: 50ch;
}

text-wrap: balance সিএসএস টেক্সট 4 থেকে ব্যালেন্স, আপনি টেক্সটের জন্য সেরা ব্যালেন্সড লাইন র‌্যাপিং সমাধান বের করার জন্য ব্রাউজারকে অনুরোধ করতে পারেন। ব্রাউজারটি ফন্টের আকার, ভাষা এবং বরাদ্দকৃত এলাকার মতো সমস্ত বিষয়গুলি জানে ৷ ব্রাউজার ব্যালেন্সড টেক্সট র‌্যাপিংয়ের ফলাফল আজ এই রকম দেখাচ্ছে:

একটি ডেমো চেষ্টা করুন

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

তাদের পাশাপাশি, স্থির, এবং ডিবাগ তথ্য ওভারলেড ছাড়াই দেখতে সহায়ক।

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

ভারসাম্য খোঁজা

শিরোনাম পাঠকদের প্রথম জিনিস দেখতে; তারা দৃশ্যত আবেদনময় এবং পড়া সহজ হওয়া উচিত. এটি ব্যবহারকারীর মনোযোগ আকর্ষণ করে এবং গুণমান এবং নিশ্চয়তা প্রদান করে। ভাল টাইপোগ্রাফি পাঠকদের আত্মবিশ্বাস দেয়, তাদের পড়া চালিয়ে যেতে উত্সাহিত করে।

ঐতিহ্যগতভাবে এই কাজটি হাত দ্বারা বা অপটিক্যালি করা হয়েছিল, কারণ ডিজাইনার পাঠ্যের ভারসাম্য বজায় রেখে গণিত নয় চোখকে খুশি করতে চায়। এই বিষয়টিকে প্রায়ই মেট্রিক বনাম অপটিক্যাল অ্যালাইনমেন্ট হিসাবে উল্লেখ করা হয়। নিউ ইয়র্ক টাইমসের মতো বড় প্রকাশনার জন্য, শিরোনাম ভারসাম্য একটি অত্যন্ত গুরুত্বপূর্ণ ব্যবহারকারীর অভিজ্ঞতার বিবরণ।

একটি ডেমো চেষ্টা করুন

দ্রষ্টব্য: মূল নিবন্ধের পাঠ্যের ভারসাম্য বজায় রাখা সাধারণ নয় কারণ এটিকে আলাদাভাবে দাঁড় করানো বা পাঠকের দৃষ্টি আকর্ষণ করার প্রয়োজন নেই।

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

যদিও ওয়েবে, কম নিয়ন্ত্রণ উপলব্ধ রয়েছে কারণ নথিটি ব্যবহারকারীদের উপর ভিত্তি করে আকার এবং রঙ পরিবর্তন করে। text-wrap: balance একটি স্বয়ংক্রিয় উপায়ে ওয়েবে পাঠ্যের ভারসাম্য রক্ষার শিল্প নিয়ে আসে, মুদ্রণ শিল্পের ডিজাইনারদের কাজ এবং ঐতিহ্যের উপর ভিত্তি করে।

ভারসাম্য শিরোনাম

এটি text-wrap: balance জন্য প্রাথমিক ব্যবহারের ক্ষেত্রে হবে এবং হওয়া উচিত। আকারের সাথে চোখ আঁকুন এবং চোখের পড়ার জন্য এটি প্রতিসম এবং সুস্পষ্ট করুন। সমস্ত শিরোনামগুলিকে নিম্নলিখিত CSS দিয়ে সুষম পাঠ্য মোড়কে সেট করুন:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

শুধু এই স্টাইলটি প্রয়োগ করলে আপনি আশানুরূপ ফলাফল নাও পেতে পারেন, কারণ পাঠ্যটি মোড়ানো প্রয়োজন এবং তাই কোথাও থেকে সর্বোচ্চ লাইনের দৈর্ঘ্য প্রয়োগ করতে হবে। আপনি এই পোস্টে উদাহরণগুলিতে একটি max-inline-size সেট দেখতে পাবেন, এই শৈলীটি max-width মতো তবে যে কোনও ভাষার জন্য একবার সেট করা যেতে পারে।

সীমাবদ্ধতা

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

একটি ডেমো চেষ্টা করুন

কর্মক্ষমতা বিবেচনা

আপনার সম্পূর্ণ ডিজাইনে টেক্সট-র্যাপ ব্যালেন্সিং প্রয়োগ করা ভাল ধারণা নয়। ছয় লাইনের সীমার কারণে এটি একটি নষ্ট অনুরোধ, এবং পৃষ্ঠা রেন্ডারের গতিকে প্রভাবিত করতে পারে।

করবেন না

* {
  text-wrap: balance;
}

পরিবর্তে বিবেচনা করুন

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

এই বৈশিষ্ট্যটির জন্য একটি বড় জয় হল যে আপনাকে অপেক্ষা করতে হবে না এবং ফন্ট লোডিং এর সাথে টেক্সট মোড়ানোর ব্যালেন্সিং করতে হবে না, যেমন আপনি আজ জাভাস্ক্রিপ্টের সাথে করছেন। ব্রাউজার এটা যত্ন নেয়!

white-space সম্পত্তির সাথে মিথস্ক্রিয়া

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

.balanced {
  white-space: unset;
  text-wrap: balance;
}

ব্যালেন্সিং উপাদানটির ইনলাইন-আকার পরিবর্তন করবে না

ভারসাম্যপূর্ণ পাঠ্য মোড়ানোর জন্য কিছু জাভাস্ক্রিপ্ট সমাধানের একটি সুবিধা রয়েছে, কারণ তারা ধারণকারী উপাদানটির max-width পরিবর্তন করে। এটি সুষম ব্লকে "সঙ্কুচিত মোড়ানো" হওয়ার একটি অতিরিক্ত বোনাস রয়েছে। text-wrap: balance এই প্রভাব নেই এবং এই উদাহরণে দেখা যেতে পারে:

দেখুন কিভাবে DevTools থেকে দেখানো প্রস্থের শেষে একগুচ্ছ অতিরিক্ত স্থান রয়েছে? কারণ এটি শুধুমাত্র একটি মোড়ানো শৈলী, আকার পরিবর্তনের শৈলী নয়। এই কারণে, এমন কয়েকটি পরিস্থিতি রয়েছে যেখানে text-wrap: balance ততটা দুর্দান্ত নয়, অন্তত আমার মতে। উদাহরণস্বরূপ, একটি কার্ডের ভিতরের শিরোনাম (বা সীমানা বা ছায়া সহ যেকোন ধারক)।

ভারসাম্যপূর্ণ পাঠ্য মোড়ানো বিদ্রূপাত্মকভাবে অন্তর্ভুক্ত উপাদানের ভারসাম্যহীনতা তৈরি করে।

ব্রাউজারটি যে কৌশলটি ব্যবহার করছে তার একটি সংক্ষিপ্ত ব্যাখ্যা

ব্রাউজারটি কার্যকরভাবে ক্ষুদ্রতম প্রস্থের জন্য একটি বাইনারি অনুসন্ধান সম্পাদন করে যা একটি CSS পিক্সেলে (পিক্সেল প্রদর্শন নয়) থেমে কোনো অতিরিক্ত লাইন সৃষ্টি করে না। বাইনারি অনুসন্ধানের ধাপগুলিকে আরও ছোট করতে ব্রাউজারটি গড় লাইন প্রস্থের 80% দিয়ে শুরু হয়।