সিএসএস এ 4 পেপারের আকার সেট করতে

Question

আমার ওয়েবে একটি A4 কাগজ সিমুলেট করা দরকার এবং ব্রাউজারে প্রদর্শিত হিসাবে এটি এই পৃষ্ঠাটি মুদ্রণের অনুমতি দেয় (ক্রোম, বিশেষত)। আমি উপাদানটির আকারটি 21 সেমি x 29.7 সেমিতে সেট করেছি তবে যখন আমি প্রিন্ট করতে প্রেরণ করি (বা মুদ্রণ পূর্বরূপ) এটি আমার পৃষ্ঠাটি ক্লিপ করে।

এই লাইভ উদাহরণ দেখুন !

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 256mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<div class="book">
  <div class="page">
    <div class="subpage">Page 1/2</div>
  </div>
  <div class="page">
    <div class="subpage">Page 2/2</div>
  </div>
</div>

আমি মনে করি আমি কিছু ভুলে যাচ্ছি তবে কী হবে?

• ক্রোম : ক্লিপিং পৃষ্ঠা, ডাবল পৃষ্ঠা ( এটি কাজ করার জন্য এটি কেবল আমার প্রয়োজন )
• ফায়ারফক্স : এটি পুরোপুরি কাজ করে।
• আইই 10 : বিশ্বাস করুন বা না করুন, এটি নিখুঁত!
• অপেরা : প্রিন্ট পূর্বরূপে খুব বগি

Comments

টেম্পলেটটির জন্য ধন্যবাদ, এটি দুর্দান্ত।

— ভেক্টর

: সঠিক উত্তরটি এখানে stackoverflow.com/a/34018790/293856

— unom

এর সম্ভাব্য দ্বিগুণ: স্ট্যাকওভারফ্লো.com

— মার্ক বোল্ডার

এ সম্পর্কে বাগ রিপোর্ট

— ইউজেন কনকভ

Answer 1

আমি এটি আরও কিছুটা লক্ষ্য করেছি এবং মিডিয়া নিয়মের অধীনে initialপৃষ্ঠাটি বরাদ্দ করার ক্ষেত্রে আসল সমস্যাটি দেখা যাচ্ছে । এটা তোলে Chrome এ মত মনে হয় উপর উপাদান ফলাফল স্কেলিং পৃষ্ঠা বিষয়বস্তুর যদি কোন নির্দিষ্ট দৈর্ঘ্য মান সংজ্ঞায়িত করা হয় (পিতা বা মাতা উপাদানের কোনো এই ক্ষেত্রে সমাধান মধ্যেwidthprintwidth: initial.pagewidthwidth: initialwidth: auto ... কিন্তু আসলে কোনো মান আকার অধীনে সংজ্ঞায়িত চেয়ে ছোট @pageনিয়ম একই সমস্যার কারণ)।

সুতরাং কেবল পৃষ্ঠাগুলি এখন প্রায় দীর্ঘ নয় (প্রায় দ্বারা 2cm), তবে পৃষ্ঠাগুলি প্রারম্ভিক 2cmএবং এর চেয়ে কিছুটা বেশি হবে (এটি সামগ্রীর width: autoপ্রস্থের নিচে সামগ্রীগুলি রেন্ডার করে ~196mmএবং তারপরে পুরো সামগ্রীর স্কেল করে বলে মনে হচ্ছে প্রস্থ পর্যন্ত 210mm~ তবে আশ্চর্যের বিষয় হ'ল একই স্কেলিং ফ্যাক্টর এর চেয়ে ছোট কোনও প্রস্থের সামগ্রীগুলিতে প্রয়োগ করা হয় 210mm)।

এই সমস্যাটি সমাধান করার জন্য আপনি কেবল printমিডিয়া নিয়মে এ 4 কাগজের প্রস্থ এবং এইচাইটে html, bodyসরাসরি বা সরাসরি .pageএই initialশব্দটি এড়াতে পারেন assign

ডেমো

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

^{এটি আপনার মূল সিএসএসে অন্য যেভাবে রয়েছে সেভাবে রাখবে এবং ক্রোমে সমস্যাটি সমাধান করতে পারে (উইন্ডোজ, ওএস এক্স এবং উবুন্টুর অধীনে ক্রোমের বিভিন্ন সংস্করণে পরীক্ষিত)।}

Comments

আপনি উপাদানটির 256mm(এবং এভাবে 237mmশেষ পর্যন্ত) কীভাবে পৌঁছেছেন .subpage?

— কাও

@MarcoW। আমি বিশ্বাস করি যে ওপিস 256mmপৃষ্ঠার প্যাডিং ছাড়াই A4 কাগজের উচ্চতার চেয়ে কিছুটা গোল হয়ে গেছে: 297mm - 2*20mm... সম্ভবত 257mmএটি আরও কিছুটা সুস্পষ্ট হতে পারে ;-) এবং আমার আগের উদাহরণটিতে "খুব দীর্ঘ" বিষয়বস্তুর 237mmজন্য দায়ী ~2cm... তবে কেবলমাত্র অতিমাত্রায় সমাধান করা হয়েছে সমস্যাটি. প্রকৃত সমাধানের জন্য উপরের আমার আপডেট হওয়া উত্তরটি দেখুন।

— মার্টিন তুরজাক

আরে @ মার্টিনতুর্জাক, কারও আগ্রহের ক্ষেত্রে আমি আপনার আমেরিকান লেটার সংস্করণে আপনার ফিডালটি টুইট করেছি। jsfiddle.net/2wk6Q/2957 চিয়ার্স!

— বেন

সমস্ত ক্ষেত্রের সমান আকার বিভাজন করতে কিভাবে একটি পৃষ্ঠা মুদ্রণ করার জন্য আমার 4 টি ক্ষেত্র রয়েছে .. pxl এ মুদ্রণ পৃষ্ঠার আকার কী

— বিক্রম

@ ব্র্যাড: আমার পক্ষে কাজ করেনি। এখনও প্রতিটি পৃষ্ঠার মাঝে ফাঁকা পৃষ্ঠা তৈরি করা হচ্ছে।

— সেবাস্তিয়ান ফরহাম

Answer 2

সিএসএস

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

এইচটিএমএল

<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>

ডেমো

Comments

পার্শ্ব দ্রষ্টব্য: <page>কোনও বৈধ কাস্টম এইচটিএমএল উপাদান নাম নয়

— মার্টিন স্নাইডার

কাজ মনে হচ্ছে। কিন্তু box-shadow: 0;কাজ করে না (অন্তত ক্রোমে), এটি হওয়া উচিত box-shadow: none;। দুটি মার্জিন ঘোষণাও একত্রিত হতে পারে margin: 0 auto 0.5cm;।

— এমটিএস

Answer 3

https://github.com/cognitom/paper-css আমার সমস্ত চাহিদা সমাধান করে বলে মনে হচ্ছে।

খুশি মুদ্রণের জন্য পেপার সিএসএস

ফ্রন্ট-এন্ড মুদ্রণ সমাধান - প্রাকদর্শনযোগ্য এবং লাইভ-পুনরায় লোডযোগ্য!