আমি কি এইচটিএমএল প্রিন্টিংয়ে একটি পৃষ্ঠা বিরতিতে বাধ্য করতে পারি?

Question

আমি একটি HTML প্রতিবেদন তৈরি করছি যা মুদ্রণযোগ্য হতে চলেছে, এবং এর "বিভাগগুলি" রয়েছে যা একটি নতুন পৃষ্ঠাতে শুরু করা উচিত।

এইচটিএমএল / সিএসএসে এমন কোনও উপায়ে রাখার কি কোনও উপায় রয়েছে যা ব্রাউজারকে সিগন্যাল করবে যে সেই মুহুর্তে একটি পৃষ্ঠা বিরতি (নতুন পৃষ্ঠা শুরু করা) দরকার?

ওখানকার প্রতিটি ব্রাউজারে কাজ করার জন্য আমার এটির দরকার নেই, আমি মনে করি এটি মুদ্রণের জন্য আমি লোকেদের ব্রাউজারগুলির একটি নির্দিষ্ট সেট ব্যবহার করতে বলতে পারি।

Answer 1

"পেজব্রেক" (বা "পিবি") নামে একটি সিএসএস ক্লাস যুক্ত করুন, এর মতো:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

তারপরে একটি খালি ডিআইভি ট্যাগ যুক্ত করুন ( বা কোনও ব্লক উপাদান যা একটি বক্স তৈরি করে ) যেখানে আপনি পৃষ্ঠাটি বিরতিতে চান।

<div class="pagebreak"> </div>

এটি পৃষ্ঠায় প্রদর্শিত হবে না, তবে মুদ্রণের সময় পৃষ্ঠাটি ছিন্ন হয়ে যাবে।

পিএস সম্ভবত এটি ব্যবহার করার সময় কেবলমাত্র প্রযোজ্য হবে -after(এবং এছাড়াও আপনি <div>পৃষ্ঠাতে অন্যান্য গুলি ব্যবহার করে কী করতে পারেন ) তবে আমি দেখতে পেয়েছি যে আমাকে সিএসএসের ক্লাসটি নিম্নরূপে বৃদ্ধি করতে হয়েছিল:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

Comments

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

— জো

এমডিএন অনুসারে, page-break-after"একটি বাক্স তৈরি করে এমন উপাদানগুলিকে ব্লক করার জন্য প্রয়োগ করা হয়," তাই খালি <span>উপাদান ব্যবহার করা কার্যকর হবে না। এটি আপনার সামগ্রীর অংশে প্রয়োগ করা আরও ভাল ধারণা। বিকাশকারী.মোজিলা.আর.এন.এন.ইউএস

— ডকস

@ নুলাব্যতা: ভাল ক্যাচ আমি উইনফর্মগুলির একটি ওয়েব ব্রাউজার নিয়ন্ত্রণে আমার পুরানো চাকরিতে প্রধানত এটি ব্যবহার করেছি যা নীচের মানগুলির স্বর্ণের মানক IE ব্যবহার করে।

— ক্রিস ডগগেট

এটি ক্রোমে আমার পক্ষে কাজ করেনি ... আমি <t>> <t>> এর ভিতরে <<> এর পরে ভিতরে একটি পেজ ব্রেক করার চেষ্টা করছি, এটি কি এই ক্ষেত্রে কাজ করবে?

— 25

কোনও কারণে, ক্রোমে এই কৌশলটি ব্যবহার করার সময়, পরবর্তী পৃষ্ঠার 1 সারি পিক্সেল পূর্ববর্তীটিতে প্রবেশ করছিল (পটভূমি-রঙ ব্যবহার করার সময় লক্ষণীয়)। আমি এটি ব্যবহার করে ঠিক করেছি.pagebreak { min-height: 1px; page-break-before: always; }

— pzmarzly

Answer 2

এই লিঙ্কটি চেষ্টা করুন

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Comments

আমি মনে করি এটি আরও ভাল উত্তর কারণ এটি কোনও ভিজ্যুয়াল এফেক্ট অর্জনের জন্য এইচটিএমএলকে ম্যাংলিং করে না।

— FinnNk

আমি আসলে অন্যটিকে আরও ভাল পছন্দ করি, কারণ এটি আমাকে আরও নিয়ন্ত্রণ দেয় control আমি সর্বদা কেবল এইচ 1 এর জন্য "পেজব্রেক" শ্রেণিকে বরাদ্দ করতে পারি যা পৃষ্ঠাটি লাফিয়ে উঠবে। তবে এটি এখনও একটি ভাল সমাধান। @ মিডিয়ার জন্য +1, যদিও স্ক্রিনের আগে পৃষ্ঠা-বিরতি-উপেক্ষা করা উচিত, আমার ধারণা। ধন্যবাদ!

— ড্যানিয়েল ম্যাগলিওলা

এইচ 1 হ'ল আপনি মুদ্রণ বিরতির জন্য ট্যাগ হিসাবে কী ব্যবহার করতে পারেন তার একটি উদাহরণ। আপনি নিজের পছন্দ মতো নামটি বদলে এবং ট্যাগ করতে পারেন। আপনি পৃষ্ঠা-বিরতি-পরেও ব্যবহার করতে পারেন: সর্বদা

— jfarrell

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

— Jukka K. Korpela

আপনি যদি প্রথম পৃষ্ঠায় প্রথম শিরোনামটি এড়াতে চান তবে চেষ্টা করুনh1:not(:first-child) { page-break-before:always; }

— জেফ আতউড

Answer 3

শুধু একটি আপডেট রাখতে চেয়েছিলেন। page-break-afterএখন একটি উত্তরাধিকার সম্পত্তি।

অফিসিয়াল পৃষ্ঠাতে বলা হয়েছে

এই সম্পত্তি বিরতি সম্পত্তি পরে প্রতিস্থাপিত হয়েছে ।

Comments

এটি লক্ষ করা উচিত যে এই সম্পত্তিটি কেবল মাইক্রোসফ্ট আইই এবং এজ ব্রাউজারগুলির দ্বারা সমর্থিত। caniuse.com/…

— বেনিয়ামিন

Answer 4

আপনি সিএসএস বৈশিষ্ট্য page-break-before(বা page-break-after) ব্যবহার করতে পারেন । শুধু সেট page-break-before: alwaysঐ ব্লক-স্তরের উপাদান (যেমন, শিরোনাম, উপর div, pবা tableউপাদানের) যে একটি নতুন লাইন শুরু করা উচিত।

উদাহরণস্বরূপ, দ্বিতীয় স্তরের শিরোনামের আগে এবং শ্রেণিতে কোনও উপাদান newpage(যেমন, <div class=newpage>...) এর আগে একটি লাইন বিরতি সৃষ্টি করতে আপনি ব্যবহার করতে পারেন

h2, .newpage { page-break-before: always }

Answer 5

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

আপনার পরের পৃষ্ঠায় যাওয়ার জন্য যেখানে পৃষ্ঠার প্রয়োজন হবে কেবল এটি যুক্ত করুন ("পৃষ্ঠা 1" পাঠ্য 1 পৃষ্ঠায় থাকবে এবং "পৃষ্ঠা 2" পাঠ্যটি দ্বিতীয় পৃষ্ঠায় থাকবে)।

Page 1
<div style='page-break-after:always'></div>
Page 2

এটিও কাজ করে:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

Answer 6

আসুন আমরা এই জাতীয় নিবন্ধ সহ একটি ব্লগ আছে:

<div class="article"> ... </div>

সিএসএসে কেবল এটি যুক্ত করা আমার পক্ষে কাজ করেছে:

@media print {
  .article { page-break-after: always; }
}

(Chrome 69 এবং ফায়ারফক্স 62 এ পরীক্ষিত এবং কাজ করা))

রেফারেন্স:

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break- after ; গুরুত্বপূর্ণ দ্রষ্টব্য: এখানে এটি বলা হয়েছে This property has been replaced by the break-after property.তবে এটি আমার পক্ষে কার্যকর হয়নি break-after। এছাড়াও এমডিএন ডকটি break-afterপৃষ্ঠা-বিরতির জন্য নির্দিষ্ট বলে মনে হয় না, তাই আমি (কাজ করা) পছন্দ করি page-break-after: always;।

Answer 7

• আমরা এই মুহুর্তে এইচটিএমএল পৃষ্ঠাতে পেজব্রেকটি প্রবর্তন করতে চাইলে " পৃষ্ঠা-বিরতি-পরে: সর্বদা " স্টাইল সহ একটি পৃষ্ঠা বিরতি ট্যাগ যুক্ত করতে পারি ।
  
• " পৃষ্ঠা-বিরতি " আগেও কাজ করে

উদাহরণ:

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

উপরের কোডটি দিয়ে এইচটিএমএল ফাইল প্রিন্ট করার সময়, মুদ্রণ পূর্বরূপটি তিনটি পৃষ্ঠা প্রদর্শন করবে (প্রতিটি এইচটিএমএল ব্লক " এইচটিএমএল_ব্লোক_এন " এর জন্য) যেখানে ব্রাউজারে তিনটি ব্লক একের পর এক ক্রমান্বয়ে প্রদর্শিত হবে।

Answer 8

ব্রাউজারে প্রিন্ট কমান্ড ব্যবহার করার সময় আমার প্রতি তৃতীয় সারির পরে একটি পৃষ্ঠা বিরতি প্রয়োজন।

আমি <div शैली = 'পৃষ্ঠা-বিরতি পূর্বে: সর্বদা;'> </ div> যোগ করেছি

প্রতি তৃতীয় সারিতে এবং আমার পিতামাতার ডিভিতে প্রদর্শন রয়েছে: নমনীয়; সুতরাং আমি প্রদর্শন সরিয়েছি: ফ্লেক্স; এবং এটি আমার ইচ্ছা মতো কাজ করছিল।

Answer 9

সিএসএস

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

এইচটিএমএল

<div class="pagebreak"></div>

Answer 10

@ ক্রিস ডগগেট নির্ভুল ধারণা তৈরি করে। যদিও, আমি lvsys.com এ একটি মজার কৌশল পেয়েছি এবং এটি প্রকৃতপক্ষে ফায়ারফক্স এবং ক্রোমে কাজ করে। আপনি পৃষ্ঠা-ব্রেকটি সন্নিবেশ করানোর জন্য যে কোনও জায়গায় এই মন্তব্যটি রেখে দিন। আপনি <p>কোনও ব্লক উপাদান দিয়ে ট্যাগটি প্রতিস্থাপন করতে পারেন ।

<p><!-- pagebreak --></p>