গুগল ক্রোম মুদ্রণ পৃষ্ঠা বিরতি

110

আমি পৃষ্ঠা বিরতিতে গুগল ক্রোম পাওয়ার চেষ্টা করছি।

page-break-after: always;ক্রোমের ক্ষেত্রে বৈধ এমন একগুচ্ছ ওয়েবসাইটের মাধ্যমে আমাকে বলা হয়েছে তবে খুব সাধারণ উদাহরণ দিয়েও আমি এটি কাজ করতে পারি বলে মনে হয় না। ক্রোমে মুদ্রণের সময় কোনও পৃষ্ঠা বিরতিতে বাধ্য করার কোনও উপায় আছে?

css  printing  google-chrome 
— মাইক ভালস্টার
সূত্র
দেখা যাচ্ছে যে এটি অপেক্ষাকৃত সম্প্রতি (ফেব্রুয়ারী ২০১৪) ওয়েবকিট বাগ ট্র্যাকার বাগগুলিতে
— অ্যালেক্স কীস্মিত

উত্তর:

134

আমি ক্রোম সহ সমস্ত বড় ব্রাউজারগুলিতে সফলভাবে নিম্নলিখিত পদ্ধতিটি ব্যবহার করেছি:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

এটি একটি সরল উদাহরণ। আসল কোডে, প্রতিটি পৃষ্ঠায় ডিভ আরও অনেক উপাদান রয়েছে।

— ফিল রস
সূত্র
4
আহ আমি আমার সমস্যা দেখি মনে হয়। আমি এটি একটি <br/> ট্যাগ দিয়ে ব্যবহার করার চেষ্টা করছিলাম
— মাইক ভালস্টার
@ মাইক আমার জন্য সমস্যার উত্তর দেওয়ার জন্য ধন্যবাদ। কেন একটি বিআর কাজ করে না এবং একটি ডিভ কাজ করে না তা নিশ্চিত নয় তবে তবুও একটি সহজ পরিবর্তন।
— জেফ ডেভিস
আপনি যখন প্যারেন্ট পৃষ্ঠার সাথে ব্যবহার করার চেষ্টা করবেন তখন এটি কাজ করে, তবে আপনি যদি আইফ্রেমে (ক্রোমে অবশ্যই) মুদ্রণ করেন তখন কাজ করে না।
— ভিজে
নীচে @ পিটারের উত্তরও পড়ুন; তিনি সম্পর্কে একটি ভাল পয়েন্ট ছিলposition: relative ।
— two1ejack
6
অনুমান অনুসারে break-afterএবং break-beforeশুধুমাত্র এগুলি প্রয়োগ করুন block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - এর অর্থ কোনও ফ্লোট বা কোনও অভিনব অবস্থানের কৌশল নয়।
— মিক্কো রেন্টালাইনেন
34

প্রকৃতপক্ষে যে উত্তরটি গৃহীত হিসাবে বেছে নেওয়া হয়েছে (ফিল রস থেকে) থেকে একটি বিবরণ অনুপস্থিত ...

এটা শুরু করে Chrome এ কাজ, এবং সমাধান সত্যিই নিরীহ !!

যে পৃষ্ঠায় আপনি বিরতি নিয়ন্ত্রণ করতে চান সেই অভিভাবক এবং উপাদান উভয়কেই এই হিসাবে ঘোষণা করতে হবে:

position: relative

এই ঝাঁকুনিটি দেখুন: http://jsfiddle.net/petersphilo/QCvA5/5/show/

এটি সত্য:

page-break-before
page-break-after
page-break-inside

তবে সাফারিতে পৃষ্ঠা-বিরতি নিয়ন্ত্রণ করা কাজ করে না (কমপক্ষে 5.1.7 এ)

আশা করি এটা কাজে লাগবে!!!

পিএস: নীচের প্রশ্নটি সত্যটি তুলে ধরেছে যে ক্রোমের সাম্প্রতিক সংস্করণগুলি এটিকে আর সম্মান করে না, এমনকি অবস্থানের সাথেও: আপেক্ষিক; রত। তবে, তারা শ্রদ্ধার বলে মনে হচ্ছে:

-webkit-region-break-inside: avoid;

এই ঝাঁকুনি দেখুন: http://jsfiddle.net/petersphilo/QCvA5/23/ শো

সুতরাং আমার ধারণা এখন আমাদের এটি যোগ করতে হবে ...

আশাকরি এটা সাহায্য করবে!

— পিটার
সূত্র
এটি ChromeK এ কাজ করে বা না হলে ব্যবহৃত ওয়েবকিট সংস্করণের উপর নির্ভর করে। আপনি নিজেই বলেছিলেন এটি সাফারি 5.1.7 এ কাজ করে না, তাই আমি এটি মোটেও মূর্খ মনে করি না। তারা যা পরীক্ষা করেছিল তাতে ডব্লিউ কে এর সংস্করণ আপনি যা যা পরীক্ষা করেছিলেন তার থেকে আলাদা হতে পারে।
— জোয়েল পেল্টেন
এই পৃষ্ঠাটি ক্রোম 26.0.1410.65 এ কাজ করে না, আমি 3 পৃষ্ঠা পেয়েছি এবং সর্বশেষে এটিতে কেবল একটি শব্দ রয়েছে)। আমি নিয়মের যে উপাদানটি প্রয়োগ করতে চাইছি এবং তার পিতামাতার উভয়েরই অবস্থান রয়েছে তা নিশ্চিত করার চেষ্টা করেছি: আমার নিজের পৃষ্ঠায় আপেক্ষিক, তবে এটি মুদ্রণের সময় পৃষ্ঠা বিরতি যুক্ত করবে না। তাহলে কি এটি এমন একটি বৈশিষ্ট্য যা ক্রোমে আসে এবং যায়?
— জো ডিনডালে
আপনি ঠিক বলেছেন .... এটি ক্রোমের সাম্প্রতিক সংস্করণগুলিতে কাজ করবে বলে মনে হচ্ছে না; তবে, আপনি এটিকে প্রতিস্থাপন করতে পারেন: -webkit- অঞ্চল-বিরতি ভিতরে: এড়ান; (এটি দেখুন: jsfiddle.net/QCvA5/22/show )
— পিটার
@ পিটার এখানে কোন আপডেট আছে? আমি অনুগ্রহ করে একটি এসও প্রশ্ন পোস্ট করেছি যাতে আমি যে পরিস্থিতি ব্যবহার করছি তা ঠিক করার চেষ্টা করছি page-break-inside। কোন সাহায্য?
— Zach Sauceer
1
এটি আমার পক্ষে একটি বিজোড়তার সাথে কাজ করেছে - এটি কেবল তখনই কাজ করে যদি আমি স্টাইলটি ইনলাইন রাখি, এবং পৃথক সিএসএস ফাইলে না not আমি এটি একটি h7 উপাদান ব্যবহার করছি। ক্রোম সংস্করণ 38.0.2125.111 মি। <h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>
— গ্যাভিন সিম্পসন
16

আমি কেবল এখানে এখানে নোট করতে চেয়েছিলাম যে ক্রোম এছাড়াও ভাসমান ডিভগুলিতে পৃষ্ঠা-ব্রেক- * সিএসএস সেটিংস উপেক্ষা করে।

আমি সন্দেহ করি যে এটি কোথাও সিএসএস স্পেকে এর পক্ষে যথাযথ ন্যায়সঙ্গততা রয়েছে, তবে আমি অনুভব করেছি যে এটি কারওর কোনও দিন সাহায্য করতে পারে ;-)

অন্য একটি নোট: আই 7 পূর্ববর্তী ব্লক উপাদানের উপর সুস্পষ্ট উচ্চতা ছাড়াই পৃষ্ঠা বিরতি সেটিংস স্বীকার করতে পারে না:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

— fordareh
সূত্র
2
সম্ভবত কারণ ভাসমান কোনও উপাদান ডকুমেন্ট প্রবাহের বাইরে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে সঠিকভাবে ছাড়িয়ে নিতে পারে না। অবস্থান সহ উপাদানসমূহ: পরম পৃষ্ঠা-বিরতি- * দিয়ে কাজ করবে না।
— জো ডিনডালে
1
এছাড়াও: পৃষ্ঠা বিরতি শৈলীর সাথে উপাদানটির সমস্ত পিতামাতার মধ্যে কোনও ভাসমান বা পরম অবস্থানযুক্ত উপাদান থাকা উচিত নয়। আমার "কল-এক্সএস -12" পিতামাতার বুটস্ট্র্যাপ ছিল, যখন আমি স্পষ্টভাবে "ফ্লোট: কিছুই নেই" সেট করি, পৃষ্ঠা বিরতি কাজ শুরু করে!
— স্টালিনকো
12

আমার এর মতো একটি সমস্যা ছিল তবে আমি শেষ পর্যন্ত সমাধানটি পেয়েছি। আমার ওভারফ্লো-এক্স ছিল: লুকানো; <html> ট্যাগটিতে প্রয়োগ করা হয়েছে তাই আমি নীচে ডিওমে যা করলাম তা বিবেচনা করুন না, এটি কখনও পৃষ্ঠা বিচ্ছেদ হতে দেয় না। ওভারফ্লো-এক্স-এ ফিরে যাওয়া : দৃশ্যমান; এটা ভাল কাজ করে।

আশা করি এটি কারও পক্ষে সহায়তা করবে।

— davidbehan
সূত্র
মনে রাখবেন যে নির্দিষ্ট ওভারফ্লো বৈশিষ্ট্যযুক্ত কোনও প্যারেন্ট উপাদান এই সমস্যার কারণ হতে পারে। আমি সবেমাত্র নিয়ম যুক্ত করেছি * { overflow-x: visible }।
— গ্যারেট
10

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

স্পষ্টতই ক্রোম পৃষ্ঠ-বিরতি-পূর্বে বা পৃষ্ঠা-বিরতি-পরবর্তী বৈশিষ্ট্যগুলি সারণী কোষের অভ্যন্তরে সম্মান করে না, সুতরাং ফিলের উদাহরণের এই পরিবর্তিত সংস্করণটি একই পৃষ্ঠায় দ্বিতীয় এবং তৃতীয় শিরোনামটি রাখে:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>

    <table>
    <tr>
        <td>
            <div class="page">
              <h1>This is Page 2</h1>
            </div>
            <div class="page">
              <h1>This is, sadly, still Page 2</h1>
            </div>
        </td>
    </tr>
    </table>
  </body>
</html>

সিএসএসের নির্দিষ্টকরণের ভিত্তিতে ক্রোমের বাস্তবায়ন (সন্দেহজনকভাবে) অনুমোদিত - আপনি এখানে আরও দেখতে পারেন: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

— নেট কুক
সূত্র
এটি আমার সমস্যা ছিল - শেয়ারপয়েন্ট 2007 দ্বারা লেআউটটির জন্য টেবিল সেলগুলি ব্যবহার করতে বাধ্য করা হয়েছিল, তাই ক্রোম কোনও মুদ্রণ শৈলীর শীট বিন্যাসের ঘোষণা মানছিল :(
— ডেক্সটার
8

সিএসএস থেকে সাবধান থাকুন: display:inline-blockমুদ্রণ করার সময়।

আমার টেবিলটি শৈলীর সাথে একটি ডিভের ভিতরে থাকলে পরের পৃষ্ঠায় যাওয়ার কোনও সিসিএস সম্পত্তি আমার জন্য ক্রোম এবং ফায়ারফক্সে কাজ করবে না display:inline-block

উদাহরণস্বরূপ, নিম্নলিখিতগুলি কাজ করে না:

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

তবে নিম্নলিখিত কাজগুলি:

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>
— Gudradain
সূত্র
1
এবং পাশাপাশি "ভাসা"। প্যারেন্ট উপাদানগুলিতে কোনও "ফ্লোট" বৈশিষ্ট্য থাকা উচিত নয়।
— জিম্বা তামাং
2
একই সাথেdisplay: flex
— মাইকেল শ্মিড
4

আমি ক্রোমে আগে এই সমস্যার মুখোমুখি হয়েছিলাম এবং এর কারণটি হ'ল এখানে একটি ডিভের মান ন্যূনতম-উচ্চতা নির্ধারণ করা হয়েছিল। সমাধানটি নিম্নরূপটি মুদ্রণের সময় ন্যূনতম উচ্চতা পুনরায় সেট করা ছিল:

@media print {
    .wizard-content{
        min-height: 0;
    }
}
— হামি আহমেদ
সূত্র
3

২০১ update আপডেট:

ঠিক আছে, আমি যখন এই সমস্যাটি পেয়েছিলাম 

overflow:hidden

আমার ডিভ উপর

আমি তৈরি করার পরে

@media print {
   div {
      overflow:initial !important
   }
}

সবকিছু ঠিক এবং নিখুঁত হয়ে ওঠে

— x0 জেড 1
সূত্র
1
অন্য কোনও কিছুই না করলে এটি সমস্যার সমাধান করে। ধন্যবাদ!
— bstory
1

আপনি যদি বুটস্ট্র্যাপ সিএসএস সহ ক্রোম ব্যবহার করেন তবে গ্রিড লেআউটটি নিয়ন্ত্রণ করে এমন ক্লাসগুলি যেমন কল-এক্সএস -12 ইত্যাদি "ফ্লোট: বাম" ব্যবহার করেন যা অন্যরা উল্লেখ করেছে, পৃষ্ঠাটি নষ্ট হয়ে গেছে। মুদ্রণের জন্য আপনার পৃষ্ঠা থেকে এগুলি সরান। এটা আমার জন্য কাজ করে। (ক্রোম সংস্করণে = 49.0.2623.87)

— অ্যাস্ট্রা বিয়ার
সূত্র
0

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

    width:100%

আর ব্যবহার করুন 

div.page
  {
    page-break-before: always;
    page-break-inside: avoid;
  }

এটি প্রথম লাইনে ব্যবহার করুন।

— Intey
সূত্র
0

যতদূর আমি জানি গুগল ক্রোমের সাথে টেবিলগুলিতে সঠিক পৃষ্ঠাটি বিভক্ত হওয়ার একমাত্র উপায় এটি <tr>সেই বৈশিষ্ট্যটিকে সম্পত্তি প্রদর্শন করছে: ইনলাইন-টেবিল (বা প্রদর্শন: ইনলাইন-ব্লক তবে এটি টেবিল নয় এমন ক্ষেত্রে আরও ভাল ফিট করে fits )। "পৃষ্ঠা-বিরতি-পরে: সর্বদা; পৃষ্ঠা-বিরতি ভিতরে: এড়ান;" বৈশিষ্ট্যগুলিও ব্যবহার করা উচিত @ ফিল রস দ্বারা লিখিত হিসাবে

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>
— Codekraft
সূত্র
1
এই টিডিএসের অভ্যন্তরে মার্জিন / প্যাডিং না ভাঙার কোনও ইঙ্গিত?
— জোফোরকার
@ জোফোরকার আপনাকে "প্যাডিং: 0; মার্জিন: 0;" সহ <tr> ব্যবহার করা উচিত এবং এর মধ্যে থাকা উপাদানগুলিকে মার্জিন বৈশিষ্ট্যগুলি দিন।
— কোডক্রাফট
-2

আমি যখন প্যাডিং ব্যবহার করতাম তখন এটি আমার জন্য কাজ করে:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>
— টুভিয়া খুসিদ
সূত্র
এটি কেবল প্যাডিংয়ের কারণে কাজ করেছিল এবং পৃষ্ঠা-বিরতির কারণে নয়
— চার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.