সিএসএস দিয়ে হাইফেন পরিচালনা করুন

জো মেডলি
Joe Medley

অনেক লিখিত ভাষায়, সিলেবল এবং শব্দের মধ্যে লাইন ভেঙ্গে ফেলা সম্ভব। এটি প্রায়শই করা হয় যাতে পাঠ্য অঞ্চলে কম লাইন থাকার লক্ষ্যে পাঠ্যের একটি লাইনে আরও অক্ষর স্থাপন করা যেতে পারে এবং এইভাবে স্থান বাঁচানো যায়। এই ধরনের ভাষায় বিরতি একটি হাইফেন ('-') দিয়ে দৃশ্যমানভাবে নির্দেশিত হয়।

CSS টেক্সট মডিউল লেভেল 3 একটি হাইফেন বৈশিষ্ট্যকে সংজ্ঞায়িত করে যাতে ব্যবহারকারীদের হাইফেন কখন দেখানো হয় এবং দেখানো হলে তারা কীভাবে আচরণ করে। সংস্করণ 55 দিয়ে শুরু করে, Chrome হাইফেন বৈশিষ্ট্য প্রয়োগ করে। স্পেসিফিকেশন অনুসারে, হাইফেন সম্পত্তির তিনটি মান রয়েছে: none , manual , এবং auto . এটি ব্যাখ্যা করার জন্য আমাদের একটি নরম হাইফেন ব্যবহার করতে হবে ( ­ ) নিম্নলিখিত উদাহরণের মতো।

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

একটি সফ্ট হাইফেন এমন একটি যা শুধুমাত্র তখনই দেখানো হবে যখন এটি ট্রেলিং মার্জিনে ঘটে। ক্রোম 55 বা তার পরে এই হাইফেন কীভাবে রেন্ডার হয় তা নির্ভর করে CSS hypens প্রপার্টির মানের উপর।

-webkit-hyphens: manual;
hyphens: manual;

এগুলিকে একত্রিত করলে এর মতো একটি ফলাফল পাওয়া যায়:

একক লাইন স্ক্রিনশট

লক্ষ্য করুন যে নরম হাইফেন দৃশ্যমান নয়। সব ক্ষেত্রে, যখন সফট হাইফেন সম্বলিত একটি শব্দ একটি লাইনে ফিট হয়, তখন হাইপেনটি অদৃশ্য হয়ে যাবে। এখন, হাইফেনের তিনটি মান কীভাবে আচরণ করে তা দেখা যাক।

কোনোটিই ব্যবহার করছেন না

প্রথম উদাহরণে, হাইফেন সম্পত্তি none । এটি নরম হাইফেনকে কখনও প্রদর্শিত হতে বাধা দেয়। আপনি উইন্ডোর আকার সামঞ্জস্য করে এটি নিশ্চিত করতে পারেন যাতে 'এলিট' শব্দটি পাঠ্যের দৃশ্যমান লাইনে ফিট না হয়।

Google ipsum dolor sit amet, consectetur adipiscing elit.

ম্যানুয়াল ব্যবহার করে

দ্বিতীয় উদাহরণে, হাইফেন বৈশিষ্ট্যটি manual হিসাবে সেট করা হয়েছে মানে নরম হাইফেনটি তখনই প্রদর্শিত হবে যখন মার্জিন 'এলিট' শব্দটি ভাঙবে। আবার, আপনি উইন্ডোর আকার সামঞ্জস্য করে এটি নিশ্চিত করতে পারেন।

Google ipsum dolor sit amet, consectetur adipiscing elit.

অটো ব্যবহার করে

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

Google ipsum dolor sit amet, consectetur adipiscing elit.