মুদ্রণের সময় কীভাবে অতিরিক্ত ফাঁকা পাতা এড়ানো যায়?

Question 1

আমি একটি সিএসএস সম্পত্তি ব্যবহার করছি,

যদি আমি page-break-after: always;=> ব্যবহার করি তবে এটি আগে একটি অতিরিক্ত ফাঁকা পৃষ্ঠা মুদ্রণ করে

যদি আমি page-break-before: always;=> ব্যবহার করি তবে এটি পরে একটি অতিরিক্ত ফাঁকা পৃষ্ঠা মুদ্রণ করে। কীভাবে এড়ানো যায়?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>

Question 2

আপনি সম্ভবত যোগ করতে পারে

.print:last-child {
     page-break-after: auto;
}

সুতরাং শেষ printউপাদানটি অতিরিক্ত পৃষ্ঠা বিরতি পাবে না।

মনে রাখবেন যে: আপনি যদি কোনও ব্রাউজারের এই ক্ষতচিহ্নটিকে লক্ষ্য করে থাকেন তবে: সর্বশেষ-শিশু নির্বাচনকারী IE8- তে সমর্থিত নয়।

Question 3

আপনি কি এই চেষ্টা করেছেন?

@media print {
    html, body {
        height: 99%;    
    }
}

Question 4

এখানে বর্ণিত সমাধান আমাকে সহায়তা করেছে ( ওয়েবআর্কাইভ লিঙ্ক )।

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

div { border: 1px solid black;}

এবং সমাধানটি হ'ল নিম্নলিখিত শৈলীগুলি যুক্ত করা:

html, body { height: auto; }

Question 5

যদি সেগুলির কোনওটি না হয় তবে এটি ব্যবহার করে দেখুন

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

এটি 100vh হয় তা নিশ্চিত করুন

Question 6

এটি আমার পক্ষে কাজ করে

.print+.print {
    page-break-before: always;
}

Question 7

আপনি যদি কেবল সিএসএস ব্যবহার করতে চান এবং পৃষ্ঠা বিরতি এড়াতে চান তবে ব্যবহার করুন

.print{
    page-break-after: avoid;

}

পেজযুক্ত মিডিয়া একবার দেখুন

আপনি পেজব্রেইকবিতো এবং পেজব্রেইকএফটারের জন্য স্ক্রিপ্টিং সমতুল্য ব্যবহার করতে পারেন, গতিরূপে তাদের মানগুলি নির্ধারণ করুন। উদাহরণস্বরূপ, আপনার দর্শকদের কাস্টম পৃষ্ঠা বিরতি জোর করার পরিবর্তে, আপনি এই optionচ্ছিক করতে একটি স্ক্রিপ্ট তৈরি করতে পারেন। এখানে আমি একটি চেকবাক্স তৈরি করব যা পৃষ্ঠাটি হেডারগুলিতে (এইচ 2) এবং প্রিন্টারের নিজস্ব বিবেচনার (ডিফল্ট) বিচ্ছিন্ন করার মধ্যে টগল করে:

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

এটি ব্যবহার করে এমন উদাহরণের জন্য এখানে ক্লিক করুন । আপনি স্ক্রিপ্টের মধ্যে H2 কে অন্য একটি ট্যাগ যেমন পি বা ডিআইভি দিয়ে প্রতিস্থাপন করতে পারেন।

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Question 8

display:noneপ্রিন্টের জন্য নয় এমন অন্যান্য উপাদানগুলির জন্য সেট করুন । সেটিং visibility:hiddenএগুলি গোপন রাখবে, তবে তারা সবাই এখনও সেখানে রয়েছে এবং তাদের জন্য জায়গা নিয়েছে। খালি পৃষ্ঠাটি সেই লুকানো উপাদানগুলির জন্য।

Question 9

কেন জানি না (এখনও হিসাবে) তবে এটি একজন সাহায্য করেছে:

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

আশা করি সমস্যার সাথে লড়াই করার সময় কেউ তার চুল বাঁচাবে ...;)

Question 10

মনে হয় অনেকগুলি সম্ভাব্য কারণ রয়েছে, সম্ভবত থিমটি বডি ট্যাগটি এমন উচ্চতার সাথে শেষ হয় যা ডাব্লু / ই কারণে খুব বেশি বিবেচিত হয়।

আমার কারণ: min-height: 100%বেস স্টাইলশিটে।

আমার সমাধান: min-height: autoএকটি @media printনির্দেশে।

দ্রষ্টব্য, autoপিএইচপিস্টর্ম অনুসারে সঠিক মান বলে মনে হচ্ছে না। তবে এটি ন্যূনতম উচ্চতায় মোজিলার ডকুমেন্টেশন অনুসারে সঠিক :

স্বয়ংক্রিয়
ফ্লেক্স আইটেমগুলির জন্য ডিফল্ট সর্বনিম্ন আকার, অন্য লেআউটের জন্য 0 এর চেয়ে বেশি যুক্তিসঙ্গত ডিফল্ট সরবরাহ করে।

Question 11

আমার অনুরূপ সমস্যা ছিল তবে কারণটি হ'ল পৃষ্ঠার নীচে আমার 40px মার্জিন ছিল, তাই শেষ পৃষ্ঠায় এটির জন্য জায়গা থাকলেও একেবারে শেষ সারিটি সর্বদা মোড়ানো হত। কোনও ধরণের page-break-*CSS কমান্ডের কারণে নয় । আমি মুদ্রণের মার্জিনটি সরিয়ে ফিক্স করেছি এবং এটি দুর্দান্ত কাজ করেছে। অন্য কারও মতো কিছু হলে কেবল আমার সমাধানটি যুক্ত করতে চেয়েছি!

Question 12

আমার ক্ষেত্রে সমস্ত ডিভগুলিতে প্রস্থ নির্ধারণে সহায়তা করেছে:

.page-content div {
    width: auto !important;
    max-width: 99%;
}

Question 13

আমি সিএসপি প্রদর্শন এবং প্রিন্ট অঞ্চলের প্রস্থের সম্পত্তি পরিবর্তন করেছি

#printArea{
    display:table;
    width:100%;
}

স্নিপেট প্রসারিত করুন

Question 14

বিভিন্ন পৃষ্ঠা-বিরতি সেটিংস এবং উচ্চতা এবং বডি ট্যাগে এক মিলিয়ন বিভিন্ন সিএসএস বিধি নিয়ে লড়াই করার পরে অবশেষে আমি এক বছর পরে এটি সমাধান করেছি।

আমার একটি ডিভ রয়েছে যা পৃষ্ঠায় একমাত্র জিনিস যা প্রিন্ট করে তা হ'ল, তবে এর পরে আমি বেশ কয়েকটি ফাঁকা পৃষ্ঠা পাচ্ছি। আমার বডি ট্যাগ সেট করা আছে visibility:hidden;তবে এটি পর্যাপ্ত ছিল না। উল্লম্বভাবে লম্বা পৃষ্ঠ উপাদানগুলি এখনও 'স্থান' গ্রহণ করে। সুতরাং আমি এটি আমার মুদ্রণের সিএসএস বিধিগুলিতে যুক্ত করেছি:

#header, #menu, #sidebar{ height:1px; display:none;}

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

Question 15

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

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

আপনি দস্তাবেজের উপর বডি ক্লাস = "মুদ্রণ" দেবেন এবং এটি মুদ্রণ শৈলীর সক্ষম করে। এই সিস্টেমটি মুদ্রণ শৈলীগুলি এবং ইন-ব্রাউজার মুদ্রণ পূর্বরূপের জন্য মডুলারিকরণের অনুমতি দেয়।

Question 16

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

এটি আমার পক্ষে কাজ করেছে।

Question 17

সিএসএস ফাইল প্রসারিত করতে এই CSS কে একই পৃষ্ঠায় যুক্ত করুন।

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>

Question 18

আমি সমস্ত সমাধান চেষ্টা করেছিলাম, এটি আমার পক্ষে কাজ করে:

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>

Question 19

আমি কেবল একটি মামলার মুখোমুখি হয়েছি যেখানে থেকে পরিবর্তন হচ্ছে changing

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

প্রতি

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

এই সমস্যা স্থির।

Question 20

আশ্চর্যজনকভাবে একটি স্বচ্ছ সীমানা সেট করা আমার জন্য এটি সমাধান করেছে:

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

সম্ভবত ধারক উপাদানটিতে সীমানা সেট করা যথেষ্ট হবে। <- আনস্টেট

Question 21

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

মিঃ মিঃ কেউ প্রিন্ট করেছেন

আমি আগের "কপিরাইট রাইটস" পাদলেখের পরিবর্তে সেই পাঠ্যটি রাখার জন্য jquery ব্যবহার করেছি

$("footer").html("Printed by Mr. Someone");

এবং থিমটিতে ডিফল্টরূপে ট্যাগ ফুটার ক্লাস। মেইন-ফুটার ব্যবহার করে যার বৈশিষ্ট্যগুলি রয়েছে

padding: 15px;
border-top: 1px solid

এটি একটি অতিরিক্ত সাদা স্থান তৈরি করেছিল, সুতরাং সমস্যাটি জানার পরে আমার কাছে বিভিন্ন বিকল্প ছিল এবং সর্বোত্তম বিকল্পটি ছিল ব্যবহার করা

$( "footer" ).removeClass( "main-footer" );

ঠিক সেই নির্দিষ্ট পৃষ্ঠায়

Question 22

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

Question 23

নীচের অংশে এইচটিএমএল ট্যাগের পরে কোনও সাদা জায়গা আছে কিনা তা পরীক্ষা করে দেখুন। নীচে যে কোনও শ্বেত স্থানটি আমাকে সহায়তা করেছে তা সরান

Question 24

প্রথমে আপনার ব্রাউজারের দেবতুলগুলির মাধ্যমে মুদ্রণের স্টাইলশিটটি অনুকরণ করুন। নির্দেশাবলী এখানে পাওয়া যাবে ।

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