CSS পডকাস্ট - 036: টেক্সট এবং টাইপোগ্রাফি
টেক্সট ওয়েবের মূল বিল্ডিং ব্লকগুলির মধ্যে একটি।
একটি ওয়েবসাইট তৈরি করার সময়, আপনার পাঠ্যকে স্টাইল করার প্রয়োজন নেই; এইচটিএমএল আসলে কিছু বেশ যুক্তিসঙ্গত ডিফল্ট স্টাইলিং আছে.
যাইহোক, টেক্সট সম্ভবত আপনার ওয়েবসাইটের বেশিরভাগ অংশ তৈরি করবে, তাই এটিকে স্প্রুস করার জন্য কিছু স্টাইলিং যোগ করা সার্থক। কয়েকটি মৌলিক বৈশিষ্ট্য পরিবর্তন করে, আপনি আপনার ব্যবহারকারীদের পড়ার অভিজ্ঞতা উল্লেখযোগ্যভাবে উন্নত করতে পারেন!
এই মডিউলে, আমরা প্রথমে কিছু মৌলিক CSS ফন্ট বৈশিষ্ট্য যেমন font-family , font-style , font-weight , এবং font-size দেখব। তারপর, আমরা এমন বৈশিষ্ট্যগুলিতে ডুব দেব যা পাঠ্যের অনুচ্ছেদগুলিকে প্রভাবিত করে, যেমন text-indent এবং word-spacing । মডিউলটি আরও কিছু উন্নত বিষয় যেমন পরিবর্তনশীল ফন্ট এবং ছদ্ম-উপাদানের সাথে সমাপ্ত হয়।
টাইপফেস পরিবর্তন করুন
আপনার লেখার টাইপফেস পরিবর্তন করতে font-family ব্যবহার করুন।
font-family প্রপার্টি স্ট্রিংগুলির একটি কমা-বিভক্ত তালিকা গ্রহণ করে, হয় নির্দিষ্ট বা জেনেরিক ফন্ট পরিবারকে উল্লেখ করে। নির্দিষ্ট হরফ পরিবারগুলি উদ্ধৃত স্ট্রিং, যেমন "হেলভেটিকা", "ইবি গ্যারামন্ড", বা "টাইমস নিউ রোমান"। জেনেরিক ফন্ট পরিবারগুলি হল কীওয়ার্ড যেমন serif , sans-serif , এবং monospace ( MDN এ বিকল্পগুলির সম্পূর্ণ তালিকা খুঁজুন)। ব্রাউজার প্রদত্ত তালিকা থেকে প্রথম উপলব্ধ টাইপফেস প্রদর্শন করবে।
font-family ব্যবহার করার সময়, ব্যবহারকারীর ব্রাউজারে আপনার পছন্দের ফন্ট না থাকলে আপনার অন্তত একটি জেনেরিক ফন্ট পরিবার নির্দিষ্ট করা উচিত। সাধারণত, ফলব্যাক জেনেরিক ফন্ট ফ্যামিলি আপনার পছন্দের ফন্টের মতো হওয়া উচিত: যদি font-family: "Helvetica" (একটি সান-সেরিফ ফন্ট ফ্যামিলি) ব্যবহার করে, তাহলে আপনার ফলব্যাকটি মিলতে sans-serif হওয়া উচিত।
তির্যক এবং তির্যক ফন্ট ব্যবহার করুন
পাঠ্যটি তির্যক হবে কি না তা সেট করতে font-style ব্যবহার করুন। font-style নিম্নলিখিত কীওয়ার্ডগুলির মধ্যে একটি গ্রহণ করে: normal , italic এবং oblique ।
টেক্সট বোল্ড করুন
টেক্সটের "বোল্ডনেস" সেট করতে font-weight ব্যবহার করুন। এই বৈশিষ্ট্যটি কীওয়ার্ড মান ( normal , bold ), আপেক্ষিক কীওয়ার্ড মান ( lighter , bolder ), এবং সংখ্যাসূচক মান ( 100 থেকে 900 ) গ্রহণ করে।
normal এবং bold কীওয়ার্ডগুলি যথাক্রমে 400 এবং 700 এর সংখ্যাসূচক মানের সমতুল্য।
lighter এবং bolder কীওয়ার্ডগুলি মূল উপাদানের সাপেক্ষে গণনা করা হয়। একটি সহজ চার্টের জন্য MDN এর আপেক্ষিক ওজনের অর্থ দেখুন কিভাবে এই মান নির্ধারণ করা হয়।
পাঠ্যের আকার পরিবর্তন করুন
আপনার পাঠ্য উপাদানের আকার নিয়ন্ত্রণ করতে font-size ব্যবহার করুন। এই সম্পত্তি দৈর্ঘ্য মান, শতাংশ, এবং মুষ্টিমেয় কীওয়ার্ড মান গ্রহণ করে।
দৈর্ঘ্য এবং শতাংশের মান ছাড়াও, font-size কিছু পরম কীওয়ার্ড মান ( xx-small , x-small , small , medium , large , x-large , xx-large ) এবং কয়েকটি আপেক্ষিক কীওয়ার্ড মান ( smaller , larger গ্রহণ করে ) আপেক্ষিক মানগুলি মূল উপাদানের font-size সাথে আপেক্ষিক।
লাইনের মধ্যে স্থান পরিবর্তন করুন
একটি উপাদানের প্রতিটি লাইনের উচ্চতা নির্দিষ্ট করতে line-height ব্যবহার করুন। এই বৈশিষ্ট্যটি হয় একটি সংখ্যা, দৈর্ঘ্য, শতাংশ বা normal কীওয়ার্ড গ্রহণ করে। সাধারণত, উত্তরাধিকার সংক্রান্ত সমস্যা এড়াতে দৈর্ঘ্য বা শতাংশের পরিবর্তে একটি সংখ্যা ব্যবহার করার পরামর্শ দেওয়া হয়।
অক্ষর মধ্যে স্থান পরিবর্তন
আপনার পাঠ্যের অক্ষরের মধ্যে অনুভূমিক স্থানের পরিমাণ নিয়ন্ত্রণ করতে letter-spacing ব্যবহার করুন। এই বৈশিষ্ট্যটি দৈর্ঘ্যের মান যেমন em , px , এবং rem গ্রহণ করে।
উল্লেখ্য যে নির্দিষ্ট মান অক্ষরের মধ্যে প্রাকৃতিক স্থান পরিমাণ বৃদ্ধি করে । নীচের ডেমোতে, লেটারবক্সের আকার এবং letter-spacing সাথে এটি কীভাবে পরিবর্তিত হয় তা দেখতে একটি পৃথক অক্ষর নির্বাচন করার চেষ্টা করুন।
শব্দের মধ্যে স্থান পরিবর্তন করুন
আপনার পাঠ্যের প্রতিটি শব্দের মধ্যে স্থানের দৈর্ঘ্য বাড়াতে বা কমাতে 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 নিবন্ধটি দেখুন।
পাঠ্যের ক্ষেত্রে পরিবর্তন করুন
অন্তর্নিহিত HTML পরিবর্তন করার প্রয়োজন ছাড়াই আপনার পাঠ্যের ক্যাপিটালাইজেশন পরিবর্তন করতে text-transform ব্যবহার করুন। এই সম্পত্তি নিম্নলিখিত কীওয়ার্ড মানগুলি গ্রহণ করে: uppercase , lowercase এবং capitalize ।
পাঠ্যে আন্ডারলাইন, ওভারলাইন এবং থ্রু-লাইন যোগ করুন
আপনার টেক্সটে লাইন যোগ করতে 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-indent ব্যবহার করুন। এই বৈশিষ্ট্যটি হয় একটি দৈর্ঘ্য (উদাহরণস্বরূপ, 10px , 2em ) বা ব্লকের প্রস্থের একটি শতাংশ নেয়।
উপচে পড়া বা লুকানো বিষয়বস্তু নিয়ে কাজ করুন
লুকানো বিষয়বস্তু কীভাবে উপস্থাপন করা হয় তা নির্দিষ্ট করতে text-overflow ব্যবহার করুন। দুটি বিকল্প রয়েছে: clip (ডিফল্ট), যা ওভারফ্লো বিন্দুতে পাঠ্যকে ছাঁটাই করে; এবং ellipsis , যা ওভারফ্লো বিন্দুতে একটি উপবৃত্ত (...) প্রদর্শন করে।
হোয়াইট-স্পেস নিয়ন্ত্রণ করুন
white-space প্রপার্টিটি নির্দিষ্ট করার জন্য ব্যবহার করা হয় কিভাবে একটি উপাদানের হোয়াইটস্পেস পরিচালনা করা উচিত। আরও বিশদ বিবরণের জন্য, MDN-এ white-space নিবন্ধটি দেখুন।
white-space: pre ASCII আর্ট রেন্ডার করার জন্য বা সাবধানে ইন্ডেন্ট করা কোড ব্লকের জন্য উপযোগী হতে পারে।
শব্দগুলি কীভাবে ভেঙে যায় তা নিয়ন্ত্রণ করুন
শব্দগুলি কীভাবে "ভাঙা" হবে তা পরিবর্তন করতে word-break ব্যবহার করুন যখন তারা লাইনকে উপচে পড়বে। ডিফল্টরূপে, ব্রাউজার শব্দ বিভক্ত করবে না। word-break break-all কীওয়ার্ড ভ্যালু ব্যবহার করলে ব্রাউজারকে প্রয়োজনে পৃথক অক্ষরে শব্দ ভাঙতে নির্দেশ দেওয়া হবে।
পাঠ্য সারিবদ্ধকরণ পরিবর্তন করুন
একটি ব্লক বা টেবিল-কোষ উপাদানে পাঠ্যের অনুভূমিক প্রান্তিককরণ নির্দিষ্ট করতে text-align ব্যবহার করুন। এই বৈশিষ্ট্য left , right , start , end , center , justify এবং match-parent কীওয়ার্ড মানগুলি গ্রহণ করে।
left এবং right মানগুলি যথাক্রমে ব্লকের বাম এবং ডান দিকে পাঠ্যটিকে সারিবদ্ধ করে।
বর্তমান লেখার মোডে পাঠ্যের একটি লাইনের শুরু এবং শেষের অবস্থান উপস্থাপন করতে start এবং end ব্যবহার করুন। অতএব, ইংরেজিতে left মানচিত্র start এবং আরবি লিপিতে right থেকে ডানে লেখা আছে (RTL)। এগুলি লজিক্যাল অ্যালাইনমেন্ট, আমাদের লজিক্যাল বৈশিষ্ট্য মডিউলে আরও জানুন।
ব্লকের কেন্দ্রে পাঠ্য সারিবদ্ধ করতে center ব্যবহার করুন।
justify এর মান পাঠ্যকে সংগঠিত করে এবং স্বয়ংক্রিয়ভাবে শব্দ ব্যবধান পরিবর্তন করে যাতে পাঠ্যটি ব্লকের বাম এবং ডান উভয় প্রান্তের সাথে আপ হয়।
পাঠ্যের দিক পরিবর্তন করুন
আপনার পাঠ্যের দিকনির্দেশ সেট করতে direction ব্যবহার করুন, হয় ltr (বাম থেকে ডানে, ডিফল্ট) অথবা rtl (ডান থেকে বামে)। আরবি, হিব্রু বা ফার্সি মত কিছু ভাষা ডান থেকে বামে লেখা হয়, তাই direction: rtl ব্যবহার করা উচিত। ইংরেজি এবং অন্যান্য সমস্ত বাম-থেকে-ডান ভাষার জন্য, direction: ltr ।
পাঠ্যের প্রবাহ পরিবর্তন করুন
টেক্সট প্রবাহিত এবং সাজানো উপায় পরিবর্তন করতে writing-mode ব্যবহার করুন। ডিফল্ট হল horizontal-tb , কিন্তু আপনি writing-mode vertical-lr বা vertical-rl এ সেট করতে পারেন যে পাঠ্য আপনি অনুভূমিকভাবে প্রবাহিত করতে চান।
পাঠ্যের অভিযোজন পরিবর্তন করুন
আপনার পাঠ্যের অক্ষরগুলির অভিযোজন নির্দিষ্ট করতে text-orientation ব্যবহার করুন। এই সম্পত্তির জন্য বৈধ মানগুলি mixed এবং upright । এই বৈশিষ্ট্যটি তখনই প্রাসঙ্গিক যখন writing-mode horizontal-tb ছাড়া অন্য কিছুতে সেট করা হয়।
পাঠ্যে একটি ছায়া যোগ করুন
আপনার পাঠ্যে একটি ছায়া যোগ করতে text-shadow ব্যবহার করুন। এই বৈশিষ্ট্যটি তিনটি দৈর্ঘ্য ( x-offset , y-offset এবং blur-radius ) এবং একটি রঙের প্রত্যাশা করে।
আরও জানার জন্য আমাদের ছায়ার মডিউলের text-shadow বিভাগটি দেখুন।
পরিবর্তনশীল হরফ
সাধারণত, "স্বাভাবিক" ফন্টের টাইপফেসের বিভিন্ন সংস্করণের জন্য বিভিন্ন ফাইল আমদানি করতে হয়, যেমন বোল্ড, ইটালিক বা ঘনীভূত। পরিবর্তনশীল ফন্ট হল এমন ফন্ট যা একটি ফাইলে একটি টাইপফেসের বিভিন্ন রূপ ধারণ করতে পারে।
আরো বিস্তারিত জানার জন্য পরিবর্তনশীল হরফ সম্পর্কে আমাদের নিবন্ধটি দেখুন।
ছদ্ম-উপাদান
::first-letter এবং ::first-line ছদ্ম-উপাদান
::first-letter এবং ::first-line ছদ্ম-উপাদানগুলি যথাক্রমে একটি পাঠ্য উপাদানের প্রথম অক্ষর এবং প্রথম লাইনকে লক্ষ্য করে।
::selection ছদ্ম-উপাদান
ব্যবহারকারী-নির্বাচিত পাঠ্যের চেহারা পরিবর্তন করতে ::selection ছদ্ম-উপাদান ব্যবহার করুন।
এই ছদ্ম-উপাদানটি ব্যবহার করার সময়, শুধুমাত্র নির্দিষ্ট CSS বৈশিষ্ট্যগুলি ব্যবহার করা যেতে পারে: color , background-color , text-decoration , text-shadow , stroke-color , fill-color , stroke-width ।
ফন্ট-ভেরিয়েন্ট
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 জেনেরিক ফলব্যাক হিসেবে ব্যবহার করা যেতে পারে?
serifmonospaceitalicitalic হল font-style জন্য একটি বৈধ কীওয়ার্ড, font-family নয়।sci-fifantasy font-family জন্য একটি বৈধ জেনেরিক ফলব্যাক।sans-serifhelvetica"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-spacingleadingbaseline-distanceline-heightসম্পদ
- ফন্টের সর্বোত্তম অনুশীলন ফন্ট আমদানি, ফন্ট রেন্ডারিং এবং ওয়েবে ফন্ট ব্যবহার করার জন্য অন্যান্য সর্বোত্তম অনুশীলন নিয়ে আলোচনা করে।
- MDN ফান্ডামেন্টাল টেক্সট এবং ফন্ট স্টাইলিং ।