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

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

Adam Argyle

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

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

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

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

CSS Text 4- এর text-wrap: balance ব্যবহার করে, আপনি ব্রাউজারকে টেক্সটের জন্য সবচেয়ে ভারসাম্যপূর্ণ লাইন র‍্যাপিং সমাধানটি খুঁজে বের করতে বলতে পারেন। ব্রাউজার ফন্ট সাইজ, ভাষা এবং বরাদ্দকৃত জায়গার মতো সমস্ত বিষয় সম্পর্কে অবগত থাকে । বর্তমানে ব্রাউজারের ভারসাম্যপূর্ণ টেক্সট র‍্যাপিংয়ের ফলাফল দেখতে এইরকম হয়:

.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 পিক্সেলে (ডিসপ্লে পিক্সেলে নয়) থেমে যায়। বাইনারি সার্চের ধাপ আরও কমাতে ব্রাউজারটি গড় লাইন প্রস্থের ৮০% থেকে শুরু করে।