কলাম গণনা ক্রস ব্রাউজার. CSS3 মাল্টিকলামের ভূমিকা। আমরা কলাম নিয়ে কাজ করি। একাধিক কলাম ব্যবহার করে

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

বৈধ মান

  • CSS2 CSS3 স্বয়ংক্রিয়- বর্তমান উপাদানের আগে স্বয়ংক্রিয় পৃষ্ঠা বা কলাম বিরতি (ডিফল্ট)
  • CSS2 CSS3 এড়াতে
  • CSS3 পৃষ্ঠা এড়িয়ে চলুন- বর্তমান উপাদানের ভিতরে পৃষ্ঠা বিরতি বাতিল করুন
  • CSS3 এড়ানো-কলাম- বর্তমান উপাদানের ভিতরে কলাম বিরতি বাতিল করুন

ব্যবহারের উদাহরণ

ব্রেক ভিতরে: অটো; - সমবন্টন

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

শৈলী ( কলাম-গণনা: 3; কলাম-ব্যবধান: 2em; কলাম-বিধি: 1px কঠিন #666; )

টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট

break-inside: এড়িয়ে যাওয়া-কলাম; - কলাম বিরতি বাতিল করুন

শৈলী ( কলাম-গণনা: 3; কলাম-গ্যাপ: 2em; কলাম-নিয়ম: 1px কঠিন #666; ) .স্টাইল ডিভ (ব্রেক-ভিতরে: এড়ানো-কলাম; )

১ম ব্লকটেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট

২য় ব্লকটেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট

৩য় ব্লকটেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট

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

আরো দেখুন:

  • ব্রেক-আফটার - একটি উপাদানের পরে একটি কলাম বা পৃষ্ঠা বিরতি সেট করার নিয়ম
  • বিরতি আগে - একটি উপাদানের আগে একটি কলাম বা পৃষ্ঠা বিরতি সেট করার নিয়ম
  • -webkit-column-break-after - একটি উপাদানের পরে একটি কলাম বিরতি সেট করার নিয়ম
  • -ওয়েবকিট-কলাম-ব্রেক-আগে - একটি উপাদানের আগে একটি কলাম বিরতি সেট করার নিয়ম
  • -webkit-column-break-inside - একটি উপাদানের ভিতরে একটি কলাম বিরতি সেট করার নিয়ম

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

মাল্টি-কলাম মডেল

ব্রাউজার সমর্থন

IE: 10
প্রান্ত: 12
ফায়ারফক্স: 52, 2-moz
ক্রোম: 50, 4 -ওয়েবকিট-
সাফারি: 9, 3.1 -ওয়েবকিট-
অপেরা: 37, 11.5 -ওয়েবকিট-
iOS সাফারি: 9, 3.2 -ওয়েবকিট-
অ্যান্ড্রয়েডের জন্য ইউসি ব্রাউজার: 11.8
অ্যান্ড্রয়েডের জন্য ক্রোম: 73
স্যামসাং ইন্টারনেট: 5, 4 -ওয়েবকিট-

পুরোনো পোস্ট

নভেম্বর 24, 2012

ইংল্যান্ডের 15টি সবচেয়ে কমনীয় ছোট শহর

1. বারউইক-আপন-টুইড

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

আজকাল বারউইক-আপন-টুইড এর অত্যন্ত দৃশ্যমান ইতিহাসের জন্য অনেক বেশি পরিদর্শন করা হয়: মধ্যযুগীয় শহরের দেয়াল, এলিজাবেথান প্রাচীর, 13শ শতাব্দীর দুর্গের ধ্বংসাবশেষ, এর 17 শতকের 'ওল্ড ব্রিজ', টাউন হল, ব্রিটেনের প্রাচীনতম সেনা ব্যারাক, ইংল্যান্ডের উত্তরাঞ্চলীয় হোটেল, অন্যান্য। .

2.রাই

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

চিত্র 1. একটি বহু-কলাম বিন্যাসের একটি উদাহরণ

1. কলামের সংখ্যা এবং প্রস্থ

বহু-কলাম বিন্যাস তৈরি করার সময় কলামের সংখ্যা এবং প্রস্থ নির্ধারণ করা মৌলিক। কলাম-গণনা এবং কলাম-প্রস্থ বৈশিষ্ট্যগুলি কলামের সংখ্যা এবং প্রস্থ সেট করতে ব্যবহৃত হয়।

তৃতীয় প্রপার্টি, কলাম হল একটি শর্টহ্যান্ড প্রপার্টি যা একই সময়ে কলামের প্রস্থ এবং সংখ্যা সেট করে।

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

1.1। কলামের প্রস্থ: কলাম-প্রস্থ বৈশিষ্ট্য

কলাম-প্রস্থ বৈশিষ্ট্য প্রতিটি কলাম দখল করা উচিত সর্বনিম্ন প্রস্থ নির্দিষ্ট করে।

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

বাক্য গঠন

কলাম-প্রস্থ: স্বয়ংক্রিয়; কলাম-প্রস্থ: 100px কলাম-প্রস্থ: 10em কলাম-প্রস্থ: 3.3vw; column-width: inherit; কলাম-প্রস্থ: প্রাথমিক;

1.2। কলামের সংখ্যা: কলাম-গণনা সম্পত্তি

কলাম-গণনা বৈশিষ্ট্য কলামের সংখ্যা বর্ণনা করে এবং তাদের প্রস্থ উপলব্ধ স্থানের প্রস্থের উপর ভিত্তি করে গণনা করা হবে। যদি কলাম-প্রস্থ একই সময়ে কলাম-গণনা হিসাবে নির্দিষ্ট করা হয়, তাহলে কলাম-গণনার মানটি কলামের সর্বাধিক সংখ্যা হিসাবে বিবেচিত হবে।

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

বাক্য গঠন

কলাম সংখ্যা: স্বয়ংক্রিয়; কলাম-গণনা: 2; column-count: inherit; column-count: প্রাথমিক;

1.3। একটি একক কলাম বৈশিষ্ট্য সহ কলাম সেট করা

কলাম প্রপার্টি কলাম-প্রস্থ এবং কলাম-গণনা সেট করার জন্য একটি শর্টহ্যান্ড প্রপার্টি। বাদ দেওয়া মানগুলি তাদের প্রাথমিক মানগুলিতে সেট করা হয়েছে।

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

বাক্য গঠন

কলাম: 12em; /* কলাম-প্রস্থ: 12em; column-count: auto */ columns: auto 12em; /* কলাম-প্রস্থ: 12em; কলাম-গণনা: স্বয়ংক্রিয় */ কলাম: 2; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; কলাম-গণনা: 2 */ কলাম: 2 স্বয়ংক্রিয়; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; কলাম-গণনা: 2 */ কলাম: স্বয়ংক্রিয়; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; কলাম-গণনা: স্বয়ংক্রিয় */ কলাম: অটো অটো; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; column-count: auto */ columns: inherit; কলাম: প্রাথমিক;

2. কলাম ব্যবধান এবং বিভাজন লাইন

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

বিভাজন রেখাটি কোন স্থান না নিয়ে কলামগুলির মধ্যে ফাঁকের মাঝখানে আঁকা হয়। অর্থাৎ, বিভাজক রেখার উপস্থিতি বা পুরুত্ব অন্য কিছুর স্থান পরিবর্তন করবে না।

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

2.1। কলামের মধ্যে ফাঁক: কলাম-ব্যবধান বৈশিষ্ট্য

কলাম-ব্যবধান বৈশিষ্ট্য কলামের মধ্যে ফাঁক সংজ্ঞায়িত করে। যদি কলামে কলাম-বিধি বৈশিষ্ট্য ব্যবহার করে একটি বিভাজক লাইন সেট করা থাকে, তাহলে এই লাইনটি ফাঁকের মাঝখানে অবস্থিত হবে এবং এর প্রস্থ সামগ্রিক প্রস্থের পরিবর্তন করবে না।

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

বাক্য গঠন

কলাম-ব্যবধান: স্বাভাবিক; কলাম-ব্যবধান: 3px; কলাম-ব্যবধান: 2.5em; কলামের ফাঁক: 3% column-gap: inherit; column-gap: প্রাথমিক;

2.2। বিভাজক লাইনের রঙ: কলাম-রুল-রঙ বৈশিষ্ট্য

কলাম-রুল-রঙ বৈশিষ্ট্য বিভাজক লাইনের রঙ নির্দিষ্ট করে।

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

বাক্য গঠন

কলাম-নিয়ম-রং: গোলাপী; কলাম-রুল-রং: #D71C3B; কলাম-রুল-রঙ: rgb(192, 56, 78); column-rule-color: স্বচ্ছ; কলাম-রুল-রঙ: hsla(0, 100%, 50%, 0.6); column-rule-color: inherit; column-rule-color: প্রাথমিক;

2.3। বিভাজক লাইন শৈলী: কলাম-বিধি-শৈলী বৈশিষ্ট্য

কলাম-নিয়ম-শৈলী বৈশিষ্ট্য বিভাজক লাইনের শৈলী সেট করে।

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

কলাম-নিয়ম-শৈলী
মান:
কোনটি মানটি 0 এ মূল্যায়ন করে। ডিফল্ট মান।
গোপন একইভাবে none এর মান দিয়ে, লাইনটি লুকানো হয়।
বিন্দুযুক্ত বর্গাকার বিন্দুর সেট হিসাবে একটি লাইন প্রদর্শন করে।
ড্যাশড ড্যাশের একটি সিরিজ হিসাবে একটি লাইন প্রদর্শন করে।
কঠিন সাধারণ লাইন।
দ্বিগুণ বিভাজক রেখাটিকে দুটি সমান্তরাল পাতলা রেখার ব্যবধানে দেখায়। বিভাজক লাইনের প্রস্থ নির্দিষ্ট করা নেই, তবে লাইনের যোগফল এবং তাদের মধ্যে ব্যবধান কলাম-রুল-প্রস্থের মানের সমান।
খাঁজ ক্যানভাসে চাপা একটি 3D লাইন প্রদর্শন করে। এটি দুটি রঙের সাথে একটি ছায়া তৈরি করে অর্জন করা হয়, একটি গাঢ় এবং একটি হালকা।
রিজ আয়তনের বিভাজক রেখা প্রদর্শন করে, যেমন খাঁজের বিপরীত প্রভাব।
ইনসেট একটি কঠিন রেখা দেখায় যা নির্দিষ্ট রেখার রঙের চেয়ে গাঢ়।
শুরু কলাম-রুল-রঙ বৈশিষ্ট্য দ্বারা নির্দিষ্ট রঙে একটি কঠিন লাইন প্রদর্শন করে।
প্রাথমিক একটি সম্পত্তির মান তার ডিফল্ট মান সেট করে।
উত্তরাধিকারী মূল উপাদান থেকে সম্পত্তি মান উত্তরাধিকারসূত্রে পাওয়া যায়।

বাক্য গঠন

কলাম-নিয়ম-শৈলী: কোনোটিই নয়; column-rule-style: hidden; column-rule-style: ডটেড; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: রিজ; column-rule-style: inset; column-rule-style: outset; column-rule-style: inherit; column-rule-style: প্রাথমিক;

2.4। বিভাজক লাইন প্রস্থ: কলাম-নিয়ম-প্রস্থ বৈশিষ্ট্য

কলাম-নিয়ম-প্রস্থ বৈশিষ্ট্য বিভাজক লাইনের প্রস্থ নির্ধারণ করে। নেতিবাচক মান অনুমোদিত নয়। কলাম-নিয়ম-শৈলী সম্পত্তি ছাড়া কাজ করে না।

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

বাক্য গঠন

কলাম-নিয়ম-প্রস্থ: পাতলা; কলাম-নিয়ম-প্রস্থ: মাঝারি; column-rule-width: পুরু; কলাম-নিয়ম-প্রস্থ: 1px; কলাম-নিয়ম-প্রস্থ: 2.5em column-rule-width: inherit; column-rule-width: প্রারম্ভিক;

2.5। বিভাজক লাইন বৈশিষ্ট্য শর্টহ্যান্ড: কলাম-বিধি বৈশিষ্ট্য

কলাম-রুল প্রপার্টিটি কলাম-রুল-প্রস্থ বৈশিষ্ট্য কলাম-রুল-স্টাইল কলাম-রুল-রঙের জন্য সংক্ষিপ্ত লেখা।

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

বাক্য গঠন

কলাম-নিয়ম: ডটেড; কলাম-নিয়ম: কঠিন 8px; column-rule: কঠিন নীল; column-rule: ঘন ইনসেট নীল; column-rule: inherit; column-rule: প্রাথমিক;

3. কলাম বিরতি

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

4. কলাম স্প্যান: কলাম-স্প্যান সম্পত্তি

কলাম-স্প্যান বৈশিষ্ট্য একটি উপাদানকে একাধিক কলাম স্প্যান করার অনুমতি দেয়। এটি কনটেইনার ব্লকের জন্য নয়, তবে ভিতরের একটি নির্দিষ্ট উপাদানের জন্য, উদাহরণস্বরূপ, হেডারের জন্য নির্দিষ্ট করা হয়েছে।

ভবিষ্যতে স্প্যান করার জন্য কলামের সংখ্যা নির্দিষ্ট করা সম্ভব হবে, কলস্প্যান অ্যাট্রিবিউটের মতো যা একটি টেবিল কক্ষে প্রয়োগ করা যেতে পারে, কিন্তু CSS3 স্পেসিফিকেশনে শুধুমাত্র দুটি সম্ভাব্য মান রয়েছে: কোনোটি নয় এবং সব।

প্রপার্টি Firefox-এ ডিফল্টরূপে কাজ করে না। ব্যবহারকারীকে অবশ্যই স্পষ্টভাবে বৈশিষ্ট্যটি সক্ষম করতে হবে, layout.css.column-span.enabled অবশ্যই সত্যে সেট করতে হবে। ফায়ারফক্সে সেটিংস পরিবর্তন করতে, about:config এ যান।

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

বাক্য গঠন

কলাম স্প্যান: কোনটি নয় column-span: all; column-span: inherit; column-span: প্রাথমিক;

5. বিষয়বস্তু দিয়ে কলাম পূরণ করা: কলাম-পূর্ণ বৈশিষ্ট্য

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

সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায় না।

বাক্য গঠন

কলাম-ভরন: স্বয়ংক্রিয়; column-fill:ব্যালেন্স; column-fill: balance-all; column-fill: inherit; column-fill: প্রাথমিক;

6. ওভারফ্লো

6.1। মাল্টিকলাম পাত্রের ভিতরে ওভারফ্লো

যেখানে এটি কলামটি ভাঙ্গতে পারে তা ব্যতীত, কলামের সীমার বাইরে প্রসারিত সামগ্রী কলামের সীমার বাইরে প্রসারিত হয় এবং কাটা হয় না। এটি মূলত ছবির ক্ষেত্রে প্রযোজ্য। এই সমস্যাটি সমাধান করার জন্য, আপনাকে চিত্রগুলির জন্য নিম্নলিখিত বৈশিষ্ট্যগুলি সেট করতে হবে:

Img ( প্রদর্শন: ব্লক; /* ছবির নীচের প্যাডিংটি সরান */ প্রস্থ: 100%; /* ধারক ব্লকের সম্পূর্ণ প্রস্থে ছবিটি প্রসারিত করুন */ )

6.2। মাল্টিকলাম কন্টেইনারের বাইরে পেজিনেশন এবং ওভারফ্লো

বিষয়বস্তু এবং বিভাজক লাইনগুলি যেগুলি বহু-কলামের কন্টেইনারের প্রান্তে কলামের বাইরে প্রসারিত হয় সেগুলি ওভারফ্লো বৈশিষ্ট্য অনুসারে ক্লিপ করা হয়৷

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

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

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

কলাম ব্যবহার করে

কলাম গণনা এবং প্রস্থ

দুটি CSS বৈশিষ্ট্য নিয়ন্ত্রণ করে যে কতগুলি কলাম প্রদর্শিত হবে: কলাম-গণনা এবং কলাম-প্রস্থ।

কলাম-গণনা বৈশিষ্ট্য একটি নির্দিষ্ট সংখ্যায় কলামের সংখ্যা সেট করে। যেমন,

উদাহরণ 1

এইচটিএমএল

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ডুইস অউট ইরিউর ডলোর ইন রিপ্রেহেন্ডারিট ইন ভোলুপ্টেট ভেলিট এসসে সিলাম ডলোরে ইউ ফুগিয়াট নুলা প্যারিয়াতুর।

ব্যতীত sint occaecat cupidatat non proident, Sunt in culpa qui officia deserunt mollit anim id est laborum.

css

#কল (কলাম-গণনা: 2;)

ফলাফল

বিষয়বস্তু দুটি কলামে প্রদর্শন করবে (যদি আপনি একটি মাল্টি-কলাম অনুগত ব্রাউজার ব্যবহার করেন):

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

উদাহরণ 2

এইচটিএমএল

css

#wid (কলাম-প্রস্থ: 100px; )

ফলাফল

একটি মাল্টি-কলাম ব্লকে, প্রয়োজন অনুযায়ী বিষয়বস্তু স্বয়ংক্রিয়ভাবে এক কলাম থেকে পরবর্তীতে প্রবাহিত হয়। সমস্ত HTML, CSS এবং DOM কার্যকারিতা কলামগুলির মধ্যে সমর্থিত, যেমন সম্পাদনা এবং মুদ্রণ।

কলাম শর্টহ্যান্ড

বেশিরভাগ সময়, একজন ওয়েব ডিজাইনার দুটি CSS বৈশিষ্ট্যের একটি ব্যবহার করবেন: কলাম-গণনা বা কলাম-প্রস্থ। যেহেতু এই বৈশিষ্ট্যগুলির মানগুলি ওভারল্যাপ হয় না, তাই শর্টহ্যান্ড কলামগুলি ব্যবহার করা প্রায়শই সুবিধাজনক। যেমন

CSS ঘোষণা কলাম-প্রস্থ: 12em কলাম দ্বারা প্রতিস্থাপিত হতে পারে: 12em।

উদাহরণ 3

এইচটিএমএল

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ডুইস অউট ইরিউর ডলোর ইন রিপ্রেহেন্ডারিট ইন ভোলুপ্টেট ভেলিট এসসে সিলাম ডলোরে ইউ ফুগিয়াট নুলা প্যারিয়াতুর। ব্যতীত sint occaecat cupidat non proident, Sunt in culpa qui officia deserunt mollit anim id est laborum

css

#col_short ( কলাম: 12em; )

CSS ঘোষণা কলাম-গণনা: 4 কলাম দ্বারা প্রতিস্থাপিত হতে পারে: 4।

উদাহরণ 4

এইচটিএমএল

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ডুইস অউট ইরিউর ডলোর ইন রিপ্রেহেন্ডারিট ইন ভোলুপ্টেট ভেলিট এসসে সিলাম ডলোরে ইউ ফুগিয়াট নুলা প্যারিয়াতুর। ব্যতীত sint occaecat cupidat non proident, Sunt in culpa qui officia deserunt mollit anim id est laborum

css

#কলাম_৪ ( কলাম: ৪; )

ফলাফল

দুটি CSS ঘোষণা কলাম-প্রস্থ: 8em এবং কলাম-গণনা: 12 কলাম দ্বারা প্রতিস্থাপিত হতে পারে: 12 8em।

উদাহরণ 5

এইচটিএমএল

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ডুইস অউট ইরিউর ডলোর ইন রিপ্রেহেন্ডারিট ইন ভোলুপ্টেট ভেলিট এসসে সিলাম ডলোরে ইউ ফুগিয়াট নুলা প্যারিয়াতুর। ব্যতীত sint occaecat cupidat non proident, Sunt in culpa qui officia deserunt mollit anim id est laborum

css

#কলাম_12 ( কলাম: 12 8em; )

ফলাফল

উচ্চতা ভারসাম্য

CSS3 কলাম স্পেসিফিকেশনের জন্য কলামের উচ্চতা অবশ্যই ভারসাম্যপূর্ণ হতে হবে: অর্থাৎ, ব্রাউজার স্বয়ংক্রিয়ভাবে সর্বোচ্চ কলামের উচ্চতা সেট করে যাতে প্রতিটি কলামের বিষয়বস্তুর উচ্চতা প্রায় সমান হয়। ফায়ারফক্স এটা করে।

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

কলাম ফাঁক

কলামগুলির মধ্যে একটি ফাঁক রয়েছে। প্রস্তাবিত ডিফল্ট হল 1em। মাল্টি-কলাম ব্লকে কলাম-গ্যাপ বৈশিষ্ট্য প্রয়োগ করে এই আকার পরিবর্তন করা যেতে পারে:

উদাহরণ 6

এইচটিএমএল

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ডুইস অউট ইরিউর ডলোর ইন রিপ্রেহেন্ডারিট ইন ভোলুপ্টেট ভেলিট এসসে সিলাম ডলোরে ইউ ফুগিয়াট নুলা প্যারিয়াতুর। ব্যতীত sint occaecat cupidat non proident, Sunt in culpa qui officia deserunt mollit anim id est laborum

css

#কলাম_ব্যবধান ( কলাম-গণনা: 5; কলাম-ব্যবধান: 2em; )

ফলাফল

সাবলীল পতন

কলাম বৈশিষ্ট্যগুলি অ-কলাম-সমর্থক ব্রাউজার দ্বারা উপেক্ষা করা হবে। তাই একটি লেআউট তৈরি করা তুলনামূলকভাবে সহজ যা সেই ব্রাউজারগুলিতে একটি একক কলামে প্রদর্শিত হবে এবং সমর্থনকারী ব্রাউজারগুলিতে একাধিক কলাম ব্যবহার করবে৷

উপসংহার

CSS3 কলাম হল একটি আদিম লেআউট যা ওয়েব ডেভেলপারদের স্ক্রীন রিয়েল এস্টেটের সর্বোত্তম ব্যবহার করতে সাহায্য করবে। কল্পনাপ্রবণ বিকাশকারীরা তাদের জন্য অনেকগুলি ব্যবহার খুঁজে পেতে পারে, বিশেষত স্বয়ংক্রিয় উচ্চতা ভারসাম্য বৈশিষ্ট্য সহ।

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

মাল্টি-কলাম কন্টেন্ট লেআউট (সাধারণ মাল্টি-কলাম পেজ লেআউটের কাজটি নিয়ে বিভ্রান্ত হবেন না, যা একটি গ্রিডে ব্লক স্থাপনের সমস্যার কাছাকাছি) দীর্ঘদিন ধরে ওয়েব স্ট্যান্ডার্ডের জগতে তার পথ তৈরি করে চলেছে এবং , অবশেষে, শুধুমাত্র সংশ্লিষ্ট CSS3 মাল্টি মডিউল -কলাম লেআউটের আকারে প্রার্থীর সুপারিশের স্থিতিতে পৌঁছেনি, বরং ব্রাউজারগুলিতে মোটামুটি ব্যাপক সমর্থনও পেয়েছে: কোথাও উপসর্গ সহ (-moz- বা -webkit-) এবং কোথাও বর্তমান (Opera) 11.1+) এবং পরিকল্পিত সংস্করণ (IE10+), এবং অবিলম্বে উপসর্গ ছাড়াই।

মন্তব্য করুন
ইন্টারনেট এক্সপ্লোরার 10-এর ক্ষেত্রে, এর অর্থ হল আপনি HTML/CSS/JS ব্যবহার করে Windows 8 মেট্রো-স্টাইল অ্যাপ তৈরি করার সময় CSS3 মাল্টি-কলাম ব্যবহার করতে পারবেন।

এই নিবন্ধটির উদ্দেশ্যে, আমি কোড বিভ্রান্ত করার জন্য ব্রাউজার উপসর্গ ব্যবহার করব না, কিন্তু বাস্তব ব্যবহারে, Firefox, Safari এবং Chrome এর জন্য উপসর্গ সমর্থন যোগ করতে ভুলবেন না।

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

দ্বিতীয়ত, মাল্টি-কলাম ডিসপ্লে মিডিয়া ক্যোয়ারি (এবং প্রতিক্রিয়াশীল ডিজাইন আইডিয়া, ) এর ক্ষমতার সাথে ভাল কাজ করে, উদাহরণস্বরূপ, বিভিন্ন স্ক্রীন আকারে, আপনি পাঠ্যকে বিভিন্ন সংখ্যক কলামে ফর্ম্যাট করতে পারেন:

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

এই অর্থে, কলামগুলির অনুভূমিক প্রকৃতি অনুভূমিক স্ক্রলিংয়ের সাথে আরও ভালভাবে মিলিত হয় (যেমন এটি Win8-এর জন্য অনেক অ্যাপ্লিকেশনে ব্যবহৃত হয় - উদাহরণস্বরূপ, এটি USA Today অ্যাপ্লিকেশনে স্পষ্টভাবে দেখা যায়):

সাধারণভাবে, স্পিকারগুলি দুর্দান্ত, তবে ব্যবহারকারীদের সুবিধার কথা ভুলে যাবেন না। আর এখন লড়াই!

স্পিকার

সুতরাং, আমাদের কাছে পাঠ্য (সামগ্রী) রয়েছে যা আমরা কয়েকটি কলামে রাখতে চাই। কোথা থেকে শুরু করতে হবে?

এই ধরনের একটি উপাদানকে একটি বহু-কলাম উপাদানে পরিণত করতে, আপনাকে CSS শৈলীর মাধ্যমে নিম্নলিখিত বৈশিষ্ট্যগুলির মধ্যে একটি সেট করতে হবে: কলাম প্রস্থবা কলাম-গণনাছাড়া অন্য একটি মান স্বয়ংক্রিয়. উদাহরণ স্বরূপ,
পাঠ্যকে দুটি কলামে বিভক্ত করতে, শুধু এটি করুন:

প্রবন্ধ (কলাম-গণনা: 2;)

ব্রাউজার বাকি কাজ করবে:

বিকল্প সম্পত্তি - কলাম প্রস্থ- আপনাকে কলামের সর্বোত্তম প্রস্থ সেট করতে দেয়:

প্রবন্ধ ( কলাম-প্রস্থ: 150px; )

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

এই আচরণটি স্পেসিফিকেশন দ্বারা সংজ্ঞায়িত করা হয় এবং প্রতিক্রিয়াশীল মার্কআপ তৈরি করার সময় (স্বয়ংক্রিয়ভাবে) আরও নমনীয়তার অনুমতি দেয়:

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

এক অর্থে, উইন্ডোর আকারের উপর নির্ভর করে এবং স্বয়ংক্রিয়ভাবে কলামের প্রস্থ গণনা করে মিডিয়া ক্যোয়ারি ব্যবহার করে একটি ভিন্ন সংখ্যক কলাম নির্দিষ্ট করার বিকল্প হিসাবে দেখা যেতে পারে:

@media (মিনিমাম-প্রস্থ:400px) ( নিবন্ধ ( কলাম-গণনা: 2; ) ) @media (কম-প্রস্থ:600px) ( নিবন্ধ ( কলাম-গণনা: 3; ) ) ...

এই দ্বিতীয়বার আমি বিকল্প সম্পর্কে কথা বলছি - এবং এখানে কেন।

গণনা বনাম প্রস্থ

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

কলাম: 12em; /* কলাম-প্রস্থ: 12em; column-count: auto; */ কলাম: 2; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; কলাম-গণনা: 2; */কলাম: স্বয়ংক্রিয়; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; column-count: auto; */ কলাম: স্বয়ংক্রিয় 12em; /* কলাম-প্রস্থ: 12em; column-count: auto; */কলাম: 2 স্বয়ংক্রিয়; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; কলাম-গণনা: 2; */

আপনি যদি কলামের সংখ্যা এবং সর্বোত্তম প্রস্থ উভয়ই উল্লেখ করেন তবে কী হবে? স্পেসিফিকেশন অনুযায়ী, এই ক্ষেত্রে কলাম-গণনাকলামের সর্বাধিক সংখ্যা নির্ধারণ করে:

প্রবন্ধ ( কলাম: 150px 3; /* কলাম-প্রস্থ: 150px; কলাম-গণনা: 3; */ )

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

ইন্টারেক্টিভ

আপনি ietestdrive.com এ CSS3 মাল্টি-কলামের সাথে খেলতে পারেন:

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

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

মাল্টি-কলাম কন্টেন্ট লেআউট (সাধারণ মাল্টি-কলাম পেজ লেআউটের কাজটি নিয়ে বিভ্রান্ত হবেন না, যা একটি গ্রিডে ব্লক স্থাপনের সমস্যার কাছাকাছি) দীর্ঘদিন ধরে ওয়েব স্ট্যান্ডার্ডের জগতে তার পথ তৈরি করে চলেছে এবং , অবশেষে, শুধুমাত্র সংশ্লিষ্ট CSS3 মাল্টি মডিউল -কলাম লেআউটের আকারে প্রার্থীর সুপারিশের স্থিতিতে পৌঁছেনি, বরং ব্রাউজারগুলিতে মোটামুটি ব্যাপক সমর্থনও পেয়েছে: কোথাও উপসর্গ সহ (-moz- বা -webkit-) এবং কোথাও বর্তমান (Opera) 11.1+) এবং পরিকল্পিত সংস্করণ (IE10+), এবং অবিলম্বে উপসর্গ ছাড়াই।

মন্তব্য করুন
ইন্টারনেট এক্সপ্লোরার 10-এর ক্ষেত্রে, এর অর্থ হল আপনি HTML/CSS/JS ব্যবহার করে Windows 8 মেট্রো-স্টাইল অ্যাপ তৈরি করার সময় CSS3 মাল্টি-কলাম ব্যবহার করতে পারবেন।

এই নিবন্ধটির উদ্দেশ্যে, আমি কোড বিভ্রান্ত করার জন্য ব্রাউজার উপসর্গ ব্যবহার করব না, কিন্তু বাস্তব ব্যবহারে, Firefox, Safari এবং Chrome এর জন্য উপসর্গ সমর্থন যোগ করতে ভুলবেন না।

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

দ্বিতীয়ত, মাল্টি-কলাম ডিসপ্লে মিডিয়া ক্যোয়ারি (এবং প্রতিক্রিয়াশীল ডিজাইন আইডিয়া, ) এর ক্ষমতার সাথে ভাল কাজ করে, উদাহরণস্বরূপ, বিভিন্ন স্ক্রীন আকারে, আপনি পাঠ্যকে বিভিন্ন সংখ্যক কলামে ফর্ম্যাট করতে পারেন:

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

এই অর্থে, কলামগুলির অনুভূমিক প্রকৃতি অনুভূমিক স্ক্রলিংয়ের সাথে আরও ভালভাবে মিলিত হয় (যেমন এটি Win8-এর জন্য অনেক অ্যাপ্লিকেশনে ব্যবহৃত হয় - উদাহরণস্বরূপ, এটি USA Today অ্যাপ্লিকেশনে স্পষ্টভাবে দেখা যায়):

সাধারণভাবে, স্পিকারগুলি দুর্দান্ত, তবে ব্যবহারকারীদের সুবিধার কথা ভুলে যাবেন না। আর এখন লড়াই!

স্পিকার

সুতরাং, আমাদের কাছে পাঠ্য (সামগ্রী) রয়েছে যা আমরা কয়েকটি কলামে রাখতে চাই। কোথা থেকে শুরু করতে হবে?

এই ধরনের একটি উপাদানকে একটি বহু-কলাম উপাদানে পরিণত করতে, আপনাকে CSS শৈলীর মাধ্যমে নিম্নলিখিত বৈশিষ্ট্যগুলির মধ্যে একটি সেট করতে হবে: কলাম প্রস্থবা কলাম-গণনাছাড়া অন্য একটি মান স্বয়ংক্রিয়. উদাহরণ স্বরূপ,
পাঠ্যকে দুটি কলামে বিভক্ত করতে, শুধু এটি করুন:

প্রবন্ধ (কলাম-গণনা: 2;)

ব্রাউজার বাকি কাজ করবে:

বিকল্প সম্পত্তি - কলাম প্রস্থ- আপনাকে কলামের সর্বোত্তম প্রস্থ সেট করতে দেয়:

প্রবন্ধ ( কলাম-প্রস্থ: 150px; )

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

এই আচরণটি স্পেসিফিকেশন দ্বারা সংজ্ঞায়িত করা হয় এবং প্রতিক্রিয়াশীল মার্কআপ তৈরি করার সময় (স্বয়ংক্রিয়ভাবে) আরও নমনীয়তার অনুমতি দেয়:

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

এক অর্থে, উইন্ডোর আকারের উপর নির্ভর করে এবং স্বয়ংক্রিয়ভাবে কলামের প্রস্থ গণনা করে মিডিয়া ক্যোয়ারি ব্যবহার করে একটি ভিন্ন সংখ্যক কলাম নির্দিষ্ট করার বিকল্প হিসাবে দেখা যেতে পারে:

@media (মিনিমাম-প্রস্থ:400px) ( নিবন্ধ ( কলাম-গণনা: 2; ) ) @media (কম-প্রস্থ:600px) ( নিবন্ধ ( কলাম-গণনা: 3; ) ) ...

এই দ্বিতীয়বার আমি বিকল্প সম্পর্কে কথা বলছি - এবং এখানে কেন।

গণনা বনাম প্রস্থ

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

কলাম: 12em; /* কলাম-প্রস্থ: 12em; column-count: auto; */ কলাম: 2; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; কলাম-গণনা: 2; */কলাম: স্বয়ংক্রিয়; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; column-count: auto; */ কলাম: স্বয়ংক্রিয় 12em; /* কলাম-প্রস্থ: 12em; column-count: auto; */কলাম: 2 স্বয়ংক্রিয়; /* কলাম-প্রস্থ: স্বয়ংক্রিয়; কলাম-গণনা: 2; */

আপনি যদি কলামের সংখ্যা এবং সর্বোত্তম প্রস্থ উভয়ই উল্লেখ করেন তবে কী হবে? স্পেসিফিকেশন অনুযায়ী, এই ক্ষেত্রে কলাম-গণনাকলামের সর্বাধিক সংখ্যা নির্ধারণ করে:

প্রবন্ধ ( কলাম: 150px 3; /* কলাম-প্রস্থ: 150px; কলাম-গণনা: 3; */ )

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

ইন্টারেক্টিভ

আপনি ietestdrive.com এ CSS3 মাল্টি-কলামের সাথে খেলতে পারেন:

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