১। হিরো সেকশানের প্যারেগ্রাফ নিয়ে সমস্যায় পরে নাই এমন মানুষ কমই আছে। শুধু এই প্যারাগ্রাফের জন্য অনেকে একটা আলাদা ডিভ নেয় এবং তার মধ্যে একটি নির্দিষ্ট width দেয়, বা সরাসরি প্যারাগ্রাফে width বা max-width দেয়। আমিও এধরনের কাজই করতাম ch ইউনিটের সাথে পরিচিত হওয়ার আগ পর্যন্ত। এটি এমন একটি ইউনিট যা ক্যারেক্টার কাউন্ট করে, অর্থাৎ আপনি এক লাইনে কয়টা ক্যারেক্টার দেখাদে চান সেটা এর মাধ্যমে বলে দিতে পারবেন।
নিচের উদাহরণে যে হিরো সেকশানটি আছে, সেটার প্যারাগ্রাফে max-width: 64ch দেয়া হয়েছে (৬০ থেকে ৭০ ক্যারেক্টার হলো রিকমেন্ডেড), আলাদা কোন ডিভ নেয়া হয়নি।
২। মাঝে মাঝে এমন হয় যে, একটা হেডিং এর একটা মাত্র শব্দ পরের লাইনে চলে গেছে, বা প্রথম লাইনে দ্বিতীয় লাইনের চেয়ে টেক্সট পরিমাণে বেশি, যা চোখে লাগে। আমরা তখন br ট্যাগ ব্যবহার করি, বা width দিয়ে মামলা নিষ্পত্তি করার চেষ্টা করি। এটা প্যারাগ্রাফের ক্ষেত্রেও হতে পারে। যেমন আমাদের উপরের উদাহরণটি যদি দেখি, তাহলে দেখবো যে প্যারাগ্রাফের শেষ লাইনে অন্য লাইনগুলোর তুলনায় টেক্সট কম।
এই সমস্যাটির একটি সুন্দর সমাধান হলো- text-wrap: balance; নিচের উদাহরণে প্যারাগ্রাফের প্রতিটি লাইনেই অনেকটা সমপরিমাণ টেক্সট রয়েছে।
অনেকটা balance এর মতই আরেকটি ভ্যালু আছে text-wrap প্রোপার্টির, সেটি হচ্ছে- pretty
যখন এমন হয় যে, কোন প্যারাগ্রাফ বা হেডিং এর শেষ লাইনে একটি মাত্র শব্দ থাকে
text-wrap: pretty তখন শেষ লাইনে এই লোনলি শব্দটির সাথে আরেকটি শব্দ যুক্ত করে যেন সে একা একা বোর না হয়। text-wrap: balance; এর ব্রাউজার সাপোর্ট ভাল হলেও text-wrap: pretty এর ব্রাউজার সাপোর্ট এখনও ততটা ভাল না।
৩। text-decoration নামে যে প্রোপার্টি রয়েছে, এটি অনেক বৈষম্যের শিকার। এই বৈষম্য থেকে তাকে মুক্ত করতে none ছাড়া আর কি কি ভ্যালু দেয়া যায়, এবং text-decoration যে আসলে মোট চারটি প্রোপার্টির শর্টহ্যান্ড, আসেন এ বিষয়গুলো জানা যাক।
p {
/*
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-thickness: 2px;
/* shorthand */
text-decoration: underline wavy red 2px;
}
text-decoration এর সাথে সম্পর্কিত আরেকটা মজার প্রোপার্টি হলো- text-underline-offset, এর মাধ্যমে আপনি text-decoration-line এবং টেক্সট এর মধ্যে দূরত্ব তৈরি করতে পারবেন।
৪। মাঝে মাঝে আমরা ব্লগের মধ্যে লম্বা একটা টেক্সটকে লিংক করি, যেটা অনেক সময় পরের লাইনে চলে যায়। আর এই লিংক্ড টেক্সট এ অনেকে ব্যাকগ্রাউন্ড কালার দেয়, যেটা পরের লাইনে যাওয়ার কারনে বাজে দেখায়, যেমনটা দেখাচ্ছে আমাদের আগের উদাহরণের প্যারাগ্রাফের মধ্যে।
অনেকে আবার হেডিং এর মধ্যেও ব্যাকগ্রাউন্ড কালার ব্যবহার করে এবং এই সমস্যার সম্মুখীন হয়। এর একটি সুন্দর সমাধান হচ্ছে box-decoration-break: clone; এটি ব্যবহার করে দেখুন আমাদের আগের প্যারাগ্রাফে যে লিংক্ড টেক্সটটি বাজে দেখাচ্ছিল, সেটি এখন নিচের উদাহরণে ঠিক হয়ে গেছে।
৫। যদিও কোথাও কোথাও … মাঝে মাঝে এখনও সমস্যা হয়, তবে এখন আমরা text-stroke সরাসরি CSS এর মধ্যে ব্যবহার করতে পারি। হ্যা, prefix লাগে, কিন্তু এখন তো আর আগের মত text-shadow দিয়ে ট্রিক করতে হয় না, এটাই বা কম কি!
৬। আজকের শেষ ফিচার হলো line-clamp এটিতেও prefix লাগে, এবং তা সত্ত্বেও এটি এখন ব্যাপকভাবে ব্যবহৃত হচ্ছে। সাধারণত এই বিষয়টি দেখা যায় বিভিন্ন ব্লগ/আর্টিক্যালের কার্ডে। কয় লাইন টেক্সট আমরা কার্ডে শো করবো সেটা নির্ধারণ করাটা অনেকে অনেকভাবে করে থাকে। আমি কাস্টম ডাটা এট্রিবিউটে নাম্বার নিয়ে জাভাস্ক্রিপ্ট দিয়ে সেটা কন্ট্রোল করতাম, যে নাম্বার দেবো এট্রিবিউটে সেই কয়টা ক্যারাক্টারই দেখাবে। তবে line-clamp দিয়ে এই কাজটি আরও সহজে করা যায়।
যে বিষয়গুলো নিয়ে আলোচনা করা হলো, সবগুলোকে একটা কোডব্লকে দিয়ে দেয়া হলো, যেন এগুলোর অন্যান্য ব্যবহার, ব্রাউজার সাপোর্টসব অন্য যে কোন বিষয়ে সার্চ এবং রিসার্চ করতে সুবিধা হয়।
p {
max-width: 64ch;
text-wrap: balance; /* or pretty */
/**********************/
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines to show */
-webkit-box-orient: vertical;
overflow: hidden;
/**********************/
/*
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 2px;
/* shorthand */
text-decoration: underline wavy red 2px;
box-decoration-break: clone;
text-underline-offset: 3px;
}
h1 {
-webkit-text-stroke-color: #333;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
}
আজকে এ পর্যন্তই, সবাই ভাল থাকবেন, আল্লাহ হাফেজ।
