CSS টেক্সট-র্যাপ: সুন্দর

অপ্ট-ইন অপ্টিমাইজ করা টেক্সট মোড়ানো, গতির উপর সৌন্দর্যের জন্য।

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

ক্রোম 117 থেকে আপনি একটি নতুন টেক্সট র‌্যাপিং ফিচার ব্যবহার করতে পারেন— text-wrap: pretty সিএসএস টেক্সট লেভেল 4 থেকে সুন্দর।

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

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

এতিম বা বিধবা ছাড়া একই অনুচ্ছেদের তুলনায় শুরুতে একজন বিধবা এবং শেষে একজন এতিম সহ একটি অনুচ্ছেদ দেখানো হয়েছে।
ছবি গুগল ফন্ট থেকে নেওয়া—বিধবা ও অনাথ

Chrome 117 থেকে, CSS-এর একটি লাইন দিয়ে এতিমদের এড়ানো যেতে পারে: text-wrap: pretty

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

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

এছাড়াও রয়েছে text-wrap: balance , যা অনাথদের আটকায় না, তবে পাঠ্যকে এমনভাবে মোড়ানো নিশ্চিত করে যা একটি সুরেলা পাঠ্য ব্লক তৈরি করে। আমি ব্যক্তিগতভাবে শিরোনামের জন্য balance এবং অনুচ্ছেদের জন্য pretty ব্যবহার করি।

আপনি যদি লাইনের সর্বোত্তম সংখ্যা নির্ধারণ করতে ব্যবহৃত অ্যালগরিদমের বিশদ বিবরণে আগ্রহী হন, বা কর্মক্ষমতা বিবেচনা করে, এখানে বৈশিষ্ট্যটির পিছনে ইঞ্জিনিয়ার দ্বারা তৈরি নকশা নথির একটি লিঙ্ক , Koji Ishii

আপনার যদি অন্য লাইন ব্রেকিং উন্নতি বা পরামর্শ থাকে, আমরা সেগুলি শুনতে চাই! Chromium বাগ ট্র্যাকারে বিশদ বিবরণ, ভাল এবং খারাপ লাইন বিরতির উদাহরণ সহ একটি সমস্যা ফাইল করুন এবং আমরা আপনার কাছে ফিরে আসব।