সিএসএস এবং jQuery দিয়ে উল্লম্ব ছন্দ বজায় রাখুন

কন্টেন্ট

• লেআউট টাইপ
• উল্লম্ব ছন্দ
• ছন্দ পরিচালনা
• ইমেজ সঙ্গে লেনদেন
• JQuery উন্নতি
• উপসংহার

• জ্ঞান দরকার: সিএসএস, বেসিক jQuery
• প্রয়োজন: jQuery, সিএসএস, এইচটিএমএল
• প্রকল্পের সময়: 30 মিনিট
• উত্স ফাইল ডাউনলোড করুন

আপনার সামগ্রীটি আউট ডিজাইন হিসাবে ধরে নিচ্ছেন, আপনার নকশাকে প্রভাবিত করার প্রথম সিদ্ধান্ত আছে টাইপ সম্পর্কিত হতে। এমনকি না টাইপফেস বেছে নেওয়া আপনি এমন কিছু করেছেন যা আপনার সাইটে প্রভাব ফেলে। প্রিন্ট এবং ওয়েব ডিজাইনের মূল প্রকার এবং এটি জটিল; প্রচুর পরিমাণে জমা হওয়া শর্তাদি, অনুশীলনগুলি, বিধিগুলি এবং কৌশলগুলি এর ভাল ব্যবহারে যায়। এই নিবন্ধটি টাইপের একটি দিক পরিচালনা করার জন্য একটি কৌশল সম্পর্কিত, এটি একটি অনলাইনে করা কঠিন কিন্তু মুদ্রণে রীতি: এটি একটি ধারাবাহিক উল্লম্ব ছন্দ বজায় রাখে, যার ফলস্বরূপ আমাদের একটি পেশাদার বিন্যাস অর্জন করতে দেয়।

লেআউট টাইপ

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

উল্লম্ব ছন্দ

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

ছন্দ পরিচালনা

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

আসুন একটি উদাহরণ নথির সাথে ব্যবহারিক হয়ে উঠি। প্রথমত, আমরা একটি দৃশ্যমান বেসলাইন গ্রিড তৈরি করে বেট সেট করব। এটি করার জন্য আমরা নিয়মিত অনুভূমিক রেখা 22px আলাদা করতে একটি পুনরাবৃত্তি পটভূমি চিত্র ব্যবহার করব:

1. এইচটিএমএল {পটভূমি: # fff url (বেসলাইন_22.png); }

হুররে, আমাদের লাইনে রাখা কাগজ আছে!

আপনি লক্ষ করবেন যে কিছুই লাইন আপ না। সবকিছু লাইন আপ করতে আমরা চাই সমস্ত উপাদানগুলির নীচের প্রান্তটি সেই লাইনের একটিতে আঘাত হান। এটি করার সহজতম উপায়টি নিশ্চিত করুন যে সমস্ত উপাদান একটি লম্বালম্বী উচ্চতা (মার্জিন সহ) গ্রহণ করে যা 22 এর একাধিক। এখানে কিছু সিএসএস রয়েছে যা কেবল এটি করে। আমি আরইএম ইউনিটটি ব্যবহার করছি, তবে ব্রাউজারগুলির জন্য একটি ইএম ফলব্যাক দিচ্ছি যা আরईএম বোঝে না। আমি মন্তব্যে PX ইউনিট সমতুল্য অন্তর্ভুক্ত করছি। আপনি যদি এখনও আরইএম / ইএম বুঝতে না পারেন তবে আপনি কেবল এর পরিবর্তে px মানগুলি ব্যবহার করতে পারেন - এগুলি সমস্ত সমতুল্য:

1. এইচটিএমএল {/ * হরফ আকার: 16px, লাইন-উচ্চতা: 22px * /
2. হরফ: 100% / 1.375 "হেলভেটিকা ​​নিউ", হেলভেটিকা, আড়িয়াল, সানস-সেরিফ;
3. পটভূমি: # fff url (বেসলাইন_22.png); }
5. এইচ 1, এইচ 2, এইচ 3, এইচ 4, এইচ 5, এইচ 6 {/ * মার্জিন-শীর্ষ এবং নীচে উভয়ই 22px * /
6. / * এম ফ্যালব্যাক * / মার্জিন: 1.375 এম 0;
7. মার্জিন: 1.375rem 0; }
8. এইচ 1 {/ * হরফ-আকার 32px, লাইন-উচ্চতা 44px * /
9. / * এম ফ্যালব্যাক * / হরফ-আকার: 2 এম;
10. হরফ আকার: 2 মিম; লাইন-উচ্চতা: 1.375; }
11. এইচ 2 {/ * ফন্টের আকার 26px, লাইন-উচ্চতা 44px * /
12. / * এম ফ্যালব্যাক * / হরফ-আকার: 1.75 এম;
13. হরফ আকার: 1.75rem; লাইন-উচ্চতা: 1.5714285714; }
14. এইচ 3, এইচ 4, এইচ 5, এইচ 6 {/ * হরফের আকার 22px, লাইন-উচ্চতা 22px * /
15. / * এম ফ্যালব্যাক * / ফন্ট-আকার: 1.375 এম;
16. হরফ-আকার: 1.375rem; লাইন উচ্চতা: 1; }
17. পি, উল, ব্লককোট {/ * নীচের মার্জিনটি 22px, লাইন-উচ্চতা এইচটিএমএল (22px) থেকে উত্তরাধিকার সূত্রে প্রাপ্ত is * / /
18. / * এম ফ্যালব্যাক * / মার্জিন-শীর্ষ: 0; মার্জিন-নীচে: 1.375 এম;
19. মার্জিন-শীর্ষ: 0; মার্জিন-নীচে: 1.375rem; }

এটি আমাদের কী দেয় তা একবার দেখে নিই। লক্ষ্য করুন যে সমস্ত পাঠ্য কীভাবে সুন্দরভাবে সাজায়? এটি বেসলাইনে বসে না তবে এর অনুমানযোগ্য উল্লম্ব ছন্দ রয়েছে। এটি সুন্দর এবং পরিপাটি

ইমেজ সঙ্গে লেনদেন

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

এটি ঠিক করার জন্য আমাদের যা করতে হবে তা হ'ল প্রতিটি চিত্রের জন্য একটি মার্জিন যুক্ত করা, আমাদের গ্রিডের সাথে মার্জিন লাইনের নীচে তৈরি করা। যা সামান্য জাভাস্ক্রিপ্ট দিয়ে স্বয়ংক্রিয় করার জন্য যথেষ্ট সহজ। আমাদের মূল পরিকল্পনাটি এখানে:

1. প্রতিটি চিত্রের উচ্চতা চিত্রিত করুন।
2. বেসলাইনটির মানটি চিত্রটি বর্তমানে যে উল্লম্ব স্থানে বিভক্ত হয় তাতে কতবার বিভক্ত হয় তা দেখুন এবং অবশিষ্টটি পান।
3. আমাদের ইমেজের উপর প্রয়োগ করতে হবে অফসেটটি দিতে বেসলাইন থেকে বাকীটি বিয়োগ করুন।
4. অফসেটটি চিত্রের নীচে মার্জিন হিসাবে প্রয়োগ করুন।

চিত্রের উল্লম্ব স্থানটির নীচের অংশটি এখন বেসলাইন গ্রিডের সাথে সঠিকভাবে সারিবদ্ধ হবে। এখানে jQuery এর একটি প্রাথমিক ফাংশন যা এটি করে:

1. $ (উইন্ডো) .বাইন্ড ('লোড', ফাংশন () {
2. $ ("img")। প্রতিটি (ফাংশন () {
3. / * ভেরিয়েবল * /
4. var this_img = $ (এটি);
5. var বেসলাইন = 22;
6. var img_height = this_img.height ();
7. / * গণিত করুন * /
8. var बाकी = parseFloat (img_height% বেসলাইন);
9. / * আমাদের কত যোগ করতে হবে? * /
10. var অফসেট = parseFloat (বেসলাইন-বাকী);
11. / * চিত্রটিতে মার্জিন প্রয়োগ করুন * /
12. this_img.css ("মার্জিন-ডাউন", অফসেট + "পিক্স");
13. });
14. });

কেন উইন্ডো.বাইন্ড লাইন? কারণ আমরা নির্ভরযোগ্যভাবে তাদের আকারগুলি পাওয়ার আগে চিত্রগুলি লোড না হওয়া পর্যন্ত আমাদের অপেক্ষা করতে হবে। এই বেসিক কোডটি চলার সাথে একটি উদাহরণ এখানে।

JQuery উন্নতি

পৃথিবীটি খুব কমই সরাসরি-সামনের দিকে এগিয়ে যায় এবং তাই এটি এখানে পরিণত হয় - আমাদের বেশ কয়েকটি বাস্তবায়নের বিশদটি মোকাবেলা করতে হবে। আমাদের যে ফাংশন আছে তাতে কী ভুল? প্রচুর পরিমাণে:

• এটি এমন চিত্রগুলির সাথে বাজে ফলাফল উত্পন্ন করে যা ভাসমান বা ব্লক না করে ইনলাইন থাকে।
• এটি কিছু চিত্রগুলিতে বগি বলে মনে হচ্ছে, বিশেষত পাত্রে রয়েছে।
• এটি তরল বিন্যাসগুলি নিয়ে কাজ করে না।
• এটি খুব বেশি ব্যবহারযোগ্য নয়।

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

কোনও চিত্র কোনও ধারক হলে চিত্রটিতে প্রয়োগ করা মার্জিনটি লুকিয়ে থাকতে পারে কারণ ধারকটিতে ওভারফ্লো সেটিংস রয়েছে। এছাড়াও, আমরা ইমেজের মার্জিনটি না, বরং পরিবর্তে ধারক উপাদানটিতে চাই। উদাহরণস্বরূপ, বাক্সের ভিতরে থাকা চিত্রের চেয়ে আমরা সাদা বাক্সে মার্জিন করতাম, তাই বাক্সে উপস্থিত হওয়া অদ্ভুত ফাঁকগুলি এড়াতে পারি।

ফাংশনটি কেবল একবার সঞ্চালিত হয়, তবে ব্রাউজারটি আবার আকারের হয়ে গেলে তরল ডিজাইনে চিত্রগুলির উচ্চতা পরিবর্তন হয় (এটি দেখতে বেশ সংকীর্ণের উদাহরণটিকে পুনরায় আকার দেওয়ার চেষ্টা করুন)। পুনরায় আকার দেওয়ার পরে তাল ছিন্ন হয়। ব্রাউজারটির পুনরায় আকার দেওয়ার পাশাপাশি পৃষ্ঠা লোডের পরে চালানোর জন্য আমাদের ফাংশনটি প্রয়োজন। তরল বিন্যাসগুলি অন্যান্য সমস্যাগুলিরও পরিচয় দেয়; চিত্রগুলি ভগ্নাংশ পিক্সেল উচ্চ হতে পারে, উদাহরণস্বরূপ 132.34px। পরিবর্তে এটি অপ্রত্যাশিত ফলাফলের কারণ হতে পারে, এমনকি যদি আমরা একটি ভগ্নাংশের মার্জিন প্রয়োগ করি (আপনি যদি আগ্রহী হন তবে এখানে কেন: trac.webkit.org/wiki/LayoutUnit)। সুতরাং, ভগ্নাংশ পিক্সেলের কারণে লেআউট বাগগুলি এড়াতে আমাদের পুরো পিক্সেল উচ্চতায় চিত্রটি ম্যাসেজ করতে হবে।

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

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

1. $ (উইন্ডো) .বাইন্ড ('লোড', ফাংশন () {
2. "(" img ")। বেসলাইনএলাইন ();
3. });

অথবা, আপনি প্লাগ-ইনটিকে কোনও নামক ধারকটিতে মার্জিনটি প্রয়োগ করতে বলতে পারেন, যদি কোনও চিত্রের পিতামাতা হিসাবে উপস্থিত থাকে:

1. $ (উইন্ডো) .বাইন্ড ('লোড', ফাংশন () {
2. "(" img ")। বেসলাইনএলাইন ({ধারক:’। পপআপ ’});
3. });

উপসংহার

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

সিএসএস পরিপক্ক হওয়ার সাথে সাথে আমরা আমাদের প্রিন্ট চাচাত ভাইদের সাথে সামঞ্জস্য রেখে আরও বৈশিষ্ট্যগুলি পেতে থাকি, সুতরাং প্রকারের একটি ভাল বোঝাপড়া মানের ওয়েবসাইট তৈরির জন্য আরও গুরুত্বপূর্ণ হয়ে উঠবে। আপনি সাধারণত টাইপ সম্পর্কে আরও জানতে চাইলে আমি www.thinkingwithtype.com (এবং বইটি এটিতে যাওয়ার জন্য কেনার) সুপারিশ করি। আপনি যদি টাইপ ট্রিটমেন্ট সম্পর্কে সিএসএস নিবন্ধগুলির পরে থাকেন তবে ওয়েবে এখানে এবং অন্য কোথাও অসংখ্য নিবন্ধ রয়েছে। আমি মার্ক বোল্টন এবং এলিয়ট জে স্টকসের কাছ থেকে সর্বশেষটি সন্ধান করার পরামর্শ দিচ্ছি, উভয়ই বিশেষত ওয়েব ডিজাইনের ক্ষেত্রে টাইপ সম্পর্কে প্রায়ই কথা বলি।

আনন্দ কর!