সিএসএস মুদ্রণ: পৃষ্ঠাগুলির মধ্যে অর্ধেক ডিআইভিগুলি এড়ানো হচ্ছে?

Question

আমি সফটওয়্যারটির একটি অংশের জন্য একটি প্লাগ-ইন লিখছি যা আইটেমের একটি বড় সংগ্রহ নেয় এবং এগুলি HTML এর মধ্যে কোপোর একটি ওয়েবভিউতে পপ করে (যা ওয়েবকিটটিকে তার উপস্থাপক হিসাবে ব্যবহার করে, সুতরাং মূলত আপনি ধরে নিতে পারেন এই এইচটিএমএল ফাইলটি খোলা হচ্ছে সাফারি)।

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

আমি পৃষ্ঠা-বিরতি-পূর্বে, পৃষ্ঠা-বিরতি-পরে, পৃষ্ঠা-বিরতি ভিতরে এবং তিনটির সংমিশ্রণটি চেষ্টা করে দেখেছি। আমি মনে করি এটি ওয়েবকিট হতে পারে নির্দেশাবলীটি যথাযথভাবে সরবরাহ না করে, বা এটি কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আমার বোঝার অভাব হতে পারে। যাইহোক, আমার সহায়তা দরকার। মুদ্রণের সময় কীভাবে আমি আমার ডিআইভি'র অর্ধেকটি আটকাতে পারি?

Comments

আপনি যে সমস্যাটি দেখছেন তাতে একটি নমুনা দস্তাবেজ সরবরাহ করুন এবং সম্ভবত আমরা সহায়তা করতে পারি!

— এক্স-ইটনেশন

আমি অর্ধেক ডিভগুলি

— ট্র্যাভিস জে

দ্রষ্টব্য: এই সম্পত্তিটি একেবারে অবস্থানযুক্ত (এবং স্পষ্টভাবে ইনলাইন-ব্লকেও রয়েছে) উপাদানগুলিতে ব্যবহার করা যাবে না।

— উজ্জ্বল সিং

Answer 1

এই কাজ করা উচিত:

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

দয়া করে বর্তমান ব্রাউজার সমর্থন (12-03-2014) নোট করুন :

• ক্রোম - 1.0+
• ফায়ারফক্স (গেকো) - 19.0+
• ইন্টারনেট এক্সপ্লোরার - 8.0+
• অপেরা - 7.0+
• সাফারি - 1.3+ (312)

Comments

এটা কাজ করা উচিত । তবে তা হয় না। ব্রাউজার সমর্থনের জন্য en.wikedia.org/wiki/… দেখুন ।

— গ্রেগ

সাফারি 6 এ কাজ করে :) যা এখন বিকাশকারী পূর্বরূপে রয়েছে

— লিনাস আননেবাক

ক্রোম ভি 27.0.1453.116 এ কাজ করে

— টি। ব্রায়ান জোন্স

নেটস্কেপেও কাজ করে। ধন্যবাদ!

আপনার মিডিয়া প্রিন্টের দরকার কেন? মিডিয়া প্রিন্ট ব্যবহার না করা এবং ডিভের উপর সরাসরি নিয়ম প্রয়োগ করা থাকলে কি তা একই?

— ফ্রেনকিবি

Answer 2

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

Comments

@ ইশওয়ে: ধন্যবাদ ডাউনটাও একই সময়ে ঘটেছিল অনুসন্ধানী_আরবি_ডিভেলপার প্রশ্নের উপরে একটি অনুদান রেখেছিলেন। আমার ধারণা যে এটি / তিনি পছন্দ করেন নি। ;)

— নোটমে

সুন্দর! তুমি চ্যাম্পিয়ন; আমি wkhtmltopdf এ এটি করার জন্য একটি উপায় খুঁজছি , যা page-break-inside: avoid;সঠিকভাবে সমর্থন করে না । অবশেষে আমি একটি শালীন কাজ আছে।

— ডেভ

০.০১ সংস্করণে wkhtmltopdf এ পৃষ্ঠা-বিরতি ভিতরে পরীক্ষা করা হয়েছে এবং এটি কাজ করে।

— সেএমসি

Wktmltopdf 0.12.2.1 এর সাথে পরীক্ষিত। ডিভ টেবিলের অভ্যন্তরে আর প্রয়োজন নেই, কেবল পৃষ্ঠা-বিরতি-ভিতরে রাখুন: ডিভ সিলেক্টারের উপর এড়ানো। কাজ করে!

— পল মার্টি

Answer 3

page-break-inside: avoid; wkhtmltopdf ব্যবহার করে আমাকে সমস্যা দিয়েছে।

পাঠ্যের বিরতি এড়াতে পাঠ্যযুক্ত ডিভের display: table;সিএসএস যুক্ত করুন ।

আমি আশা করি এটি আপনার পক্ষেও কাজ করে। ধন্যবাদ জনস।

Comments

উপাদানগুলির ব্যবহার page-break-before: always;করার সময় আমি এখানে এবং সেখানে উপস্থিত অব্যক্ত স্পেসগুলি প্রায় ছেড়ে দিয়েছি <div>। এসও পোস্টস, নিবন্ধগুলি, অফিসিয়াল ডক্স এবং হোয়াট নোটের সমুদ্রের মধ্য দিয়ে অনুসন্ধান করা। কিছুই সাহায্য করেনি। তবে আপনি, আমার বন্ধু, অবশেষে আমার ঠিক যা প্রয়োজন তা নিয়ে এসেছিলেন! আপনাকে যথেষ্ট ধন্যবাদ দিতে পারি না, মানুষ !! আমি আশা করি আপনাকে অন্ততপক্ষে ভারত থেকে একটি কফি পেতে পারব!

— জে দাদানিয়া

Answer 4

পৃষ্ঠা-বিরতি ভিতরে: এড়ানো; স্পষ্টতই ওয়েবকিটে কাজ করে না, বাস্তবে এটি এখন 5+ বছর ধরে একটি পরিচিত সমস্যা হয়ে দাঁড়িয়েছে https://bugs.webkit.org/show_bug.cgi?id=5097

আমার গবেষণা যতদূর পেরেছে, এটি সম্পাদন করার জন্য কোনও জ্ঞাত পদ্ধতি নেই (আমি নিজের হ্যাকটি বের করার কাজ করছি)

আমি আপনাকে যে পরামর্শ দিতে পারি তা হ'ল, এফএফ-তে এই কার্যকারিতাটি সম্পাদন করার জন্য, আপনার যে সামগ্রীটি না করা উচিত তা মোড়ানো over খুব ছোট পাত্রে আকার ধারন করে দেখান)।

দুঃখের বিষয়, এফএফ হ'ল একমাত্র ব্রাউজার যা আমি এটি সম্পাদন করতে পেরেছি এবং ওয়েবকিটই আমি যা নিয়ে বেশি উদ্বিগ্ন।

Answer 5

পৃষ্ঠা-বিরতির পরে সম্ভাব্য মানগুলি হ'ল: auto, always, avoid, left, right

আমি বিশ্বাস করি যে আপনি একেবারে অবস্থিত উপাদানগুলিতে থিয়া পৃষ্ঠা-বিরতি সম্পত্তি ব্যবহার করতে পারবেন না।

Comments

দৃশ্যত এটা কাজ করে না inline-blockপারেন গুলি

— উজ্জ্বল সিং

Answer 6

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

সমস্ত ppular ব্রাউজারে যা কাজ করে তা উদাহরণস্বরূপ পৃষ্ঠাগুলি বিরতিতে বাধ্য হয়। পৃষ্ঠা-বিরতি-পরে: সর্বদা

Comments

এটি ওয়েবকিটের সাথে কাজ করা উচিত। তবে আপনাকে পৃষ্ঠা-বিরতি-সহ মুদ্রণের জন্য স্টাইলযুক্ত কয়েকটি অতিরিক্ত ডিভ লাগাতে হতে পারে: সর্বদা; আপনার নিয়মিত ডিভের অর্ধ ডজন পরে after

— 12

Answer 7

আমি যে সমস্যার মধ্যে পড়েছি তা হ'ল 'অটো' তে 'ওভারফ্লো' অ্যাট্রিবিউট সেট থাকা একটি পিতামাতার উপাদান। এটি মুদ্রণ সংস্করণে পৃষ্ঠা-বিরতি-অন্তর্ভুক্ত বৈশিষ্ট্য সহ শিশু ডিভ উপাদানগুলিকে অগ্রাহ্য করে। অন্যথায়, page-break-inside: avoidআমার জন্য ক্রোমে দুর্দান্ত কাজ করে।

Answer 8

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

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

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

সম্ভবত কেউ এই উপর প্রসারিত করতে পারে।

Answer 9

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

সমস্ত নতুন ব্রাউজারের জন্য এই সমাধানটি কাজ করে। Caniuse.com/#search=page-break-inside দেখুন

Answer 10

page-break-inside: avoid;সবসময় কাজ বলে মনে হয় না । মনে হয় এটি ধারক উপাদানগুলির উচ্চতা এবং অবস্থান বিবেচনা করে।

উদাহরণস্বরূপ, inline-blockপৃষ্ঠাগুলির চেয়ে লম্বা উপাদানগুলি ক্লিপড হবে।

আমি page-break-inside: avoid;একটি ধারক উপাদান সনাক্ত করে display: inline-blockএবং যুক্ত করে কাজের কার্যকারিতা পুনরুদ্ধার করতে সক্ষম হয়েছি :

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

আশা করি এটি "পাতার বিরতিতে কাজ করে না" এমন অভিযোগকারীদের সহায়তা করবে helps