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

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() ফাংশন ব্যবহারকারীর ডিভাইসে একটি ফন্ট অনুসন্ধান করার ক্ষমতা একটি বিরামবিহীন অভিজ্ঞতা প্রদান করে যা অগত্যা একটি ইন্টারনেট সংযোগের উপর নির্ভর করে না।

ফন্ট MIME প্রকার

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

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

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

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

Browser Support

  • ক্রোম: 2।
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

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

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

অন্তর্নিহিত HTML পরিবর্তন করার প্রয়োজন ছাড়াই আপনার পাঠ্যের ক্যাপিটালাইজেশন পরিবর্তন করতে [`টেক্সট-ট্রান্সফর্ম`](https://developer.mozilla.org/docs/Web/CSS/text-transform) ব্যবহার করুন। এই বৈশিষ্ট্য নিম্নলিখিত কীওয়ার্ড মানগুলি গ্রহণ করে: `বড় হাতের অক্ষর`, `লোয়ারকেস` এবং `ক্যাপিটালাইজ`।

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

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 বৈশিষ্ট্য পূর্ববর্তী সমস্ত বৈশিষ্ট্যের জন্য একটি সংক্ষিপ্ত বিবরণ।

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: 7.
  • সাফারি: 1.3।

Source

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: 15.
  • সাফারি: 3.

Source

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

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

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

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

টেক্সট কিভাবে মোড়ানো হয় তা নিয়ন্ত্রণ করুন

Browser Support

  • ক্রোম: 114।
  • প্রান্ত: 114।
  • ফায়ারফক্স: 121।
  • সাফারি: 17.4.

Source

একটি উপাদানের মধ্যে পাঠ্য কীভাবে মোড়ানো হয় তা পরিবর্তন করতে text-wrap ব্যবহার করুন।

এই সম্পত্তির জন্য গৃহীত কীওয়ার্ডগুলির মধ্যে রয়েছে wrap , nowrap , balance এবং stable । ডিফল্ট মান হল wrap , যা সাধারণ স্পেস এবং শব্দ বিরতি বরাবর লাইন জুড়ে টেক্সট মোড়ানোর মাধ্যমে ওভারফ্লো কমিয়ে দেয়।

আপনি ঠিক বিপরীতটি অর্জন করতে nowrap কীওয়ার্ড ব্যবহার করতে পারেন এবং টেক্সটটিকে লাইন জুড়ে ভাঙতে বাধা দিতে পারেন, যা ওভারফ্লো হতে পারে।

প্রতিটি লাইনে একই পরিমাণ পাঠ্য পেতে, উদাহরণস্বরূপ, শিরোনাম বা শিরোনাম লিখতে, balance কীওয়ার্ড ব্যবহার করুন। পারফরম্যান্স উন্নত করার জন্য, ব্রাউজার শুধুমাত্র ছয় লাইন বা তার কম পাঠ্যের উপাদানগুলিতে এই মান প্রয়োগ করবে।

stable কীওয়ার্ডটি wrap মতোই কাজ করে কিন্তু বিষয়বস্তু সম্পাদনাযোগ্য পাঠ্যের সাথে ব্যবহার করা হয়। text-wrap: stable সেটের সাথে, সম্পাদিত বিষয়বস্তুর উপরের লাইনগুলি প্রক্রিয়ার মধ্যে স্থানান্তরিত হবে না।

কখনও কখনও একটি স্পষ্ট ব্রেকিং পয়েন্ট ছাড়া দীর্ঘ স্ট্রিং পাত্রে উপচে যেতে পারে। এই ধরনের টেক্সট কীভাবে ভেঙে যায় তা নিয়ন্ত্রণ করতে overflow-wrap ব্যবহার করুন।

Browser Support

  • ক্রোম: 23।
  • প্রান্ত: 18।
  • ফায়ারফক্স: 49।
  • সাফারি: 7।

Source

এই সম্পত্তির জন্য আপনি যে কীওয়ার্ডগুলি ব্যবহার করতে পারেন সেগুলি হল normal , break-word এবং anywhere । ডিফল্ট সেটিং normal এবং পরবর্তী লাইনে টেক্সট ভাঙবে না যদি না এতে স্পেস বা স্বাভাবিক বিরতি পয়েন্ট অন্তর্ভুক্ত থাকে।

anywhere এবং break-word মানগুলি ওভারফ্লো প্রতিরোধ করতে স্ট্রিংয়ের ভিতরে যে কোনও জায়গায় ব্রেকপয়েন্ট যোগ করে। কীওয়ার্ডগুলি একটি অন্তর্নিহিত বা স্পষ্ট min-content আকারে কীভাবে প্রতিক্রিয়া জানায় তার মধ্যে পার্থক্য রয়েছে। anywhere কীওয়ার্ডটি সম্ভাব্য সব সফট ব্রেকিং সুযোগের অনুমতি দেয়। break-word মান নেই, এবং টেক্সটটিকে দীর্ঘতম শব্দের মতো লম্বা করবে।

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

Browser Support

  • ক্রোম: 2।
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

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 বিভাগটি দেখুন।

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

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

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

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

ছদ্ম-উপাদান

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

Source

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

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

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: 62।
  • সাফারি: 1.1।

Source

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

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

font-variant

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: 12।
  • ফায়ারফক্স: ১.
  • সাফারি: ১.

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 জেনেরিক ফলব্যাক হিসেবে ব্যবহার করা যেতে পারে?

serif
সঠিক!
monospace
সঠিক!
italic
আবার চেষ্টা করুন italic হল font-style জন্য একটি বৈধ কীওয়ার্ড, font-family নয়।
sci-fi
আবার চেষ্টা করুন যদিও fantasy font-family জন্য একটি বৈধ জেনেরিক ফলব্যাক।
sans-serif
সঠিক!
helvetica
আবার চেষ্টা করুন "Helvetica" একটি সাধারণ কীওয়ার্ড নয়, বরং এটি একটি নির্দিষ্ট ফন্ট পরিবারকে বোঝায়।

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

text-capitalize: true;
আবার চেষ্টা করুন
text-case: capitalize;
আবার চেষ্টা করুন
text-transform: capitalize;
সঠিক!
font-style: capitals;
আবার চেষ্টা করুন
font-variant: capitalize;
আবার চেষ্টা করুন

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

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

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

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

সম্পদ