Normal flow, display আর overflow — ব্রাউজার কীভাবে সাজায়

১ · Normal flow — কিছু না বললেও ব্রাউজার যেভাবে সাজায়

মডিউল ৩-এ আপনি শিখেছেন প্রতিটি element একটি বাক্স (পর্ব ১৯) আর তার মাপ কীভাবে হিসাব হয়। এবার লেআউটের মডিউল — বাক্সগুলো পাতার কোথায় বসবে। প্রথম প্রশ্ন: কোনো লেআউট CSS না লিখলে ব্রাউজার বাক্সগুলো কোথায় বসায়?

উত্তর হলো normal flow — ব্রাউজারের ডিফল্ট সাজানোর নিয়ম। পর্ব ৩ থেকে ১৫-এর সব পাতা এই নিয়মেই সেজেছে। নিয়মটা দুটি ছোট নিয়মের যোগফল:

• Block বাক্স (block) ওপর থেকে নিচে একটার পর একটা বসে। প্রতিটি নিজের আলাদা সারি নেয়, আর চওড়ায় parent-এর পুরো জায়গা জুড়ে থাকে — নিজের width ছোট করে দিলেও পাশে অন্য block বসে না।
• Inline বাক্স (inline) লেখার মতো আচরণ করে — বাঁ থেকে ডানে চলে, লাইন ভরে গেলে পরের লাইনে নামে। একটি লম্বা লিংক দুই লাইনে ভেঙেও যেতে পারে।

নিজের চোখে দেখুন। নিচের পাতায় block বাক্সগুলো নীল দাগে আর inline বাক্সগুলো লাল দাগে ঘেরা:

<style>
  h3, p, div { outline: 2px solid #2563eb; }
  strong, a, span { outline: 2px solid #dc2626; }
</style>
<h3>নতুন অফার</h3>
<p style="width: 230px">আজ <strong>সব রকম চাল</strong> দশ শতাংশ ছাড়ে,
  আর <a href="#d">ঢাকার ভেতরে হোম ডেলিভারি একদম ফ্রি</a> থাকছে।
  অর্ডার করলে <span>চব্বিশ ঘণ্টায়</span> পৌঁছে যাবে।</p>
<div>এটি একটি div</div>
<div style="width: 160px">এটি ছোট div</div>
<div id="d">তবু এটি পাশে বসল না, নিচেই এলো</div>
<span>span এক</span> <span>span দুই</span>

এবার ব্রাউজারের মাথার ভেতরে ঢুকি। পাতা আঁকার আগে ব্রাউজার layout ধাপে প্রতিটি বাক্সের জায়গা হিসাব করে — normal flow-এ সেটা হয় কয়েকটি সরল ধাপে:

একটি কথা বলে রাখি। “ওপর থেকে নিচে”, “বাঁ থেকে ডানে” বাংলা আর ইংরেজির জন্য সত্য। আরবিতে লাইন চলে ডান থেকে বাঁয়ে, আর জাপানি বই অনেক সময় খাড়া লেখা হয়। তাই CSS-এর আসল নিয়মটা দিক দিয়ে নয়, লেখার প্রবাহ দিয়ে বলা: block বাক্স জমা হয় “block দিকে”, inline বাক্স চলে “inline দিকে”। লেখার দিক বদলায় writing-mode property — অংশ ৮-এ হাতে-কলমে দেখবেন।

২ · display — বাক্সটা কেমন আচরণ করবে

কোন element block আর কোনটা inline, সেটা HTML ঠিক করে না — ঠিক করে CSS-এর display property. ব্রাউজারের নিজস্ব CSS-এ (user-agent stylesheet) লেখা আছে p, div, h1, ul … { display: block; }; আর যে element-এর জন্য কিছু লেখা নেই (যেমন span, strong, a), তার ডিফল্ট মান inline. তাই আপনি চাইলে যেকোনো element-এর আচরণ বদলে দিতে পারেন — তার অর্থ (semantics) না বদলেই। একটি <a>-কে block বানালেও সে লিংকই থাকে।

প্রতিদিনের কাজে চারটি মান সবচেয়ে বেশি লাগে। নিচের এডিটরে দুটি “ট্যাগ” লেবেল আছে, যাদের width, height, padding আর margin সব দেওয়া — শুধু display বদলে দেখুন কোনটা কাজ করে:

p {
  width: 320px;
  line-height: 1.6;
}
.tag {
  display: inline;   /* block, inline-block, none করে দেখুন */
  width: 110px;
  height: 36px;
  padding: 6px 8px;
  margin: 14px 4px;
  background: #fef3c7;
  border: 2px solid #d97706;
}

inline-block বোতাম, ব্যাজ আর ছোট লেবেলের প্রিয় মান — বাইরে inline (লাইনে বসে), ভেতরে block (নিজের মাপ রাখে)। একটি ছোট অভ্যাস জেনে রাখুন: পাশাপাশি দুটি inline-block-এর মাঝে HTML-এর স্পেস বা লাইন-ভাঙা থেকে একটি শব্দ-ফাঁক থাকে। পাশাপাশি সাজানোর কাজ আজ Flexbox-এর gap দিয়ে হয় (পর্ব ২৫), সেখানে এই ঝামেলা নেই।

৩ · লুকানোর ছয় উপায় — চোখ, জায়গা, screen reader আর কীবোর্ড

display: none দেখে মনে হতে পারে লুকানোর কাজ শেষ। কিন্তু একটি পাতা শুধু চোখে দেখা হয় না। screen reader পাতা পড়ে শোনায়, কীবোর্ড ব্যবহারকারী Tab চেপে এক বোতাম থেকে আরেক বোতামে যান। তাই “লুকানো” বলতে চারটি আলাদা প্রশ্ন: চোখে দেখা যায় কি? জায়গা দখল করে কি? screen reader পড়ে কি? Tab-এ focus যায় কি? নিচের এডিটরে প্রতিটি সারিতে “আগে” আর “পরে”-র মাঝে একটি বোতাম আছে, প্রতিটি আলাদা উপায়ে লুকানো:

<style>
  .slot { display: inline-block; padding: 4px; background: #fde68a; }
  .none { display: none; }
  .vis  { visibility: hidden; }
  .op   { opacity: 0; }
</style>
<p>display: none → আগে<span class="slot none"><button>বোতাম ১</button></span>পরে</p>
<p>visibility: hidden → আগে<span class="slot vis"><button>বোতাম ২</button></span>পরে</p>
<p>opacity: 0 → আগে<span class="slot op"><button>বোতাম ৩</button></span>পরে</p>
<p>hidden attribute → আগে<span class="slot" hidden><button>বোতাম ৪</button></span>পরে</p>
<p>লুকানো নয় → আগে<span class="slot"><button>বোতাম ৫</button></span>পরে</p>
<script>
  document.querySelectorAll('button').forEach(function (b) {
    b.addEventListener('click', function () { console.log('ক্লিক হলো: ' + b.textContent); });
    b.addEventListener('focus', function () { console.log('focus পেল: ' + b.textContent); });
  });
</script>

আরও তিনটি কথা। visibility: hidden child-এ উত্তরাধিকারে যায়, কিন্তু child নিজে visibility: visible লিখলে আবার দেখা দেয় — display: none-এর ভেতর থেকে কেউ এভাবে বেরোতে পারে না। aria-hidden="true"-এর ভেতরে focus পাওয়ার মতো কিছু থাকলে screen reader ব্যবহারকারী Tab চেপে এমন বোতামে পৌঁছান, যার নাম বা কাজ কিছুই শোনা যায় না — পরীক্ষার টুলগুলো একে গুরুতর ত্রুটি ধরে। আর পুরো অংশ দেখা গেলেও “অচল” করতে আছে inert attribute (পর্ব ১১)।

visually-hidden ক্লাসটি দেখতে এমন — এখানে position ব্যবহার হয়েছে, যার বিস্তারিত পরের পর্বে:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

৪ · display-এর দুই মুখ — বাইরের আচরণ আর ভেতরের সাজ

এতক্ষণ যা দেখলেন, তার ভেতরে একটি কাঠামো আছে। প্রতিটি বাক্সের আসলে দুটি চরিত্র:

• বাইরের আচরণ (outer display): প্রতিবেশীদের সাথে বাক্সটি কীভাবে বসবে — block-এর মতো নিজের সারিতে, নাকি inline-এর মতো লাইনের ভেতরে।
• ভেতরের সাজ (inner display): বাক্সটি নিজের ভেতরের child-দের কীভাবে সাজাবে — normal flow-এ (flow), নতুন আলাদা এলাকা বানিয়ে (flow-root), Flexbox-এ (flex), Grid-এ (grid), নাকি টেবিলের নিয়মে (table).

CSS-এর আধুনিক নিয়মে আপনি দুটোই একসাথে লিখতে পারেন — একে বলে দুই-শব্দের display (multi-keyword syntax). আর পুরোনো এক-শব্দের মানগুলো আসলে এদেরই সংক্ষিপ্ত রূপ:

টেবিলটা দেখলেই একটি রহস্য খোলে: inline-flex বাইরে inline, ভেতরে flex. display: flex দেওয়া element নিজে block-এর মতো সারি নেয় — flex নিয়মে সাজে তার child-রা। পর্ব ২৫ আর ২৭-এ এই ভাবনাটাই কাজে লাগবে।

দুই-শব্দের রূপ ২০২৩ সাল থেকে সব প্রধান ব্রাউজারে চলে, অর্থাৎ Baseline. তবু বাস্তবে এক-শব্দের রূপই বেশি চলে — পুরোনো ব্রাউজারেও নিরাপদ, ফলও একই। দুই-শব্দের রূপের আসল মূল্য বোঝার কাঠামোয়: “বাইরে আর ভেতরে” ভাবলে প্রতিটি display মান নিজেই ব্যাখ্যা হয়ে যায়।

display: contents — নিজের বাক্স মুছে, child-দের ওপরে তুলে দেওয়া

একটি বিশেষ মান হলো display: contents. এটি element-এর নিজের বাক্স তৈরি করে না, কিন্তু তার child-দের বাক্স ঠিকই তৈরি হয় — যেন element-টির জায়গায় সরাসরি তার child-রা বসে আছে। কাজে লাগে যখন একটি wrapper element (যেমন semantic কারণে রাখা <ul> বা কোনো component-এর বাড়তি div) Flexbox বা Grid-এর পথে বাধা দেয়, আর আপনি চান ভেতরের item-রা সরাসরি বাইরের grid-এর অংশ হোক।

৫ · flow-root আর block formatting context — নিজের এলাকা নিজের নিয়মে

অংশ ১-এ বলেছিলাম, block বাক্সগুলো একটি “সাজানোর এলাকার” ভেতরে ওপর থেকে নিচে বসে। এই এলাকার নাম block formatting context (BFC). পুরো পাতা — <html> element — একটি বড় BFC. কিন্তু কিছু element নিজের ভেতরে একটি নতুন, আলাদা BFC খোলে। নতুন BFC-র তিনটি বড় নিয়ম:

1. ভেতরের float এর বাইরে বেরোয় না — BFC float-কে পুরোপুরি ধরে রাখে, উচ্চতায়ও।
2. ভেতরের child-এর margin BFC-র নিজের margin-এর সাথে মেশে না — বাইরে পালায় না।
3. বাইরের কোনো float BFC-র বাক্সের ওপর চড়ে বসে না — BFC float-এর পাশে সরে জায়গা নেয়।

এক সময় নতুন BFC বানাতে মানুষ overflow: hidden লিখত — কারণ এটিও BFC তৈরি করে। কিন্তু তার পার্শ্বপ্রতিক্রিয়া আছে: বাইরে ছড়ানো ছায়া বা dropdown কেটে যায়। তাই CSS একটি মান যোগ করেছে, যার একমাত্র কাজ পরিষ্কার একটি BFC বানানো: display: flow-root. এটি এখন Baseline Widely available — বহু বছর ধরে সব আধুনিক ব্রাউজারে চলে। ধাপে ধাপে দেখুন সে কোন দুটি সমস্যা সারায় (নিচের ছবিগুলো আসল CSS দিয়ে আঁকা):

এবার নিজের হাতে। নিচের কার্ডে ছবিটি float, আর কার্ড নিচে ঝুলে থাকা ছবিকে ধরে রাখতে পারছে না:

.card {
  border: 3px solid #0369a1;
  background: #e0f2fe;
  /* display: flow-root; */
}
.photo {
  float: left;
  width: 90px;
  height: 90px;
  margin: 8px;
  background: #fbbf24;
  font-size: 48px;
  text-align: center;
}
.card p { margin: 8px; }
.next { margin: 0; background: #fee2e2; }

নতুন BFC আর কারা বানায়, জেনে রাখুন — অনেক “অদ্ভুত” আচরণের ব্যাখ্যা এখানেই: inline-block, float, position: absolute/fixed, visible বা clip ছাড়া অন্য overflow, টেবিলের ঘর, Flexbox ও Grid-এর item, আর contain: layout. Flex বা Grid container-এর ভেতরে margin মেশে না — কারণ সেটা block লেআউটই নয়।

৬ · float — আসলে যে কাজের জন্য তৈরি

পত্রিকার পাতা খুলুন। একটি ছবি বাঁ দিকে বসানো, আর খবরের লেখা ছবির ডান পাশ দিয়ে নেমে ছবি শেষ হলে আবার পুরো চওড়ায় ছড়িয়ে গেছে। ছাপাখানায় একে বলে text wrap. float ঠিক এই কাজের জন্য তৈরি — একটি বাক্সকে বাঁ (left) বা ডান (right) কিনারায় ভাসিয়ে দেওয়া, যাতে আশপাশের লেখা তার চারপাশ দিয়ে বয়ে যায়। নতুন লেখার দিক-নিরপেক্ষ মান inline-start আর inline-end-ও আছে। আর float-এর পাশে না বসে তার নিচে নামতে চাইলে clear: left | right | both.

আধুনিক CSS float-কে একটি সুন্দর বন্ধুও দিয়েছে — shape-outside, যা বলে লেখা কোন আকৃতি ধরে ঘুরবে। এটি Baseline Widely available. নিচে একটি গোল চাঁদ, আর কবিতার লাইন তার বাঁক ধরে বইছে:

.page {
  width: 340px;
  font: 16px/1.6 sans-serif;
}
.moon {
  float: left;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fef9c3, #facc15);
  shape-outside: circle(50%);
  margin: 0 14px 6px 0;
}
p { margin: 0; }

পুরোনো কোড বা AI-এর উত্তরে নিচের মতো clearfix দেখলে চিনে নিন — আর নতুন কোডে এর বদলে display: flow-root লিখুন:

/* ইতিহাস — নতুন কোডে লিখবেন না */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* আজকের সমাধান */
.card { display: flow-root; }

৭ · overflow — বাক্সে না আঁটলে কী হবে

বাক্সের মাপ নির্দিষ্ট আর ভেতরের জিনিস তার চেয়ে বড় হলে তাকে বলে উপচে পড়া — overflow. বাংলায় এটা প্রায়ই ঘটে, কারণ ইংরেজি বোতামের লেখা অনুবাদে লম্বা হয়ে যায়। CSS-এর ডিফল্ট সিদ্ধান্ত “কিছু লুকাব না” — তথ্য হারানোর চেয়ে কুৎসিত দেখানো ভালো। আচরণ বদলাতে overflow-এর পাঁচটি মান — নিচের বাক্সগুলো আসল CSS দিয়ে আঁকা:

নিজে বদলে দেখুন — আর সাথে একটি ছোট নতুন property:

.box {
  width: 230px;
  height: 70px;
  padding: 8px;
  border: 2px solid #475569;
  background: #f1f5f9;
  overflow: visible;      /* hidden, scroll, auto, clip */
  scrollbar-gutter: auto; /* stable করে দেখুন */
}
p { color: #b91c1c; }

scrollbar-gutter তুলনামূলক নতুন — ২০২৪ সালের শেষে শেষ প্রধান ব্রাউজারটিও যোগ দেওয়ায় এটি Baseline Newly available. পুরোনো ব্রাউজারে লাইনটা উপেক্ষিত হয়, তাই নিরাপদ। মডাল খুলে পেছনের স্ক্রল বন্ধ করলে পুরো পাতা পাশে লাফানোর চেনা সমস্যার পরিষ্কার সমাধান html { scrollbar-gutter: stable; }.

overflow-x, overflow-y আর একটি অবাক করা নিয়ম

দুই দিক আলাদা করেও বলা যায়: overflow-x আর overflow-y, বা shorthand-এ overflow: hidden auto (প্রথমটি x). কিন্তু একটি নিয়ম প্রায় সবাইকে বিপদে ফেলে: এক দিক visible আর অন্য দিক hidden, scroll বা auto হলে, ব্রাউজার visible-কে auto বানিয়ে দেয়। তাই “অনুভূমিক দিকে স্ক্রল, কিন্তু dropdown নিচে বাইরে বেরোক” — এমন বাক্স overflow দিয়ে হয় না; scroll container দুই দিকেই scroll container. (clip আর visible-এর জোড়া ব্যতিক্রম।)

এক লাইনে “…” আর কয়েক লাইনে কাটা

অনলাইন দোকানের পণ্যের তালিকায় লম্বা নামগুলো সব কার্ডে সমান জায়গা নিক, বাকিটা “…” দিয়ে বোঝানো হোক — এটি খুব প্রচলিত চাহিদা। এক লাইনের জন্য text-overflow: ellipsis একা কাজ করে না; তিনটি লাইন একসাথে লাগে। আর কয়েক লাইনের জন্য আছে line-clamp:

p {
  width: 260px;
  padding: 0 6px;
  border: 1px solid #cbd5e1;
  font: 16px/1.5 sans-serif;
}
.one {
  white-space: nowrap;      /* ১. লাইন ভাঙবে না */
  overflow: hidden;         /* ২. বাইরের অংশ কাটা */
  text-overflow: ellipsis;  /* ৩. কাটার জায়গায় … */
}
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;    /* ৩ বা ৪ করে দেখুন */
  overflow: hidden;
}

৮ · viewport আর writing-mode — পাতার জানালা আর লেখার দিক

দুই রকম viewport

সবচেয়ে বাইরের বাক্স ব্রাউজারের জানালা — viewport (পুরো গল্প পর্ব ৩০-এ)। ফোনে চিমটি কেটে (pinch zoom) বড় করলে লেআউট বদলায় না — শুধু চোখের সামনের জানালাটা ম্যাগনিফাইং গ্লাসের মতো ছোট একটা অংশে সরে আসে। লেআউট যে জানালার মাপে হিসাব হয়, তা layout viewport; এই মুহূর্তে চোখে যা দেখা যাচ্ছে, তা visual viewport. zoom করলে বা ফোনের কীবোর্ড উঠলে visual viewport ছোট হয়, layout viewport প্রায়ই একই থাকে। position: fixed বাক্স layout viewport ধরে বসে, তাই zoom অবস্থায় “নিচে আটকানো” বোতাম চোখের বাইরে যেতে পারে। JavaScript-এ window.visualViewport চোখে দেখা অংশের মাপ দেয়; address bar-এর জন্য তৈরি svh, lvh, dvh একক পর্ব ২০-এ দেখেছেন।

writing-mode — block অক্ষ আর inline অক্ষ

অংশ ১-এ বলেছিলাম, normal flow-এর নিয়ম আসলে দিক নয়, লেখার প্রবাহ দিয়ে বলা। এবার সেটা কাজে লাগাই। CSS দুটি অক্ষ ধরে ভাবে — inline অক্ষ: একটি লাইনের ভেতরে শব্দ যেদিকে চলে; আর block অক্ষ: নতুন লাইন বা নতুন block যেদিকে জমা হয়। বাংলায় inline অক্ষ বাঁ থেকে ডানে, block অক্ষ ওপর থেকে নিচে। writing-mode এই অক্ষগুলো ঘুরিয়ে দেয়:

• horizontal-tb — ডিফল্ট; লাইন অনুভূমিক, block জমে ওপর থেকে নিচে (tb = top to bottom).
• vertical-rl — লাইন খাড়া, ওপর থেকে নিচে; লাইনগুলো জমে ডান থেকে বাঁয়ে। প্রচলিত জাপানি ও চীনা বইয়ের ধরন।
• vertical-lr — লাইন খাড়া, কিন্তু জমে বাঁ থেকে ডানে। ঐতিহ্যবাহী মঙ্গোলীয় লিপি এভাবে লেখা হয়।

বাংলা কখনো খাড়া লেখা হয় না, তবু নকশায় কাজে লাগে — দোকানের খাড়া সাইনবোর্ডের মতো ব্যানার, টেবিলের সরু কলামের শিরোনাম, বইয়ের পিঠের নাম। নিচে একই সাইনবোর্ড দুইবার, দ্বিতীয়টি খাড়া। সাইনবোর্ডের CSS-এ ইচ্ছা করেই width/height নয়, inline-size আর padding-inline-এর মতো logical property ব্যবহার হয়েছে:

.sign {
  display: inline-block;
  vertical-align: top;
  inline-size: 170px;            /* লাইনের দিকের মাপ */
  padding-block: 8px;            /* block দিকের দুই পাশে */
  padding-inline: 16px;          /* inline দিকের দুই পাশে */
  border: 3px solid #166534;
  border-inline-start-width: 14px; /* লেখা শুরুর দিকে মোটা দাগ */
  margin: 8px;
  background: #dcfce7;
  font: 700 22px sans-serif;
}
.v { writing-mode: vertical-rl; }

এই অক্ষের ভাবনা জরুরি, কারণ Flexbox, Grid আর logical property — সবাই “বাঁ-ডান” নয়, inline-block অক্ষে কথা বলে। flex-direction: row মানে “inline অক্ষ বরাবর”, তাই আরবি পাতায় নিজে থেকেই ডান থেকে বাঁয়ে চলে। Logical property-র পুরো তালিকা পর্ব ৩৫-এ।

৯ · DevTools-এ লেআউট পড়া — badge, Layout প্যানেল আর Computed

লেআউটের বাগ খুঁজতে অনুমানের চেয়ে DevTools অনেক দ্রুত। Chrome, Edge আর Firefox — তিনটিতেই লেআউট দেখার বিশেষ সুবিধা আছে। নিচের চার ধাপ যেকোনো পাতায় কাজ করে:

১০ · AI-এর যুগে — লেআউটের কাজ AI-কে দিলে কী দেখবেন

“দুই কলামের পাতা বানিয়ে দাও” বা “লম্বা নামে … দেখাও” — AI কয়েক সেকেন্ডে কোড দেয়, প্রথম দেখায় ঠিকও লাগে। কিন্তু AI শিখেছে দুই দশকের কোড থেকে, যার বড় অংশ float-clearfix যুগের। আর “চোখে ঠিক দেখাচ্ছে” আর “সবার জন্য ঠিক কাজ করছে”-র মধ্যে AI প্রায়ই প্রথমটাতেই থামে।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া লেআউট হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এর device toolbar-এ ৩২০px চওড়ায় দেখেছি — পাশে কোনো স্ক্রল নেই, আর Firefox-এ কোনো overflow badge নেই
• লেখা তিন গুণ লম্বা করে আর ব্রাউজারে ২০০% zoom করে দেখেছি — জরুরি কিছু কাটা পড়েনি, সব পড়া যায়
• শুধু Tab চেপে পুরো অংশে ঘুরেছি — লুকানো কোনো লিংক বা বোতামে focus যায়নি, আর দৃশ্যমান সবকিছুতে গেছে
• কোডে float, clearfix, overflow-x: hidden, display: contents বা opacity: 0 থাকলে প্রতিটির কারণ যাচাই করেছি
• HTML validator.w3.org-এ পরীক্ষা করেছি, Lighthouse-এর অ্যাক্সেসিবিলিটি রিপোর্ট চালিয়েছি, আর অচেনা property পেলে MDN আর Can I use-এ Baseline অবস্থা দেখেছি