Articles
সিএসএস-এর পরিচিতি
টেক্সট ব্যবধান সম্পর্কিত CSS বৈশিষ্ট্যগুলি

টেক্সট ব্যবধান সম্পর্কিত CSS বৈশিষ্ট্যগুলি

এই প্রবন্ধটি টেক্সট স্পেসিং সম্পর্কিত CSS প্রপার্টিগুলি ব্যাখ্যা করে।

আপনি line-height এবং word-spacing এর মতো প্রপার্টিগুলি কীভাবে ব্যবহার করবেন এবং সেগুলি কীভাবে লিখবেন তা শিখতে পারবেন।

YouTube Video

পূর্বরূপের জন্য HTML তৈরি করা

css-text-space.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

টাইপোগ্রাফি (পাঠ্য মার্জিন-সম্পর্কিত)

line-height প্রপার্টি 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height একটি CSS প্রপার্টি যা লাইন স্পেসিং (লাইন উচ্চতা) নির্ধারণ করতে ব্যবহৃত হয়। line-height লাইনগুলির মধ্যে উল্লম্ব দূরত্ব নির্ধারণ করে, যা পঠনযোগ্যতা বাড়াতে বা ডিজাইনের একটি অংশ হিসাবে স্পেসিং সামঞ্জস্য করতে ব্যবহৃত হয়।

line-height এর প্রধান ব্যবহার

ইউনিটবিহীন সংখ্যা 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • ফন্ট সাইজের সাথে সম্পর্কিত একটি উচ্চতা নির্ধারণ করুন। উদাহরণস্বরূপ, 1.5 নির্ধারণ করলে লাইন উচ্চতা ফন্ট সাইজের 1.5 গুণ হয়ে যায়। এই পদ্ধতিটি রেসপন্সিভ ডিজাইনের জন্য উপকারী।
শতাংশ 
1p {
2    line-height: 150%;
3}
  • লাইন উচ্চতা ফন্ট সাইজের শতাংশ হিসাবে নির্ধারণ করুন। উদাহরণস্বরূপ, 150% নির্ধারণ করলে লাইন উচ্চতা ফন্ট সাইজের 150% হয়।
স্থির মান (px, em, rem, ইত্যাদি) 
1p {
2    line-height: 20px;
3}
  • লাইন উচ্চতা পরম ইউনিটে নির্ধারণ করুন। উদাহরণস্বরূপ, আপনি 20px এর মতো একটি নির্দিষ্ট মান নির্ধারণ করতে পারেন, তবে এটি রেসপন্সিভ ডিজাইনে নমনীয়তার অভাব ঘটাতে পারে।
normal 
1p {
2    line-height: normal;
3}
  • normal নির্ধারণ করলে ব্রাউজারের ডিফল্ট লাইন স্পেসিং সেটিংস প্রয়োগ হয়। সাধারণত, এটি ফন্ট সাইজের প্রায় 1.2 থেকে 1.4 গুণ হবে।

line-height ব্যবহারের উদাহরণ

পাঠযোগ্য প্যারাগ্রাফ
  • পঠনযোগ্যতার জন্য সাধারণত 1.5 থেকে 1.6 এর একটি line-height সুপারিশ করা হয়। যদি লাইন স্পেসিং খুব সরু হয়, তাহলে টেক্সট গাদাগাদি লাগবে এবং পড়তে অসুবিধা হবে, এবং যদি এটি খুব চওড়া হয়, তাহলে টেক্সট বিচ্ছিন্ন মনে হবে।
হেডিং ডিজাইন
  • শিরোনাম এবং টাইটেলের মতো ক্ষেত্রে, যেখানে টেক্সট বড় হয়, লাইন স্পেসিং হ্রাস করা যেতে পারে। 1.1 বা 1.2 এর মতো সেটিংস প্রায়ই ব্যবহৃত হয়।

সারসংক্ষেপ

  • line-height টেক্সটের পঠনযোগ্যতা এবং নকশা উভয়ই উন্নত করার জন্য একটি গুরুত্বপূর্ণ প্রপার্টি।
  • আপেক্ষিক মানগুলি (সংখ্যা বা শতাংশ) ব্যবহার করলে রেসপন্সিভ ডিজাইনে মানিয়ে নেওয়া সহজ হয়।
  • বড় টেক্সটযুক্ত শিরোনাম এবং ছোট টেক্সটযুক্ত অনুচ্ছেদগুলির জন্য প্রতিটির উপযুক্ত লাইন স্পেসিং নির্ধারণ করা প্রয়োজন।

এই প্রপার্টি ব্যবহার করলে টেক্সটের চেহারা আরও পড়ার উপযোগী করা যায় এবং এর নকশার গুণগত মান বৃদ্ধি হয়।

letter-spacing প্রপার্টি 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing একটি CSS প্রপার্টি যা অক্ষরগুলির মধ্যে স্পেসিং (লেটার স্পেসিং) সামঞ্জস্য করতে ব্যবহৃত হয়। এই প্রপার্টিটি টেক্সট নকশাকে পরিপাটি করার, পঠনযোগ্যতা বাড়ানোর এবং নির্দিষ্ট স্টাইল অর্জনের জন্য ব্যবহৃত হতে পারে।

এই উদাহরণে, এটি নিম্নরূপ নির্ধারণ করা হয়েছে।

  • normal: ডিফল্ট লেটার স্পেসিং। এটি একটি মানক মান যা ব্রাউজার এবং ফন্ট দ্বারা নির্ধারিত হয়।
  • 4px: বর্ধিত অক্ষরের ফাঁকের একটি উদাহরণ। প্রতিটি অক্ষরের মধ্যে ৪ পিক্সেল ফাঁক যোগ করে।
  • -1px: সংকুচিত অক্ষরের ফাঁকের একটি উদাহরণ। প্রতিটি অক্ষরের মধ্যে ১ পিক্সেল ফাঁক হ্রাস করে।

লেটার-স্পেসিং কীভাবে ব্যবহার করবেন

ইউনিট সহ মান 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • ইতিবাচক মান সেট করলে অক্ষরের ফাঁক বৃদ্ধি পাবে।
  • ঋণাত্মক মান সেট করলে অক্ষরের ফাঁক কমে যাবে।
  • ইউনিট সাধারণত px (পিক্সেল) বা em এ থাকে।
ডিফল্ট: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • ডিফল্ট অক্ষর ব্যবধান ব্যবহার করুন। সাধারণত, ফন্ট দ্বারা নির্ধারিত স্ট্যান্ডার্ড অক্ষর ব্যবধান প্রয়োগ করা হয়।

লেটার-স্পেসিং ব্যবহারের উদাহরণ

  • পঠনের উন্নতি: ছোট ফন্ট আকার বা অত্যন্ত সংকুচিত ফন্টের জন্য, আপনি letter-spacing বাড়িয়ে পঠনযোগ্যতা উন্নত করতে পারেন।
  • ডিজাইন সমন্বয়: আপনি শিরোনাম বা লোগোর মতো ডিজাইন উপাদানগুলোকে চাক্ষুষভাবে গুরুত্ব দিতে অক্ষর ব্যবধান সমন্বয় করতে পারেন।
  • শব্দের মধ্যে সমন্বয়: আপনি শব্দের মধ্যে না বরং অক্ষর স্তরে ব্যবধান সমন্বয় করতে পারেন। letter-spacing অক্ষর-স্তরের ব্যবধান সমন্বয় করে, কিন্তু শব্দের মধ্যে ব্যবধান বাড়াতে word-spacing ব্যবহার করুন।
  • ডিজাইন ভারসাম্য: আপনি যদি অক্ষরের ব্যবধান খুব বেশি বাড়িয়ে দেন, তাহলে পুরো পাঠ্যটি খুব প্রসারিত দেখাতে পারে। অন্যদিকে, যদি আপনি এটি খুব বেশি কমিয়ে দেন, তাহলে পাঠ্যটি চাপা পড়ে যেতে পারে এবং পড়তে কঠিন হয়ে উঠতে পারে, তাই উপযুক্ত ভারসাম্য রাখা জরুরি।

সারসংক্ষেপ

  • letter-spacing একটি বৈশিষ্ট্য যা অক্ষরের মধ্যে ব্যবধান সমন্বয় করে, যা ডিজাইন এবং পঠনযোগ্যতার উপর প্রভাব ফেলে।
  • আপনি ইতিবাচক মান দিয়ে ব্যবধান বাড়াতে এবং ঋণাত্মক মান দিয়ে কমাতে পারেন।
  • এটি শিরোনাম এবং নির্দিষ্ট ডিজাইন উপাদানগুলির জন্য কার্যকর, কিন্তু পঠনযোগ্যতা ক্ষতিগ্রস্থ না হওয়ার বিষয়ে সতর্ক থাকুন।

এই বৈশিষ্ট্যটি ব্যবহার করে, আপনি পাঠ্যের প্রাকটিস পরিবর্তন করতে পারেন এবং আকর্ষণীয় ডিজাইন অর্জন করতে পারেন।

ওয়ার্ড-স্পেসিং প্রপার্টি 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing হল একটি CSS বৈশিষ্ট্য যা এক পাঠ্যতে শব্দের মধ্যে ব্যবধান নিয়ন্ত্রণ করে। এই বৈশিষ্ট্যটির সঠিক ব্যবহার দৃশ্যমান ভারসাম্য এবং পাঠ্য পঠনযোগ্যতা উন্নত করতে পারে। word-spacing বিশেষভাবে টাইপোগ্রাফি-কেন্দ্রিক ডিজাইন এবং প্রতিক্রিয়াশীল ডিজাইন দৃশ্যকল্পে উপকারী।

এই উদাহরণে, এটি নিম্নরূপ নির্ধারণ করা হয়েছে।

  • normal: ডিফল্ট শব্দ ব্যবধান প্রয়োগ করে। এটি ব্রাউজারের প্রাথমিক মান।
  • 4px: বাড়ানো শব্দ ব্যবধানের একটি উদাহরণ। প্রতিটি শব্দের মধ্যে 4 পিক্সেলের মার্জিন যোগ করে।
  • -1px: কমানো শব্দ ব্যবধানের একটি উদাহরণ। প্রতিটি শব্দের মধ্যে ব্যবধান 1 পিক্সেল কমায়।
  • word-and-letter-spacing: কমানো শব্দ এবং অক্ষর ব্যবধানের একটি উদাহরণ। স্বাভাবিকের তুলনায় শব্দের মধ্যে ব্যবধান 0.1em দ্বারা এবং অক্ষরের মধ্যে ব্যবধান 0.05em দ্বারা কমায়।

ইতিবাচক এবং ঋণাত্মক মান ব্যবহার

word-spacing এর জন্য একটি ইতিবাচক মান সেট করা হলে শব্দ ব্যবধান প্রসারিত হবে। অন্যদিকে, ঋণাত্মক মান ব্যবহার করলে শব্দগুলির মধ্যবর্তী ফাঁক সংকুচিত হয়। বিশেষ নকশার কারণে ঋণাত্মক মান ভিজ্যুয়াল প্রভাব বাড়াতে বা অক্ষরের ফাঁক কমাতে ব্যবহার করা যেতে পারে।

letter-spacing এর সাথে পার্থক্য

word-spacing হলো একটি প্রপার্টি, যা শব্দগুলির মধ্যে ফাঁক নিয়ন্ত্রণ করে, আর letter-spacing অক্ষরগুলির ফাঁক নিয়ন্ত্রণ করে। এই প্রপার্টিগুলি একত্রিত করে আপনি পুরো টেক্সটের টাইপোগ্রাফির উপর আরও নির্ভুল নিয়ন্ত্রণ পেতে পারেন।

সতর্কতা এবং সেরা পদ্ধতি

  • অতিরিক্ত ফাঁক সমন্বয়: word-spacing এর অতিরিক্ত ব্যবহার পাঠযোগ্যতা কমিয়ে দিতে পারে। বিশেষ করে খুব বড় বা খুব ছোট ফাঁক ব্যবহারকারীদের জন্য বিরক্তিকর হতে পারে, তাই মাঝারি সমন্বয় গুরুত্বপূর্ণ।
  • রেসপনসিভ ডিজাইন: em বা rem ব্যবহার করে আপেক্ষিক মান নির্ধারণ করা রেসপনসিভ ডিজাইনের জন্য কার্যকর কারণ এটি বিভিন্ন স্ক্রিন সাইজে সঠিক প্রদর্শন নিশ্চিত করে।
  • হেডিং স্টাইল সমন্বয়: হেডিং টেক্সটে শব্দগুলির মধ্যে ফাঁক বড় করে ভিজ্যুয়াল গুরুত্ব যোগ করা যেতে পারে। এটি কন্টেন্টের শ্রেণিবিন্যাস পরিষ্কার করতে এবং উন্নত নকশা অর্জনে সহায়ক হয়।

word-break বৈশিষ্ট্য 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break হল একটি CSS প্রোপার্টি, যা টেক্সট কন্টেইনারের প্রস্থ অতিক্রম করলে কীভাবে মোড়ানো হবে তা নিয়ন্ত্রণ করে। সাধারণত, ব্রাউজার শব্দের সীমারেখায় লাইন ভাঙে, তবে দীর্ঘ শব্দ বা URL উপস্থিত থাকলে নির্দিষ্ট সেটিংস চেহারা এবং পঠনযোগ্যতা উন্নত করতে পারে।

আপনি word-break প্রোপার্টির জন্য নিম্নলিখিত মান নির্ধারণ করতে পারেন।

  • normal

    normal ডিফল্ট মান। যখন কোনও শব্দ কন্টেইনারের প্রস্থ অতিক্রম করে, এটি শব্দের সীমারেখায় ভেঙে যাবে। এই সেটিংটি ইংরেজি মত ভাষায় সাধারণ, এবং শব্দের মাঝে ভাঙন ঘটে না।

  • break-all

    break-all এমন একটি সেটিং যেখানে প্রয়োজন অনুযায়ী যেকোনো চরিত্রের পরে লাইন ব্রেক যোগ করা যেতে পারে। বিশেষত যখন দীর্ঘ শব্দ বা URL অন্তর্ভুক্ত থাকে, তখন লেআউট বিঘ্নিত হতে রোধ করতে লাইন ব্রেক চরিত্র স্তরে ঘটে।

  • keep-all

    keep-all বিশেষত এশীয় ভাষার (জাপানি, চীনা, কোরিয়ান ইত্যাদি) জন্য ব্যবহৃত একটি সেটিং। এই সেটিংয়ে, পুরো শব্দ সংরক্ষিত হয় এবং শব্দের মাঝখানে কোনও ভাঙন ঘটে না। তবে, ইংরেজি এর মতো স্পেস-আলাদা ভাষার জন্য, স্বাভাবিক শব্দ-সীমান্ত লাইন ব্রেক প্রয়োগ করা হয়।

এই উদাহরণটি তিনটি ভিন্ন word-break সেটিং দেখায়। word-break-normal এর সাথে, পুরো শব্দ সংরক্ষণ করা হয় এবং এটি কন্টেইনারের প্রস্থ অতিক্রম করলে শব্দ-সীমান্তে ভাঙে। word-break-break-all এর সাথে, শব্দের মাঝখানেও ভাঙন ঘটে। word-break-keep-all জাপানি মতো এশীয় ভাষার জন্য প্রাকৃতিক ভাঙন এবং ইংরেজির জন্য শব্দ-সীমান্তে ভাঙন অনুমতি দেয়।

word-break প্রয়োগের দৃশ্যপটগুলো

মোবাইল ডিভাইস এবং প্রতিক্রিয়াশীল ডিজাইন 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

মোবাইল ডিভাইসে, স্ক্রিনের প্রস্থ সীমিত, যা URL বা দীর্ঘ শব্দসহ টেক্সট স্ক্রিনের প্রস্থ অতিক্রম করতে পারে। এমন ক্ষেত্রে, word-break: break-all; প্রয়োগ করলে লাইন ব্রেক চরিত্র স্তরে ঘটে স্ক্রিন প্রস্থের সাথে মানানসই হয়, যা পঠনযোগ্যতা উন্নত করে।

hyphens প্রোপার্টি 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • hyphens প্রোপার্টি CSS-এ ব্যবহৃত হয় এটি নির্ধারণ করার জন্য যে টেক্সট ভাঙার সময় শব্দ বিভাজন (হাইফেন দিয়ে শব্দ বিভাজন) কিভাবে পরিচালিত হবে। এই প্রোপার্টি ঠিকভাবে সেট করার মাধ্যমে, আপনি টেক্সটের পাঠযোগ্যতা এবং চেহারা উন্নত করতে পারেন। দীর্ঘ শব্দগুলো ভাঙতে হলে হাইফেন যুক্ত করা বিশেষত উপকারী।

  • যেহেতু হাইফেনেশনের নিয়ম ভাষাভেদে ভিন্ন হয়, এই প্রোপার্টি টেক্সটের লোকেলের উপর নির্ভর করে।

সিনট্যাক্স 

1element {
2    hyphens: none | manual | auto;
3}

hyphens প্রোপার্টি নিচের মানগুলিতে সেট করা যেতে পারে:।

  • none: কোন হাইফেন ব্যবহার করা হয় না। শব্দ সাধারণত শুধুমাত্র শব্দের শেষে ভাঙে।
  • manual: হাইফেন ম্যানুয়ালি প্রয়োগ করতে হয়। এই ক্ষেত্রে, আপনাকে HTML-এর ভিতরে ম্যানুয়ালি হাইফেনেশনের পয়েন্ট নির্ধারণ করতে হবে। উদাহরণস্বরূপ, আপনি &shy; (সফট হাইফেন) ব্যবহার করতে পারেন।
  • auto: ব্রাউজার স্বয়ংক্রিয়ভাবে উপযুক্ত স্থানে হাইফেন প্রয়োগ করে। এই ক্ষেত্রে, ডকুমেন্টের ভাষা (lang অ্যাট্রিবিউট) সঠিকভাবে নির্ধারিত থাকা আবশ্যক।

নোটস

  • ভাষার সেটিংসের গুরুত্ব: যখন hyphens: auto; ব্যবহার করা হয়, সঠিক হাইফেনেশনের জন্য HTML ডকুমেন্টের lang অ্যাট্রিবিউট সঠিকভাবে সেট করা আবশ্যক।
  • ফন্টের নির্ভরশীলতা: কিছু ফন্ট হাইফেনেশনের জন্য উপযুক্ত নাও হতে পারে।
  • হাইফেনেশনের অভিধান ব্যবহারে: হাইফেনেশনের নিয়ম ব্রাউজারের ব্যবহৃত অভিধানের উপর নির্ভর করে। সুতরাং, কিছু ভাষার ক্ষেত্রে এটি প্রত্যাশিতভাবে কাজ নাও করতে পারে।

সারসংক্ষেপ

hyphens প্রোপার্টি সঠিকভাবে ব্যবহার করে আপনি টেক্সটের বিন্যাসকে উল্লেখযোগ্যভাবে উন্নত করতে পারেন। বিশেষত বহু-ভাষিক ওয়েবসাইট এবং মোবাইল-বান্ধব ডিজাইনের জন্য, auto এবং manual সঠিকভাবে ব্যবহার করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করা যায়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

টেক্সট-সম্পর্কিত CSS প্রোপার্টিগুলিকোড প্রদর্শন এবং উদ্ধৃতির জন্য CSS বৈশিষ্ট্য