CSS clamp() জেনারেটর

CSS clamp() জেনারেটর কী?

CSS clamp() জেনারেটর হলো ফ্রন্ট-এন্ড ডেভেলপার ও ডিজাইনারদের জন্য একটি বিনামূল্যের ফ্লুইড-টাইপোগ্রাফি ক্যালকুলেটর। আপনি এটিকে একটি ন্যূনতম ফন্ট আকার, একটি সর্বোচ্চ ফন্ট আকার, একটি ন্যূনতম ভিউপোর্ট প্রস্থ এবং একটি সর্বোচ্চ ভিউপোর্ট প্রস্থ দেন; এটি একটি clamp(min, preferred, max) ঘোষণা ফিরিয়ে দেয় যেখানে preferred মান একটি rem অফসেটকে একটি vw ঢালের সঙ্গে মেশায়, ফলে টেক্সট স্ক্রিনের সঙ্গে রৈখিকভাবে বাড়ে এবং কখনো আপনার সীমা অতিক্রম করে না। এটি স্তরিত font-size মিডিয়া কোয়েরির প্রয়োজন দূর করে এবং প্রতিটি ডিভাইসে শিরোনাম ও মূল লেখাকে রেসপন্সিভ রাখে। মানটি কীভাবে রেন্ডার হয় তা দেখতে একটি প্রিভিউ আকার বাছুন, আউটপুট একক rem ও px-এর মধ্যে পরিবর্তন করুন, এবং লাইনটি সরাসরি আপনার স্টাইলশিটে কপি করুন।

CSS clamp() জেনারেটর কীভাবে ব্যবহার করবেন

1. ন্যূনতম ফন্ট আকার লিখুন — সবচেয়ে ছোট স্ক্রিনে টেক্সট যে আকারের হওয়া উচিত।
2. সর্বোচ্চ ফন্ট আকার লিখুন — সবচেয়ে বড় স্ক্রিনে টেক্সট যে আকারে পৌঁছানো উচিত।
3. যে ন্যূনতম ও সর্বোচ্চ ভিউপোর্ট প্রস্থের মধ্যে আকারটি স্কেল হওয়া উচিত তা নির্ধারণ করুন।
4. আপনি চাইলে আউটপুট একক পরিবর্তন করতে সেটিংস খুলুন (rem অ্যাক্সেসিবিলিটি বজায় রাখে; px-ও উপলব্ধ)।
5. ওই ভিউপোর্টে নমুনা টেক্সট রেন্ডার করতে একটি প্রিভিউ আকার বাছুন, তারপর লাইভ clamp() মান পড়ুন।
6. তৈরি হওয়া clamp() এক্সপ্রেশন কপি করুন এবং এটি আপনার CSS font-size-এ পেস্ট করুন।

উদাহরণ

ন্যূনতম ফন্ট 16, সর্বোচ্চ ফন্ট 20, ন্যূনতম vw 320, সর্বোচ্চ vw 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

ন্যূনতম ফন্ট 32, সর্বোচ্চ ফন্ট 64, ন্যূনতম vw 320, সর্বোচ্চ vw 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

ন্যূনতম ফন্ট 12, সর্বোচ্চ ফন্ট 14, ন্যূনতম vw 480, সর্বোচ্চ vw 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

সচরাচর জিজ্ঞাসিত প্রশ্ন

মিডিয়া কোয়েরি ছাড়া clamp() মান কীভাবে স্কেল হয়?

clamp(min, preferred, max) একটি নিম্নসীমা, একটি preferred (ফ্লুইড) মান এবং একটি ঊর্ধ্বসীমা নেয়। preferred মানটি rem + vw আকারের একটি রেখা, যা এমনভাবে গণনা করা হয় যেন ফন্টটি ন্যূনতম ভিউপোর্টে আপনার ন্যূনতমের সমান এবং সর্বোচ্চ ভিউপোর্টে আপনার সর্বোচ্চের সমান হয়। ওই প্রস্থগুলোর মধ্যে ব্রাউজার স্বয়ংক্রিয়ভাবে ইন্টারপোলেট করে, আর সেগুলোর বাইরে clamp() আকারটিকে নিকটতম সীমায় স্থির করে — সবই একটি ঘোষণায়।

আউটপুট px-এর বদলে rem-এ কেন?

স্থির অংশগুলোর জন্য rem ব্যবহার করলে তা ব্যবহারকারীর ব্রাউজারের ফন্ট-আকার সেটিং সম্মান করে, যা অ্যাক্সেসিবিলিটির জন্য ভালো। ভিউপোর্ট-সাপেক্ষ ঢাল vw-তে প্রকাশ করা হয়। আপনার প্রকল্পে পরম একক প্রয়োজন হলে সেটিংসে এককটি px-এ পরিবর্তন করতে পারেন, তবে rem হলো প্রস্তাবিত ডিফল্ট।

আমার কোন ভিউপোর্ট পরিসর ব্যবহার করা উচিত?

একটি প্রচলিত পছন্দ হলো ন্যূনতমের জন্য আপনার সবচেয়ে ছোট সমর্থিত প্রস্থ (প্রায়ই 320px বা 360px) এবং সর্বোচ্চের জন্য আপনার সবচেয়ে চওড়া কনটেন্ট কন্টেইনার (যেমন 1240px–1536px)। ফন্টটি কেবল ওই পরিসরের ভেতরেই সম্পূর্ণ ফ্লুইড; তার নিচে টেক্সট ন্যূনতমে থাকে এবং তার ওপরে সর্বোচ্চে থাকে।

এটি কি শুধু font-size নয়, যেকোনো CSS দৈর্ঘ্যের জন্য কাজ করে?

হ্যাঁ। তৈরি হওয়া clamp() মানটি কেবল একটি দৈর্ঘ্য, তাই আপনি এটি padding, margin, gap বা দৈর্ঘ্য গ্রহণ করে এমন যেকোনো প্রপার্টিতে পেস্ট করতে পারেন। লেবেলগুলোতে font-size উল্লেখ করা হয়েছে কারণ ফ্লুইড টাইপোগ্রাফি সবচেয়ে প্রচলিত ব্যবহার, তবে স্পেসিংয়ের জন্য গণিত অভিন্ন।

আমার ডেটা কি কোথাও পাঠানো হয়?

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