পাঠ্য এবং টাইপোগ্রাফি

CSS পডকাস্ট - 036: টেক্সট এবং টাইপোগ্রাফি

টেক্সট ওয়েবের মূল বিল্ডিং ব্লকগুলির মধ্যে একটি।

একটি ওয়েবসাইট তৈরি করার সময়, আপনার পাঠ্যকে স্টাইল করার প্রয়োজন নেই; এইচটিএমএল আসলে কিছু বেশ যুক্তিসঙ্গত ডিফল্ট স্টাইলিং আছে.

যাইহোক, টেক্সট সম্ভবত আপনার ওয়েবসাইটের বেশিরভাগ অংশ তৈরি করবে, তাই এটিকে স্প্রুস করার জন্য কিছু স্টাইলিং যোগ করা সার্থক। কয়েকটি মৌলিক বৈশিষ্ট্য পরিবর্তন করে, আপনি আপনার ব্যবহারকারীদের পড়ার অভিজ্ঞতা উল্লেখযোগ্যভাবে উন্নত করতে পারেন!

এই মডিউলে, আমরা @font-face নিয়ম দিয়ে শুরু করব, যা আপনাকে আপনার ওয়েবপৃষ্ঠাগুলিতে কাস্টম ফন্ট আমদানি করতে দেয়। এটি নিশ্চিত করে যে আপনার কাছে আপনার প্রয়োজনীয় সঠিক টাইপোগ্রাফি রয়েছে, ব্যবহারকারী-ইনস্টল করা ফন্টগুলি থেকে স্বাধীন।

এর পরে, আমরা font-family , font-style , font-weight এবং font-size সহ প্রয়োজনীয় CSS ফন্ট বৈশিষ্ট্যগুলি কভার করব। এই বেসিকগুলি স্টাইল এবং পঠনযোগ্যতা উভয়ের জন্য টেক্সট ম্যানিপুলেট করার পর্যায় সেট করে।

আমরা পরিবর্তনশীল ফন্ট এবং ছদ্ম-উপাদানগুলির মতো উন্নত বিষয়গুলির সাথে শেষ করার আগে text-indent এবং word-spacing মতো অনুচ্ছেদ-নির্দিষ্ট বৈশিষ্ট্যগুলিকে স্পর্শ করব, যা আপনার টাইপোগ্রাফিক নিয়ন্ত্রণকে আরও পরিমার্জিত করে।

এই CSS কৌশলগুলির আপনার বোঝাপড়া এবং প্রয়োগকে দৃঢ় করার জন্য ব্যবহারিক উদাহরণ এবং টিপস জুড়ে দেওয়া হবে।

@font-face নিয়ম

@font-face সিএসএস অ্যাট-রুল ওয়েব ডিজাইনে সহায়ক, আপনাকে পাঠ্য প্রদর্শনের জন্য কাস্টম ফন্ট নির্দিষ্ট করতে এবং ব্যবহার করতে দেয়। @font-face এর সৌন্দর্য হল এর বহুমুখীতা: এটি আপনাকে দূরবর্তী সার্ভার থেকে বা ব্যবহারকারীর ডিভাইসে ইনস্টল করা ফন্ট থেকে হরফ উৎসর্গ করতে দেয়।

সিনট্যাক্স

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

বর্ণনাকারী

ascent-override

বেসলাইনের উপরে স্থান প্রভাবিত করে, আরোহ মেট্রিক কাস্টমাইজ করে।

descent-override

বেসলাইনের নিচের স্থানকে প্রভাবিত করে ডিসেন্ট মেট্রিক অ্যাডজাস্ট করে।

font-display

ডাউনলোডের অবস্থার উপর নির্ভর করে ফন্টের প্রদর্শন আচরণ নিয়ন্ত্রণ করে।

font-family

ফন্ট-সম্পর্কিত বৈশিষ্ট্যের মধ্যে ব্যবহারের জন্য ফন্টের নাম দেয়।

font-stretch

গ্রহণযোগ্য অনুভূমিক স্কেলিং সেট করে, একটি একক মান বা ব্যাপ্তি হিসাবে নির্দিষ্ট করে৷

font-style

তির্যক শৈলীর জন্য কোণ ব্যাপ্তি সমর্থনকারী ফন্ট শৈলী সংজ্ঞায়িত করে।

font-weight

ফন্টের ওজন বা উপলব্ধ ওজনের পরিসীমা নির্ধারণ করে।

font-feature-settings

OpenType ফন্ট বৈশিষ্ট্যগুলিতে অ্যাক্সেস সক্ষম করে৷

font-variation-settings

পরিবর্তনশীল ফন্ট সেটিংসের উপর সূক্ষ্ম সুরক্ষিত নিয়ন্ত্রণ প্রদান করে।

line-gap-override

ফন্টের ডিফল্ট লাইন ফাঁক ওভাররাইড করে।

size-adjust

ফন্টের রূপরেখা এবং মেট্রিক্সে একটি স্কেলিং ফ্যাক্টর প্রয়োগ করে।

src

স্থানীয় বা দূরবর্তী, ফন্ট উত্স সংজ্ঞায়িত করে। @font-face নিয়মের জন্য এটি প্রয়োজনীয়। src এর মধ্যে url() এবং local() একত্রিত করা একটি সাধারণ কৌশল যা একটি স্থানীয় ফন্ট ব্যবহার করে যদি উপলব্ধ থাকে, একটি দূরবর্তী ফন্ট ফাইলে একটি ফলব্যাক হিসাবে ফিরে যায়। ব্রাউজারগুলি ঘোষণার ক্রম অনুসারে সংস্থানগুলিকে অগ্রাধিকার দেয়, তাই local() সাধারণত url() আগে থাকা উচিত।

unicode-range

এই ফন্টটি যে অক্ষরগুলির জন্য ব্যবহার করা উচিত তা সীমাবদ্ধ করে৷

বর্ণনা

@font-face ডিজাইনারদের কাস্টম টাইপোগ্রাফি ব্যবহার করতে দিয়ে "ওয়েব-নিরাপদ" ফন্টের সীমাবদ্ধতা থেকে মুক্ত করে। local() ফাংশন ব্যবহারকারীর ডিভাইসে একটি ফন্ট অনুসন্ধান করার ক্ষমতা একটি বিরামবিহীন অভিজ্ঞতা প্রদান করে যা অগত্যা একটি ইন্টারনেট সংযোগের উপর নির্ভর করে না।

দ্রষ্টব্য: সামঞ্জস্যের কৌশল এবং পুরানো ব্রাউজারগুলিতে আরও বিশদ বিবরণের জন্য, src বর্ণনাকারী ডকুমেন্টেশন পড়ুন। আপনি CSS শর্তাধীন গ্রুপ নিয়মের মধ্যে @font-face নেস্ট করতে পারেন।

ফন্ট MIME প্রকার

বিন্যাস	MIME প্রকার
ট্রু টাইপ	font/ttf
ওপেন টাইপ	font/otf
ওয়েব ওপেন ফন্ট ফরম্যাট	font/woff
ওয়েব ওপেন ফন্ট ফরম্যাট 2	font/woff2

দ্রষ্টব্য: ওয়েব ফন্ট একই-অরিজিন নীতি অনুসরণ করে তবে HTTP অ্যাক্সেস নিয়ন্ত্রণের সাথে ক্রস-অরিজিন ব্যবহারের জন্য কনফিগার করা যেতে পারে।

দ্রষ্টব্য: @font-face একটি CSS নির্বাচক ব্লকের মধ্যে ঘোষণা করা যাবে না।

@ফন্ট-ফেস এবং ফন্ট-পরিবারের মধ্যে পার্থক্য

CSS-এ, @font-face এবং font-family প্রায়ই বিভ্রান্ত হয়, কিন্তু তারা স্বতন্ত্র উদ্দেশ্য পূরণ করে।

যেমন আমরা আলোচনা করেছি, @font-face হল একটি নিয়ম যা আপনি আপনার ওয়েব অ্যাপ্লিকেশনে ব্যবহার করতে চান এমন কোনো কাস্টম ফন্ট নির্ধারণ করতে ব্যবহৃত হয়। এটি ব্রাউজারকে বলে যে ফন্টটি কোথায় ডাউনলোড করতে হবে, লোড করার সময় কীভাবে এটি প্রদর্শন করতে হবে ( font-display বৈশিষ্ট্য সহ), এবং অক্ষরের কোন উপসেট ডাউনলোড করতে হবে তা নির্দিষ্ট করে ( unicode-range সহ)।

বিপরীতে, font-family হল একটি CSS প্রপার্টি যা CSS নিয়মের মধ্যে একটি নির্দিষ্ট ফন্ট বা একটি উপাদানের ফন্টের তালিকা নির্ধারণ করতে ব্যবহৃত হয়। font-family অধীনে তালিকাভুক্ত ফন্টগুলি ওয়েব-সেফ ফন্ট, সিস্টেম ফন্ট বা @font-face দিয়ে সংজ্ঞায়িত কাস্টম ফন্ট হতে পারে।

সংক্ষেপে বলা যায়, @font-face একটি ফন্ট ঘোষণা করে এবং একটি নাম দেয় এবং font-family এই ঘোষিত ফন্টটিকে HTML উপাদানগুলিতে প্রয়োগ করে৷

এখানে উভয় ব্যবহার করার একটি উদাহরণ:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

এই উদাহরণে, @font-face "CustomFont" সংজ্ঞায়িত করে এবং ব্রাউজারকে বলে যে এটি কোথায় পাওয়া যাবে। "CustomFont" উপলভ্য না থাকলে font-family প্রপার্টি এটিকে বডি এলিমেন্টে প্রয়োগ করে, এরিয়াল একটি ফলব্যাক হিসেবে।

টাইপফেস পরিবর্তন করুন

Browser Support

• 1
• 12
• 1
• 1

Source

আপনার লেখার টাইপফেস পরিবর্তন করতে font-family ব্যবহার করুন।

font-family প্রপার্টি স্ট্রিংগুলির একটি কমা-বিভক্ত তালিকা গ্রহণ করে, হয় নির্দিষ্ট বা জেনেরিক ফন্ট পরিবারকে উল্লেখ করে। নির্দিষ্ট ফন্ট পরিবারগুলি উদ্ধৃত স্ট্রিং, যেমন "হেলভেটিকা", "ইবি গ্যারামন্ড", বা "টাইমস নিউ রোমান"। জেনেরিক ফন্ট পরিবারগুলি হল কীওয়ার্ড যেমন serif , sans-serif , এবং monospace ( MDN এ বিকল্পগুলির সম্পূর্ণ তালিকা খুঁজুন)। ব্রাউজার প্রদত্ত তালিকা থেকে প্রথম উপলব্ধ টাইপফেস প্রদর্শন করবে।

দ্রষ্টব্য: যখন ব্রাউজার আপনার font-family ঘোষণা থেকে কোন ফন্টটি প্রদর্শন করবে তা বেছে নেয়, এটি তালিকার প্রথম উপলব্ধ ফন্টে থামে না। পরিবর্তে, এটি একবারে একটি অক্ষর ফন্ট নির্বাচন করে। তালিকার প্রথম ফন্টে একটি নির্দিষ্ট অক্ষর উপলব্ধ না হলে, এটি পরবর্তীতে চলে যায়, এবং আরও অনেক কিছু।

font-family ব্যবহার করার সময়, ব্যবহারকারীর ব্রাউজারে আপনার পছন্দের ফন্ট না থাকলে আপনার অন্তত একটি জেনেরিক ফন্ট পরিবার নির্দিষ্ট করা উচিত। সাধারণত, ফলব্যাক জেনেরিক ফন্ট ফ্যামিলি আপনার পছন্দের ফন্টের মতো হওয়া উচিত: যদি font-family: "Helvetica" (একটি সান-সেরিফ ফন্ট ফ্যামিলি) ব্যবহার করে, তাহলে আপনার ফলব্যাকটি মিলতে sans-serif হওয়া উচিত।

তির্যক এবং তির্যক ফন্ট ব্যবহার করুন

Browser Support

• 1
• 12
• 1
• 1

Source

পাঠ্যটি তির্যক হবে কি না তা সেট করতে font-style ব্যবহার করুন। font-style নিম্নলিখিত কীওয়ার্ডগুলির মধ্যে একটি গ্রহণ করে: normal , italic এবং oblique ।

দ্রষ্টব্য: প্রশ্ন: italic এবং oblique মধ্যে পার্থক্য কি? উত্তর: এটিকে সমর্থন করে এমন ফন্টগুলিতে, font-style: italic সাধারণত নিয়মিত টাইপফেসের একটি অভিশাপ সংস্করণ। font-style: oblique নিয়মিত টাইপফেসের একটি তির্যক সংস্করণ প্রদর্শন করে।

টেক্সট বোল্ড করুন

Browser Support

• 2
• 12
• 1
• 1

Source

পাঠ্যের "সাহস" সেট করতে font-weight ব্যবহার করুন। এই বৈশিষ্ট্যটি কীওয়ার্ড মান ( normal , bold ), আপেক্ষিক কীওয়ার্ড মান ( lighter , bolder ), এবং সংখ্যাসূচক মান ( 100 থেকে 900 ) গ্রহণ করে।

normal এবং bold কীওয়ার্ডগুলি যথাক্রমে 400 এবং 700 সংখ্যাসূচক মানের সমতুল্য।

lighter এবং bolder কীওয়ার্ডগুলি মূল উপাদানের সাপেক্ষে গণনা করা হয়। একটি সহজ চার্টের জন্য MDN এর আপেক্ষিক ওজনের অর্থ দেখুন কিভাবে এই মান নির্ধারণ করা হয়।

দ্রষ্টব্য: বেশিরভাগ ফন্ট, বিশেষ করে "ওয়েব-নিরাপদ" শুধুমাত্র 400 ( normal ) এবং 700 ( bold ) ওজন সমর্থন করে। @font-face বা @import ব্যবহার করে ফন্ট আমদানি করার সময়, আপনি নির্দিষ্ট ওজন বেছে নিতে পারেন যা আপনি টানতে চান। তবুও, অ-পরিবর্তনশীল ফন্টগুলি শুধুমাত্র 100-এর font-weight জন্য সাংখ্যিক মান সমর্থন করে, যেমন 100 , 200 , 300 , ইত্যাদি। আপনি যদি font-weight: 321 (উদাহরণস্বরূপ), আপনাকে একটি পরিবর্তনশীল ফন্ট ব্যবহার করতে হবে .

পাঠ্যের আকার পরিবর্তন করুন

Browser Support

• 1
• 12
• 1
• 1

Source

আপনার পাঠ্য উপাদানের আকার নিয়ন্ত্রণ করতে font-size ব্যবহার করুন। এই সম্পত্তি দৈর্ঘ্য মান, শতাংশ, এবং মুষ্টিমেয় কীওয়ার্ড মান গ্রহণ করে।

দৈর্ঘ্য এবং শতাংশের মান ছাড়াও, font-size কিছু পরম কীওয়ার্ড মান ( xx-small , x-small , small , medium , large , x-large , xx-large ) এবং কয়েকটি আপেক্ষিক কীওয়ার্ড মান ( smaller , larger গ্রহণ করে ) আপেক্ষিক মানগুলি মূল উপাদানের font-size সাথে আপেক্ষিক।

দ্রষ্টব্য: প্রশ্ন: em এবং rem মধ্যে পার্থক্য কী? উত্তর: CSS-এ, em উপাদানটির অভিভাবক থেকে উত্তরাধিকারসূত্রে প্রাপ্ত font-size প্রতিনিধিত্ব করে। উদাহরণস্বরূপ, font-size: 2em হল অভিভাবকের font-size দুই দ্বারা গুণিত করার সমতুল্য। rem অনুরূপ, কিন্তু পরিবর্তে মূল উপাদান থেকে উত্তরাধিকারসূত্রে প্রাপ্ত font-size প্রতিনিধিত্ব করে, যেমন <html> ।

লাইনের মধ্যে স্থান পরিবর্তন করুন

Browser Support

• 1
• 12
• 1
• 1

Source

একটি উপাদানের প্রতিটি লাইনের উচ্চতা নির্দিষ্ট করতে line-height ব্যবহার করুন। এই বৈশিষ্ট্যটি হয় একটি সংখ্যা, দৈর্ঘ্য, শতাংশ বা normal কীওয়ার্ড গ্রহণ করে। সাধারণত, উত্তরাধিকার সংক্রান্ত সমস্যা এড়াতে দৈর্ঘ্য বা শতাংশের পরিবর্তে একটি সংখ্যা ব্যবহার করার পরামর্শ দেওয়া হয়।

অক্ষর মধ্যে স্থান পরিবর্তন

Browser Support

• 1
• 12
• 1
• 1

Source

আপনার পাঠ্যের অক্ষরের মধ্যে অনুভূমিক স্থানের পরিমাণ নিয়ন্ত্রণ করতে letter-spacing ব্যবহার করুন। এই বৈশিষ্ট্যটি দৈর্ঘ্যের মান যেমন em , px , এবং rem গ্রহণ করে।

উল্লেখ্য যে নির্দিষ্ট মান অক্ষরের মধ্যে প্রাকৃতিক স্থান পরিমাণ বৃদ্ধি করে । নিম্নলিখিত ডেমোতে, একটি পৃথক অক্ষর নির্বাচন করার চেষ্টা করুন এর লেটারবক্সের আকার এবং এটি কীভাবে letter-spacing সাথে পরিবর্তিত হয় তা দেখতে।

শব্দের মধ্যে স্থান পরিবর্তন করুন

Browser Support

• 1
• 12
• 1
• 1

Source

আপনার পাঠ্যের প্রতিটি শব্দের মধ্যে স্থানের দৈর্ঘ্য বাড়াতে বা কমাতে word-spacing ব্যবহার করুন। এই বৈশিষ্ট্যটি দৈর্ঘ্যের মান যেমন em , px , এবং rem গ্রহণ করে। মনে রাখবেন যে আপনার নির্দিষ্ট দৈর্ঘ্য স্বাভাবিক ব্যবধান ছাড়াও অতিরিক্ত স্থানের জন্য। এর মানে হল word-spacing: 0 word-spacing: normal ।

font শর্টহ্যান্ড

আপনি একবারে অনেক ফন্ট-সম্পর্কিত বৈশিষ্ট্য সেট করতে শর্টহ্যান্ড font বৈশিষ্ট্য ব্যবহার করতে পারেন। সম্ভাব্য বৈশিষ্ট্যের তালিকা হল font-family , font-size , font-stretch , font-style , font-variant , font-weight এবং line-height ।

এই বৈশিষ্ট্যগুলি কীভাবে অর্ডার করবেন তার সুনির্দিষ্ট বিবরণের জন্য MDN এর font নিবন্ধটি দেখুন।

পাঠ্যের ক্ষেত্রে পরিবর্তন করুন

Browser Support

• 1
• 12
• 1
• 1

Source

অন্তর্নিহিত HTML পরিবর্তন করার প্রয়োজন ছাড়াই আপনার পাঠ্যের ক্যাপিটালাইজেশন পরিবর্তন করতে text-transform ব্যবহার করুন। এই বৈশিষ্ট্যটি নিম্নলিখিত কীওয়ার্ড মানগুলি গ্রহণ করে: uppercase , lowercase , এবং capitalize ।

পাঠ্যে আন্ডারলাইন, ওভারলাইন এবং থ্রু-লাইন যোগ করুন

Browser Support

• 1
• 12
• 1
• 1

Source

আপনার টেক্সটে লাইন যোগ করতে text-decoration ব্যবহার করুন। আন্ডারলাইনগুলি সাধারণত ব্যবহার করা হয়, তবে আপনার পাঠ্যের উপরে বা সরাসরি এটির মাধ্যমে লাইন যুক্ত করা সম্ভব!

text-decoration বৈশিষ্ট্য নীচে বিশদ বিবরণ আরো নির্দিষ্ট বৈশিষ্ট্য জন্য সংক্ষিপ্ত হয়.

text-decoration-line বৈশিষ্ট্য underline , overline এবং line-through কীওয়ার্ড গ্রহণ করে। আপনি একাধিক লাইনের জন্য একাধিক কীওয়ার্ডও নির্দিষ্ট করতে পারেন।

text-decoration-color বৈশিষ্ট্য text-decoration-line থেকে সমস্ত সজ্জার রঙ সেট করে।

text-decoration-style প্রপার্টি solid , double , dotted , dashed এবং wavy কীওয়ার্ড গ্রহণ করে।

text-decoration-thickness বৈশিষ্ট্য যেকোনো দৈর্ঘ্যের মান গ্রহণ করে এবং text-decoration-line থেকে সমস্ত সজ্জার স্ট্রোকের প্রস্থ সেট করে।

text-decoration বৈশিষ্ট্য উপরের সমস্ত বৈশিষ্ট্যের জন্য একটি সংক্ষিপ্ত বিবরণ।

দ্রষ্টব্য: একটি পাঠ্য-সজ্জার আন্ডারলাইন অফসেট করতে text-underline-position ব্যবহার করুন text-decoration: underline । এই সম্পত্তি overline বা line-through এর জন্য কাজ করে না।

আপনার টেক্সট একটি ইন্ডেন্ট যোগ করুন

Browser Support

• 1
• 12
• 1
• 1

Source

আপনার টেক্সট ব্লকে একটি ইন্ডেন্ট যোগ করতে text-indent ব্যবহার করুন। এই বৈশিষ্ট্যটি হয় একটি দৈর্ঘ্য (উদাহরণস্বরূপ, 10px , 2em ) বা ব্লকের প্রস্থের একটি শতাংশ নেয়।

উপচে পড়া বা লুকানো বিষয়বস্তু নিয়ে কাজ করুন

Browser Support

• 1
• 12
• 7
• 1.3

Source

লুকানো বিষয়বস্তু কীভাবে উপস্থাপন করা হয় তা নির্দিষ্ট করতে text-overflow ব্যবহার করুন। দুটি বিকল্প রয়েছে: clip (ডিফল্ট), যা ওভারফ্লো বিন্দুতে পাঠ্যকে ছাঁটাই করে; এবং ellipsis , যা ওভারফ্লো বিন্দুতে একটি উপবৃত্ত (...) প্রদর্শন করে।

হোয়াইট-স্পেস নিয়ন্ত্রণ করুন

Browser Support

• 1
• 12
• 1
• 1

Source

white-space প্রপার্টিটি নির্দিষ্ট করার জন্য ব্যবহার করা হয় কিভাবে একটি উপাদানের হোয়াইটস্পেস পরিচালনা করা উচিত। আরও বিশদ বিবরণের জন্য, MDN-এ white-space নিবন্ধটি দেখুন।

white-space: pre ASCII আর্ট রেন্ডার করার জন্য বা সাবধানে ইন্ডেন্ট করা কোড ব্লকের জন্য উপযোগী হতে পারে।

শব্দগুলি কীভাবে ভেঙে যায় তা নিয়ন্ত্রণ করুন

Browser Support

• 1
• 12
• 15
• 3

Source

word-break ব্যবহার করুন কিভাবে শব্দগুলিকে "ভাঙ্গা" করা উচিত যখন সেগুলি লাইনকে উপচে পড়বে। ডিফল্টরূপে, ব্রাউজার শব্দ বিভক্ত করবে না। word-break এর জন্য break-all কীওয়ার্ড ভ্যালু ব্যবহার করলে ব্রাউজারকে প্রয়োজনে পৃথক অক্ষরে শব্দ ভাঙতে নির্দেশ দেওয়া হবে।

পাঠ্য সারিবদ্ধকরণ পরিবর্তন করুন

Browser Support

• 1
• 12
• 1
• 1

Source

একটি ব্লক বা টেবিল-কোষ উপাদানে পাঠ্যের অনুভূমিক প্রান্তিককরণ নির্দিষ্ট করতে text-align ব্যবহার করুন। এই বৈশিষ্ট্য left , right , start , end , center , justify এবং match-parent কীওয়ার্ড মানগুলি গ্রহণ করে।

left এবং right মানগুলি যথাক্রমে ব্লকের বাম এবং ডান দিকে পাঠ্যটিকে সারিবদ্ধ করে।

বর্তমান লেখার মোডে পাঠ্যের একটি লাইনের শুরু এবং শেষের অবস্থান উপস্থাপন করতে start এবং end ব্যবহার করুন। অতএব, ইংরেজিতে left মানচিত্র start এবং আরবি লিপিতে ডান থেকে right লেখা আছে (RTL)। এগুলি লজিক্যাল অ্যালাইনমেন্ট, আমাদের লজিক্যাল বৈশিষ্ট্য মডিউলে আরও জানুন।

ব্লকের কেন্দ্রে পাঠ্য সারিবদ্ধ করতে center ব্যবহার করুন।

justify এর মান পাঠ্যকে সংগঠিত করে এবং স্বয়ংক্রিয়ভাবে শব্দ ব্যবধান পরিবর্তন করে যাতে পাঠ্যটি ব্লকের বাম এবং ডান উভয় প্রান্তের সাথে আপ হয়।

পাঠ্যের দিক পরিবর্তন করুন

Browser Support

• 2
• 12
• 1
• 1

Source

আপনার পাঠ্যের দিকনির্দেশ সেট করতে direction ব্যবহার করুন, হয় ltr (বাম থেকে ডানে, ডিফল্ট) অথবা rtl (ডান থেকে বামে)। আরবি, হিব্রু বা ফার্সি মত কিছু ভাষা ডান থেকে বামে লেখা হয়, তাই direction: rtl ব্যবহার করা উচিত। ইংরেজি এবং অন্যান্য সমস্ত বাম-থেকে-ডান ভাষার জন্য, direction: ltr ।

সতর্কতা: সাধারণত, আপনার direction পরিবর্তে HTML অ্যাট্রিবিউট dir ব্যবহার করা উচিত। আরো বিস্তারিত জানার জন্য এই StackOverflow আলোচনা দেখুন।

পাঠ্যের প্রবাহ পরিবর্তন করুন

Browser Support

• 48
• 12
• 41
• 10.1

Source

টেক্সট প্রবাহিত এবং সাজানো উপায় পরিবর্তন করতে writing-mode ব্যবহার করুন। ডিফল্ট হল horizontal-tb , কিন্তু আপনি writing-mode vertical-lr বা vertical-rl এ সেট করতে পারেন যে পাঠ্য আপনি অনুভূমিকভাবে প্রবাহিত করতে চান।

পাঠ্যের অভিযোজন পরিবর্তন করুন

Browser Support

• 48
• 79
• 41
• 14

Source

আপনার পাঠ্যের অক্ষরগুলির অভিযোজন নির্দিষ্ট করতে text-orientation ব্যবহার করুন। এই সম্পত্তির জন্য বৈধ মানগুলি mixed এবং upright । এই বৈশিষ্ট্যটি তখনই প্রাসঙ্গিক যখন writing-mode horizontal-tb ছাড়া অন্য কিছুতে সেট করা হয়।

পাঠ্যে একটি ছায়া যোগ করুন

Browser Support

• 2
• 12
• 3.5
• 1.1

Source

আপনার পাঠ্যে একটি ছায়া যোগ করতে text-shadow ব্যবহার করুন। এই বৈশিষ্ট্যটি তিনটি দৈর্ঘ্য ( x-offset , y-offset এবং blur-radius ) এবং একটি রঙের প্রত্যাশা করে।

আরও জানার জন্য আমাদের ছায়ার মডিউলের text-shadow বিভাগটি দেখুন।

পরিবর্তনশীল হরফ

সাধারণত, "স্বাভাবিক" ফন্টগুলির জন্য টাইপফেসের বিভিন্ন সংস্করণের জন্য বিভিন্ন ফাইল আমদানি করা প্রয়োজন, যেমন বোল্ড, ইটালিক বা ঘনীভূত। পরিবর্তনশীল ফন্ট হল এমন ফন্ট যা একটি ফাইলে একটি টাইপফেসের বিভিন্ন রূপ ধারণ করতে পারে।

প্রস্থ এবং ওজনের এলোমেলো সংমিশ্রণে রোবোটো ফ্লেক্স

আরো বিস্তারিত জানার জন্য পরিবর্তনশীল হরফ সম্পর্কে আমাদের নিবন্ধটি দেখুন।

ছদ্ম-উপাদান

মূল শব্দ: একটি ছদ্ম-উপাদান হল একটি উপাদানের একটি অংশ যা আপনি আরও HTML যোগ না করেই CSS কীওয়ার্ড ব্যবহার করে লক্ষ্য করতে পারেন। এই বিষয়ে গভীর-ডুইভের জন্য ছদ্ম-উপাদানগুলির উপর আমাদের মডিউলটি দেখুন!

::first-letter এবং ::first-line ছদ্ম-উপাদান

Browser Support

• 1
• 12
• 1
• 1

Source

::first-letter এবং ::first-line ছদ্ম-উপাদানগুলি যথাক্রমে একটি পাঠ্য উপাদানের প্রথম অক্ষর এবং প্রথম লাইনকে লক্ষ্য করে।

::selection ছদ্ম-উপাদান

Browser Support

• 1
• 12
• 62
• 1.1

Source

ব্যবহারকারী-নির্বাচিত পাঠ্যের চেহারা পরিবর্তন করতে ::selection ছদ্ম-উপাদান ব্যবহার করুন।

এই ছদ্ম-উপাদানটি ব্যবহার করার সময়, শুধুমাত্র নির্দিষ্ট CSS বৈশিষ্ট্যগুলি ব্যবহার করা যেতে পারে: color , background-color , text-decoration , text-shadow , stroke-color , fill-color , stroke-width ।

ফন্ট-ভেরিয়েন্ট

Browser Support

• 1
• 12
• 1
• 1

Source

font-variant প্রপার্টি হল অনেকগুলি CSS বৈশিষ্ট্যের জন্য একটি সংক্ষিপ্ত বিবরণ যা আপনাকে small-caps এবং slashed-zero মতো ফন্টের রূপগুলি বেছে নিতে দেয়। এই সংক্ষেপে CSS বৈশিষ্ট্যগুলি হল font-variant-alternates , font-variant-caps , font-variant-east-asian , font-variant-ligatures এবং font-variant-numeric । প্রতিটি সম্পত্তির ব্যবহার সম্পর্কে আরও বিস্তারিত জানার জন্য লিঙ্কগুলি দেখুন।

আপনার উপলব্ধি পরীক্ষা করুন

ওয়েবে আপনার টাইপোগ্রাফির জ্ঞান পরীক্ষা করুন

নিচের কোন কীওয়ার্ডকে font-family জেনেরিক ফলব্যাক হিসেবে ব্যবহার করা যেতে পারে?

monospace

সঠিক!

sans-serif

সঠিক!

helvetica

আবার চেষ্টা করুন "Helvetica" একটি সাধারণ কীওয়ার্ড নয়, বরং এটি একটি নির্দিষ্ট ফন্ট পরিবারকে বোঝায়।

sci-fi

আবার চেষ্টা করুন যদিও fantasy font-family জন্য একটি বৈধ জেনেরিক ফলব্যাক।

serif

সঠিক!

italic

আবার চেষ্টা করুন italic হল font-style জন্য একটি বৈধ কীওয়ার্ড, font-family নয়।

প্রতিটি শব্দের প্রথম অক্ষরকে বড় হাতের অক্ষরে রূপান্তর করতে কোন বিবৃতি ব্যবহার করা হয়? যেমন This is a sentence. ➡ This Is A Sentence.

text-case: capitalize;

আবার চেষ্টা করুন

font-style: capitals;

আবার চেষ্টা করুন

text-transform: capitalize;

সঠিক!

text-capitalize: true;

আবার চেষ্টা করুন

font-variant: capitalize;

আবার চেষ্টা করুন

সত্য বা মিথ্যা: পাঠ্যকে বাম, ডান বা কেন্দ্রে সারিবদ্ধ করতে text-orientation ব্যবহার করুন।

মিথ্যা

সঠিক! text-orientation একটি লাইনে অক্ষরের ঘূর্ণন পরিবর্তন করে। বাম, ডান বা কেন্দ্রে পাঠ্য সারিবদ্ধ করতে text-align ব্যবহার করুন (এবং আরও! )।

সত্য

আবার চেষ্টা করুন text-orientation একটি লাইনে অক্ষরের ঘূর্ণন পরিবর্তন করে।

পাঠ্যের লাইনের মধ্যে স্থান পরিবর্তন করতে কোন CSS সম্পত্তি ব্যবহার করা যেতে পারে?

line-height

সঠিক!

baseline-distance

আবার চেষ্টা করুন

leading

আবার চেষ্টা করুন লিডিং হল টাইপোগ্রাফিতে লাইনের মধ্যে স্থানের জন্য সঠিক শব্দ, কিন্তু এটি একটি বৈধ CSS সম্পত্তি নয়।

line-spacing

আবার চেষ্টা করুন

সম্পদ

• ফন্টের সর্বোত্তম অনুশীলন ফন্ট আমদানি, ফন্ট রেন্ডারিং এবং ওয়েবে ফন্ট ব্যবহার করার জন্য অন্যান্য সর্বোত্তম অনুশীলন নিয়ে আলোচনা করে।
• MDN ফান্ডামেন্টাল টেক্সট এবং ফন্ট স্টাইলিং ।