এইচটিএমএল থেকে ল্যান্ডস্কেপ মুদ্রণ

244

আমার একটি এইচটিএমএল প্রতিবেদন রয়েছে, যা অনেকগুলি কলামের কারণে ল্যান্ডস্কেপ মুদ্রণ করা দরকার। এটি করার কোনও উপায় নেই, ব্যবহারকারীকে নথির সেটিংস পরিবর্তন করতে না করে?

এবং ব্রাউজারগুলির মধ্যে বিকল্পগুলি কী কী।

html  css  printing 
— doekman
সূত্র

উত্তর:

379

আপনার সিএসএসে আপনি নীচের মত করে @ পৃষ্ঠার সম্পত্তি সেট করতে পারেন। 

@media print{@page {size: landscape}}

@ পৃষ্ঠাগুলি সিএসএস ২.১ স্পেসিফিকেশনের অংশ তবে এটি @ পেজ as আকার: ল্যান্ডস্কেপ so অপ্রচলিতsize প্রশ্নের উত্তর দ্বারা হাইলাইট করা হয়নি? :

সিএসএস 2.1 আর আকারের বৈশিষ্ট্য নির্দিষ্ট করে না। CSS3 পেজড মিডিয়া মডিউলটির জন্য বর্তমানের কার্যকরী খসড়া এটি নির্দিষ্ট করে (তবে এটি মানক বা স্বীকৃত নয়)।

বর্ণিত হিসাবে আকার বিকল্প সিএসএস 3 খসড়া স্পেসিফিকেশন থেকে আসে । তাত্ত্বিকভাবে এটি পৃষ্ঠার আকার এবং অভিযোজন উভয়কেই সেট করা যেতে পারে যদিও আমার নমুনায় আকারটি বাদ দেওয়া হয়েছে।

ফায়ারফক্সে দায়ের করা বাগের রিপোর্টের সাথে সমর্থনটি খুব মিশ্রিত হয় , বেশিরভাগ ব্রাউজারগুলি এটি সমর্থন করে না।

এটি আই 7-তে কাজ করে বলে মনে হতে পারে তবে এটি কারণ আই 7 ব্যবহারকারীদের প্রিন্ট পূর্বরূপে ল্যান্ডস্কেপ বা প্রতিকৃতির শেষ নির্বাচনটি মনে করবে (কেবলমাত্র ব্রাউজারটি আবার শুরু হয়েছে)।

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

পর্যায়ক্রমে আপনি পৃষ্ঠা ওরিয়েন্টেশনের পরিবর্তে সামগ্রীটি ঘোরান। এটি একটি শৈলী তৈরি করে এবং এটি দুটি লাইন অন্তর্ভুক্ত করে শরীরে এটি প্রয়োগ করেই করা যেতে পারে তবে এটি অনেকগুলি প্রান্তিককরণ এবং বিন্যাস সংক্রান্ত সমস্যা তৈরির পিছনেও আঁকতে পারে।

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

আমি যে চূড়ান্ত বিকল্পটি পেয়েছি তা হ'ল পিডিএফে ল্যান্ডস্কেপ সংস্করণ তৈরি করা। আপনি ইঙ্গিত করতে পারেন যখন ব্যবহারকারী মুদ্রণ নির্বাচন করে এটি পিডিএফ প্রিন্ট করে। তবে আমি এটি আই 7 এ অটো প্রিন্টের কাজটিতে পেতে পারি না।

<link media="print" rel="Alternate" href="print.pdf">

কিছু ব্রাউজারে উপসংহারে এটি বলা যায় যে @ পৃষ্ঠার আকার বিকল্পটি ব্যবহার করা অনেকগুলি ব্রাউজারে কোনও নিশ্চিত উপায় নেই এবং এটি আপনার সামগ্রী এবং পরিবেশের উপর নির্ভর করবে। এটি হতে পারে কেন গুগল ডকুমেন্টস মুদ্রণ নির্বাচন করার পরে একটি পিডিএফ তৈরি করে এবং তারপরে ব্যবহারকারীকে সেটি খোলার ও মুদ্রণের অনুমতি দেয়।

— জন
সূত্র
28
অদ্ভুত যে এটি বলে যে 'আকার' ল্যান্ডস্কেপ হতে পারে, যখন এটি আসলে একটি 'ওরিয়েন্টেশন'।
— ম্যাগনাস স্মিথ
1
@page sizeসমস্ত ফায়ারফক্সে সমস্ত আধুনিক ব্রাউজারে কাজ করছে বলে মনে হচ্ছে না। আমি যতটা দেখেছি ক্রোম এবং অপেরা উভয়ই এটিকে উপেক্ষা করে।
— জাস্টিন 808
2
size: landscapeহয় না , CSS2.1 অংশ যদিও @pageনিয়ম আছে। এটি অবশ্য CSS3 এর অংশ। নিশ্চিতকরণের জন্য, @page {size: landscape}
— ডাব্লু
1
আপনার যখন পৃষ্ঠার 100 প্রস্থ বা উচ্চতা দখল করে এমন একটি ডিভ থাকে, তখন ঘূর্ণনটি ডিভকে কোনও প্রতিকৃতি পৃষ্ঠার স্থান দখল করে না, তবে একটি ল্যানস্কেপ ঘোরানো হয়। সুতরাং ডিভের কিছু অংশ পৃষ্ঠার বাইরে রয়েছে।
— অলিভার
6
@AbeerSul - সিএসএস সংক্রান্ত সৎ হবে,, কি করে ইন্টারনেট কাজ;)
— টনি
27

আমার সমাধান:

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

এটি কাজ করে IE, FirefoxএবংChrome

— এদুয়ার্দো কুওমো
সূত্র
1
আমি যদি নির্দিষ্ট classপৃষ্ঠাটি পুরো পৃষ্ঠায় না হয়ে ল্যান্ডস্কেপে থাকতে চাই তবে কী হবে?
— সার্চফোরকনলজ
2
@ সন্ধান ফরোকনজ - এটি সিএস 3 এর রূপান্তর হবে: ঘোরান (90 ডিগ্রি)।
— টুলমেকারস্টেভ
আমি কী ভুল করছি বুঝতে পারিনি, তবে এটি ক্রোমে পুরো পৃষ্ঠাটি ভেঙে দেয়। এই লাইনটিই আমি @ মিডিয়া প্রিন্ট from @ পেজ {আকার: প্রতিকৃতি;} বডি {রাইটিং-মোড: টিবি-আরএল;}}
— এক্স-হুমান
আমার জন্য কেবল এই @ পেজ {আকার যুক্ত: ল্যান্ডস্কেপ; } কাজ করে।
— কুমার এম
1
2018 সালে এখনও স্ট্যান্ডার্ড ওয়েব ব্রাউজার উপাদানগুলির সাথে দুর্দান্ত কাজ করে। ধন্যবাদ।
— কেন বেকভ
14

কেবলমাত্র পৃষ্ঠার সামগ্রীটি ঘোরানোর পক্ষে এটি যথেষ্ট নয়। এখানে একটি ডান সিএসএস যা সর্বাধিক ব্রাউজারগুলিতে কাজ করে (ক্রোম, ফায়ারফক্স, আই 9 +)।

প্রথমে বডিটি margin0 তে সেট করুন , কারণ অন্যথায় পৃষ্ঠার মার্জিনগুলি প্রিন্ট কথোপকথনে আপনি সেট করেছেন তার চেয়ে বড় হবে। backgroundপৃষ্ঠাগুলি কল্পনা করতে রঙ সেট করুন ।

body {
  margin: 0;
  background: #CCCCCC;
}

margin, borderএবং backgroundপৃষ্ঠাগুলি কল্পনা করা প্রয়োজন।

paddingপ্রয়োজনীয় মুদ্রণ মার্জিনে সেট করা আবশ্যক। মুদ্রণ কথোপকথনে আপনাকে অবশ্যই একই মার্জিন সেট করতে হবে (এই উদাহরণে 10 মিমি)।

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

এ 4 পৃষ্ঠার আকার 210 মিমি x 297 মিমি। আকার থেকে আপনার মুদ্রণের মার্জিন বিয়োগ করতে হবে। এবং পৃষ্ঠার সামগ্রীর আকার নির্ধারণ করুন:

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

আমি 277 মিমির পরিবর্তে 276 মিমি ব্যবহার করি কারণ বিভিন্ন ব্রাউজারগুলি পৃষ্ঠাগুলিকে কিছুটা আলাদাভাবে স্কেল করে। সুতরাং তাদের মধ্যে দুটি পৃষ্ঠায় 277 মিমি উচ্চতার সামগ্রী প্রিন্ট করবে। দ্বিতীয় পৃষ্ঠাটি খালি থাকবে। এটি 276 মিমি ব্যবহার করা আরও নিরাপদ।

আমরা কোনো প্রয়োজন হবে না margin, border, padding, backgroundমুদ্রিত পৃষ্ঠায়, তাই তাদের সরিয়ে:

@media print {
  body {
    background: none;
    -ms-zoom: 1.665;
  }
  div.portrait, div.landscape {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
  div.landscape {
    transform: rotate(270deg) translate(-276mm, 0);
    transform-origin: 0 0;
  }
}

লক্ষ করুন যে রূপান্তরের উত্স 0 0! এছাড়াও ল্যান্ডস্কেপ পৃষ্ঠাগুলি 276 মিমি নিচে সরানো হবে!

এছাড়াও আপনার যদি প্রতিকৃতি এবং ল্যান্সকেপ পৃষ্ঠাগুলির মিশ্রণ থাকে তবে পৃষ্ঠাগুলি জুম আউট হবে। আমরা এটি -ms-zoom1.665 এ সেট করে ঠিক করেছি । আপনি যদি এটি ১.66666666 এ সেট করেন বা পৃষ্ঠার সামগ্রীর ডান সীমানাটি কখনও কখনও ক্রপ করা যেতে পারে।

আপনি IE8- প্রয়োজন অথবা অন্য পুরানো ব্রাউজারগুলি সমর্থন আপনি ব্যবহার করতে পারেন -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)। তবে আধুনিক পর্যাপ্ত ব্রাউজারগুলির জন্য এটির প্রয়োজন নেই।

এখানে একটি পরীক্ষা পৃষ্ঠা:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      ...Copy all styles here...
    </style>
  </head>
  <body>
    <div class="portrait">A portrait page</div>
    <div class="landscape">A landscape page</div>
  </body>
</html>
— ডেনিস
সূত্র
আপনাকে অনেক ধন্যবাদ, ওয়েব পৃষ্ঠাগুলির সাথে একটি মোহন (ব্যবহৃত ক্রোম) এর মতো কাজ করে যা ল্যান্ডস্কেপ এবং প্রতিকৃতি উভয় ক্ষেত্রেই মিশ্রিত করে।
— zcahfg2
Div.portrait, Div.landcreen কোথা থেকে এসেছে?
— zcahfg2
আইই 11 এ কারওর জন্য এই কাজ করেছে? দেখে মনে হচ্ছে যে সমস্ত উপাদানগুলি বিনা মূল্যে বন্ধ রয়েছে।
— মিজোনারজ
1
@ এমজনারজ আমি আইই 11 তে সবেমাত্র পরীক্ষা করেছি, এটি দুর্দান্ত কাজ করে। উত্তরের শেষে আমি একটি পরীক্ষার এইচটিএমএল যুক্ত করেছি। দয়া করে নোট করুন যে মুদ্রণ সেটিংসে আপনার পৃষ্ঠা মার্জিং 10 মিমি সেট করা উচিত। আপনার যদি অন্য পৃষ্ঠার মার্জিনের প্রয়োজন হয় তবে আপনাকে নিম্নলিখিত মানগুলি আপডেট করতে হবে: প্যাডিং: 10 মিমি; প্রস্থ: 190 মিমি; উচ্চতা: 190 মিমি;
— ডেনিস
@ ডেনিস আপনার প্রচেষ্টার জন্য আপনাকে ধন্যবাদ .. আসলে আমার পক্ষে এখন পর্যন্ত এটিই একমাত্র সমাধান কাজ করেছে..নিস !!
— মজোনারজ
13

সিএসএস-আলোচনা উইকি থেকে উদ্ধৃত

@ পৃষ্ঠার নিয়মটি CSS2 থেকে CSS2.1 এ বিস্তৃত হয়েছে। সম্পূর্ণ সিএসএস 2 @ পৃষ্ঠার নিয়মটি কেবল ওপেরাতে (এবং তবুও তুচ্ছভাবে) প্রয়োগ করা হয়েছিল। আমার নিজের পরীক্ষা থেকে দেখা যায় যে আইআই এবং ফায়ারফক্স কোনওভাবেই @ পৃষ্ঠাকে সমর্থন করে না। এখন-অপ্রচলিত সিএসএস 2 অনুচ্ছেদ অনুযায়ী 13.2.2 ব্যবহারকারীর অভিমুখীকরণের সেটিংসকে ওভাররাইড করা সম্ভব (উদাহরণস্বরূপ) ল্যান্ডস্কেপে জোর করে মুদ্রণ করা হলেও প্রাসঙ্গিক "আকার" সম্পত্তিটি CSS2.1 থেকে বাদ দেওয়া হয়েছে, সত্যের সাথে সামঞ্জস্য রেখে যে কোনও বর্তমান ব্রাউজার এটি সমর্থন করে না। এটি CSS3 পেজড মিডিয়া মডিউলটিতে পুনঃস্থাপন করা হয়েছে তবে নোট করুন যে এটি কেবল একটি ওয়ার্কিং ড্রাফ্ট (জুলাই ২০০৯ হিসাবে)।

উপসংহার: বর্তমানের জন্য @ পৃষ্ঠার কথা ভুলে যান আপনি যদি মনে করেন যে আপনার নথিটি ল্যান্ডস্কেপ অভিযোজনে মুদ্রিত করা দরকার, নিজেকে জিজ্ঞাসা করুন যে আপনি পরিবর্তে আপনার নকশাটিকে আরও তরল করতে পারেন কিনা। আপনি যদি সত্যিই না করতে পারেন (সম্ভবত ডকুমেন্টটিতে অনেকগুলি কলাম সহ ডেটা টেবিল রয়েছে, উদাহরণস্বরূপ), আপনাকে ল্যান্ডস্কেপটিতে ওরিয়েন্টেশন সেট করার জন্য ব্যবহারকারীকে পরামর্শ দিতে হবে এবং সম্ভবত এটি সর্বাধিক সাধারণ ব্রাউজারগুলিতে কীভাবে করা যায় সেটির বাহ্যরেখা তৈরি করতে হবে। অবশ্যই কিছু ব্রাউজারের একটি মুদ্রণ ফিট-টু-প্রস্থ (সঙ্কুচিত-থেকে-ফিট) বৈশিষ্ট্য রয়েছে (যেমন অপেরা, ফায়ারফক্স, আই 7) তবে এই সুবিধাটি রয়েছে বা এটি চালু আছে এমন ব্যবহারকারীদের উপর নির্ভর করা অনাকাঙ্ক্ষিত।

— আহমদ আলফি
সূত্র
4
এটি "উইকিপিডিয়া" নয়, "সিএসএস-আলোচনা উইকি"।
— জবল
12

এটি আপনার সিএসএস যুক্ত করার চেষ্টা করুন:

@page {
  size: landscape;
}
— গ্যাজেট
সূত্র
2
এটি কোনও ব্রাউজার দিয়ে আপনার জন্য কাজ করেছিল? আইই 8 এবং ফায়ারফক্স 3.5 দিয়ে এটি মুদ্রণ পূর্বরূপে কোনও পার্থক্য বলে মনে হচ্ছে না।
— ড্যানিয়েল বলিঞ্জার
দুর্ভাগ্যক্রমে মুদ্রণ প্রাকদর্শন সমস্ত CSS বৈশিষ্ট্য অনুসরণ করে না। তবে বর্তমানের সমস্ত ব্রাউজারে এটি কাজ করা উচিত।
— গ্যাজেট
এই অনুসরণ করার জন্য ধন্যবাদ। এটি প্রকৃত মুদ্রণ দিয়ে আমার পক্ষে কাজ করবে বলে মনে হয় না। আমি কিছু মিস করেছি? আমার পরীক্ষার ফাইলটি নিম্নরূপ: (মন্তব্য বাক্সে ফিট করার জন্য আমাকে অনুচ্ছেদে বিষয়বস্তু ছাঁটাই করতে হয়েছে) <html> <শিরোনাম << শিরোনাম> ল্যান্ডস্কেপ পরীক্ষার পৃষ্ঠা </ শিরোনাম> <স্টাইল> @ পৃষ্ঠা {আকার: ল্যান্ডস্কেপ; } </style> </head> <body> <p> লরেম ইপসাম ডোলার বসুন, ... </ p> </body> </html>
— ড্যানিয়েল বলিঞ্জার
আমি এই পৃষ্ঠায় প্রদর্শিত @ পেজ নিয়মের প্রতিটি সংমিশ্রণ এবং অন্য সাইট থেকে কিছু চেষ্টা করেছি, পাশাপাশি ও'রিলির এইচটিএমএল / এক্সএইচটিএমএল: সংজ্ঞা নির্দেশিকা, পঞ্চম সংস্করণে। আমি এটি IE8, ফায়ারফক্স 3.6, বা ক্রোম 7.0 এ কাজ করতে সক্ষম হইনি।
— পল কেইস্টার
আমি জানি এটি এর 2012 ... তবে এই উত্তরটি আমাকে সাহায্য করেছে ... আইই 8 এর জন্য ল্যান্ডস্কেপ বিকল্পটি সমর্থন করতে ... ধন্যবাদ
— বিক্রম
11

sizeসম্পত্তি হিসাবে আপনি উল্লেখ পর কি হন। মুদ্রণের সময় আপনার পৃষ্ঠার ওরিয়েন্টেশন এবং আকার উভয়ই সেট করতে, আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন:

/* ISO Paper Size */
@page {
  size: A4 landscape;
}

/* Size in mm */    
@page {
  size: 100mm 200mm landscape;
}

/* Size in inches */    
@page {
  size: 4in 6in landscape;
}

এখানে @ পৃষ্ঠার ডকুমেন্টেশনের লিঙ্ক ।

— robstarbuck
সূত্র
বুটস্ট্র্যাপের সাথে ব্যবহার করার সময়, এই ঘোষণাটি আলাদা একটি .cssফাইলে সংরক্ষণ করতে হবে অন্যথায় যদি এটি ইনলাইন হয় তবে ডিফল্ট বুস্ট্র্যাপ ঘোষণার ( size: a3) অগ্রাধিকার গ্রহণ করবে।
— কেরাম
5

আপনি অ-স্ট্যান্ডার্ড আইই-কেবল সিএসএস অ্যাট্রিবিউট রাইটিং-মোডও ব্যবহার করতে পারেন

div.page    { 
   writing-mode: tb-rl;
}
— yann.kmm
সূত্র
1
এটি পৃষ্ঠার সামগ্রীটি পুনরায় তৈরি করে তবে পৃষ্ঠার বিন্যাসটিকে সত্যই ল্যান্ডস্কেপে পরিবর্তন করে না। অর্থাৎ শিরোনাম এবং পাদচরণগুলি এখনও এমনভাবে যুক্ত করা হবে যেন পৃষ্ঠাটির প্রতিকৃতি ছিল।
— ড্যানিয়েল বলিঞ্জার 3
2 
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

ফায়ারফক্স 16.0.2 এ কাজ করছে না তবে এটি ক্রোমে কাজ করছে

— Satheesh
সূত্র
2

আমি ল্যান্ডস্কেপ সেটিং সহ একটি ফাঁকা এমএস ডকুমেন্ট তৈরি করেছি এবং তারপরে এটি নোটপ্যাডে খুললাম। নিম্নলিখিতটি আমার এইচটিএমএল পৃষ্ঠায় অনুলিপি করে আটকানো হয়েছে

<style type="text/css" media="print">
   @page Section1
    {size:11 8.5in;
    margin:.5in 13.6pt 0in 13.6pt;
    mso-header-margin:.5in;
    mso-footer-margin:.5in;
    mso-paper-source:4;}
div.Section1
    {page:Section1;}
</style>



<div class="Section1"> put  text / images / other stuff  </div>

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

— শংকর
সূত্র
1

আমি এই সমস্যাটি একবার সমাধান করার চেষ্টা করেছি, তবে আমার সমস্ত গবেষণা আমাকে অ্যাক্টিভএক্স নিয়ন্ত্রণ / প্লাগ-ইনগুলির দিকে পরিচালিত করে। ব্রাউজারগুলি (যাইহোক 3 বছর আগে) কোনও মুদ্রণ সেটিংস (কপির সংখ্যা, কাগজের আকার) পরিবর্তন করার অনুমতি দিয়েছে এমন কোনও কৌশল নেই।

ব্যবহারকারীদের সাবধানতার সাথে সতর্ক করার জন্য আমি আমার প্রচেষ্টাগুলি রেখেছিলাম যে যখন ব্রাউজারগুলি মুদ্রণ ডায়ালগ প্রদর্শিত হয় তখন তাদের "ল্যান্ডস্কেপ" নির্বাচন করা দরকার। আমি একটি "মুদ্রণ পূর্বরূপ" পৃষ্ঠাও তৈরি করেছি, যা আইআই 6 এর চেয়ে অনেক ভাল কাজ করেছে! কিছু প্রতিবেদনে আমাদের অ্যাপ্লিকেশনটিতে ডেটাগুলির বিস্তৃত টেবিল ছিল এবং মুদ্রণ পূর্বরূপটি ব্যবহারকারীদের কাছে স্পষ্ট করে দিয়েছিল যে টেবিলটি কাগজের ডান প্রান্তটি ছড়িয়ে দেবে (যেহেতু আই 66 2 টি শিটের মুদ্রণ সহ্য করতে পারে না)।

এবং হ্যাঁ, লোকেরা এখনও এখনও আই 6 ব্যবহার করে।

— ম্যাগনাস স্মিথ
সূত্র
1 
<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

আপনি যদি এই স্টাইলটি কোনও টেবিলের জন্য প্রয়োগ করতে চান তবে এই স্টাইলের শ্রেণীর সাহায্যে একটি ডিভ ট্যাগ তৈরি করুন এবং এই ডিভ ট্যাগের মধ্যে সারণি ট্যাগ যুক্ত করুন এবং শেষে ডিভ ট্যাগটি বন্ধ করুন।

এই টেবিলটি কেবল ল্যান্ডস্কেপে মুদ্রণ করবে এবং অন্যান্য সমস্ত পৃষ্ঠা কেবল প্রতিকৃতি মোডে মুদ্রণ করবে। তবে সমস্যাটি হ'ল যদি টেবিলের আকারটি পৃষ্ঠার প্রস্থের চেয়ে বেশি হয় তবে আমরা কয়েকটি সারিটি আলগা করতে পারি এবং কখনও কখনও শিরোনামও বাদ যায়। সতর্ক হোন.

আপনার দিনটি শুভ হোক.

ধন্যবাদ, নবীন মেটাটপ্যালি।

— নবীন মেটাপল্লি
সূত্র
1
এটি 90 ডিগ্রি দ্বারা স্ক্রিনের সামগ্রীগুলি ঘোরায় তবে প্রিন্ট আউট এখনও প্রোট্রেট ফর্ম্যাটে আসে। উভয় বিশ্বের সবচেয়ে খারাপ সত্যই, অন্তত ie8 সালে।
— arame3333
1

আমি ডেনিসের উত্তরের চেষ্টা করে কিছু সমস্যা হিট করেছি (ল্যান্ডস্কেপ পৃষ্ঠাগুলি অনুসরণের পরে প্রতিকৃতি পৃষ্ঠাগুলি সঠিকভাবে প্রিন্ট করা হয়নি), তাই আমার সমাধানটি এখানে:

body {
  margin: 0;
  background: #CCCCCC;
}

div.page {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 209mm;
  height: 296mm;
  overflow: hidden;
  background: white;
}

div.landscape-parent {
  width: 296mm;
  height: 209mm;
}

div.landscape {
  width: 296mm;
  height: 209mm;
}

div.content {
  padding: 10mm;
}

body,
div,
td {
  font-size: 13px;
  font-family: Verdana;
}

@media print {
  body {
    background: none;
  }
  div.page {
    width: 209mm;
    height: 296mm;
  }
  div.landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }
  div.portrait,
  div.landscape,
  div.page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
}
<div class="page">
  <div class="content">
    First page in Portrait mode
  </div>
</div>
<div class="page landscape-parent">
  <div class="landscape">
    <div class="content">
      Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="page">
  <div class="content">
    Third page in Portrait mode
  </div>
</div>
স্নিপেট প্রসারিত করুন

— আরকাদিয়ে বলটোভ
সূত্র
0

আপনি মুদ্রণের পাশাপাশি স্ক্রিনে ল্যান্ডস্কেপ দেখতে চাইলে প্রিন্ট করার পাশাপাশি আপনার সিএসএসে আপনি প্রস্থটি 900px এবং উচ্চতা 612px এ সেট করতে পারেন।

ওপি এ 4 আকারের কথা উল্লেখ করেনি। আমি ধরে নিলাম এটি উপরের আমার সংখ্যায় লেটারের আকার।

— নীল পানি
সূত্র
-1

আপনি নিম্নলিখিত চেষ্টা করতে পারেন:

@page {
    size: auto
}
— sherz
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.