Men bu tvitga qiziqib qoldim. To'satdan men veb -sahifalarni chop etish uchun optimallashtirganimni yoki hech bo'lmaganda printerga qanday chiqarilishini tekshirganimni eslay olmasligimni angladim.

Veb -ishlab chiqish jarayonida asosiy e'tibor saytlarning elektron versiyalariga qaratiladi. Sahifalar ko'plab brauzerlarda tekshirilishi, har xil o'lchamdagi oynalarda tekshirilishi kerak ... Bu erda printerlar bormi. Yoki men bosib chiqarish uslublarini unutganman, chunki men kamdan -kam hollarda sahifalarning qog'oz nusxalarini tayyorlayman. Qanday bo'lmasin, vaziyatni zudlik bilan tuzatish kerakligini his qildim.

Veb -sahifaning bosma versiyasi elektron bo'lgani kabi mavjud bo'lish huquqiga ega. Va agar biz o'z materiallarimizni iloji boricha qulayroq qilishga intilsak, qog'oz vositalarini e'tiborsiz qoldirmang. Bundan tashqari, siz foydalanuvchilar va ularning xatti -harakatlari haqida taxmin qilmasligingiz kerak. Odamlar hali ham printerlarni veb -sahifalarini bosib chiqarishadi. Maqolalar yoki blog xabarlari, retseptlar sahifalari, aloqa ma'lumotlari, haydash yo'nalishlari yoki reklamalar ro'yxatini tasavvur qiling. Ertami -kechmi, kimdir siz Internetda joylashtirgan narsalarni chop etishga harakat qiladi.

Bu haqda Inclusive Design Patterns muallifi Haydon Pickering shunday deydi: “Men anchadan beri uy printeridan foydalanmayapman. Gap shundaki, men siz bosib chiqarishni boshlaganingizdan o'n minut o'tgach, ular buziladi. Lekin men hammasi emasman. "

Agar hozirgacha siz ham men kabi bosish uslubiga etarlicha e'tibor bermaganligingizni tushunsangiz, umid qilamanki, mening hikoyam sizga yaxshi xizmat qiladi va xotirangizni tezda yangilashga yordam beradi. Va agar siz hech qachon printerlar uchun veb -sahifalarni optimallashtirmagan bo'lsangiz, mening foydali CSS fokuslar to'plamim sizni ishga tushiradi.

1. Bosib chiqarish uchun CSS-uslublardan foydalanish

Sahifaga chop etiladigan uslublarni qo'shishning eng yaxshi usuli - bu asosiy CSS -faylingizda @media qoidasini e'lon qilish.

Asosiy (shrift o'lchami: 18 piksel;) @media print ( / * bosma uslublar bo'ladi * / body (shrift o'lchami: 28 piksel;))
Shu bilan bir qatorda, siz chop etish uslublarini alohida faylga qo'yishingiz va uni HTML -ga qo'shishingiz mumkin, lekin bu yondashuv yordamida sahifani yuklashda sizga qo'shimcha so'rov kerak bo'ladi.

2. Sinov

Bosib chiqarishga tayyor veb-sahifaning ko'rinishini qanday baholaysiz? Har bir uslub o'zgarganidan keyin uni qog'ozga tushirish eng yaxshi echim emasligi hamma uchun tushunarli. Yaxshiyamki, brauzerlarning imkoniyatlari bosilgan sahifa variantlarini qog'ozsiz tekshirish uchun etarli.

Brauzerga qarab siz sahifani PDF -ga eksport qilishingiz, oldindan ko'rish funktsiyasidan foydalanishingiz yoki hatto veb -brauzeringizda sahifani tuzatishingiz mumkin.

Firefox -da chop etish uslublarini tuzatish uchun oching Ishlab chiquvchilar asboblar paneli klaviatura yorliqlaridan foydalanish Shift + F2 yoki menyu buyrug'ini bajarish orqali Rivojlanish → Rivojlanish paneli... Oynaning pastki qismidagi buyruq satriga quyidagilarni kiriting: media bilan tugaydigan bosma nusxa ko'chiradi Kirish... Faol yorliq xuddi xuddi shunday bo'ladi media turi bo'lardi chop etish sahifani yopmaguningizcha yoki yangilamaguningizcha.

Firefox bosib chiqarish emulyatsiyasi

Chrome ham shunga o'xshash xususiyatga ega. Ochish Dasturchi vositalari, buning uchun MacOS -da siz klaviatura yorliqlaridan foydalanishingiz mumkin CMD + Opt + I, v Windows - Ctrl + Shift + I, yoki menyu buyrug'ini bajaring Qo'shimcha asboblar -> Ishlab chiquvchi asboblari... Shundan so'ng, ko'rsatish panelini oching. Buning bir usuli - tugmani bosish Esc, panelni ko'rsatish Konsol va keyin menyu orqali panelni oching Render qilish... Render panelida bayroqni o'rnating CSS -ni taqlid qiling va tanlang Chop etish.

Chrome bosib chiqarish emulyatsiyasi

StackOverflow -da veb -sahifalarning bosma versiyalarini sinovdan o'tkazish haqida ko'proq o'qishingiz mumkin.

3. Mutlaq birliklar

Sahifalarning ekrandagi versiyalari uchun mutlaq birliklar unchalik mos emas, lekin chop etish uchun ular aynan sizga kerak. Bosib chiqarish uslublari uchun mutlaqo xavfsizdir, bundan tashqari sm, mm, in, pt yoki kompyuter kabi mutlaq o'lchov birliklaridan foydalanish tavsiya etiladi.

Bo'lim (pastki chet: 2 sm;)

4. Sahifalarning xususiyatlari

Sahifaning o'lchamlari, yo'nalishlari va chekkalari kabi sahifa xususiyatlarini boshqarish uchun @sahifa qoidasidan foydalanishingiz mumkin. Bu juda foydali bo'lib chiqadi, masalan, barcha bosilgan sahifalar bir xil chegaralarga ega bo'lishi zarur bo'lganda.

@media chop etish (@sahifa (chekka: 1 sm;))
@Sahifa qoidasi Paged Media Module standartining bir qismi bo'lib, u bosib chiqarish uchun birinchi sahifani tanlash, bo'sh sahifalarni sozlash, sahifaning burchaklaridagi elementlarni joylashtirish va hk kabi ko'plab ajoyib narsalarni taklif etadi. Hatto kitobni chop etish uchun tayyorlash uchun ham foydalanish mumkin.

5. Sahifa tanaffuslarini nazorat qilish

Chop etilgan varaqlar, veb -sahifalardan farqli o'laroq, cheksiz emasligi sababli, veb -sahifalarning tarkibi ertami -kechmi bir varaqda uzilib, keyingi varaqda davom etadi. Sahifa tanaffuslarini boshqarish uchun beshta xususiyat mavjud.

▍Element oldida sahifa tanaffusi

Agar siz har doim sahifaning boshida element bo'lishini xohlasangiz, uning oldiga majburiy sahifa tanaffusini qo'yishingiz mumkin.

Bo'lim (sahifa tanaffusidan oldin: har doim;)

▍Elementdan keyin sahifa tanaffusi

Page-break-after xususiyati elementdan keyin majburiy sahifa tanaffusini o'rnatish imkonini beradi. Bu xususiyatdan foydalanib, siz tanaffusni ham inkor qilishingiz mumkin.

H2 (sahifa tanaffusidan keyin: har doim;)

▍ Element ichidagi sahifa uzilishi

Sahifani ajratish xususiyati, agar siz elementni ikki sahifaga ajratmasligingiz kerak bo'lsa, yordam beradi.

Ul (sahifani buzish: oldini olish;)

▍ Yuqoridan va pastdan osilgan qatorlar

Ba'zan sahifa tanaffuslarini majburlashning hojati yo'q, lekin siz sahifalar chegaralarida paragraflarning chiqishini nazorat qilmoqchisiz.

Masalan, agar joriy sahifadagi paragrafning oxirgi satri mos kelmasa, keyingi paragrafda ushbu paragrafning oxirgi ikki satri bosiladi. Buning sababi shundaki, uni boshqaradigan mulk (beva ayollar, ya'ni - "etim bolalar") sukut bo'yicha 2 ga o'rnatiladi. Buni o'zgartirish mumkin.

P (bevalar: 4;)
Agar boshqa vaziyat yuzaga kelsa va joriy sahifaga faqat bitta paragraf satri to'g'ri kelsa, butun paragraf keyingi sahifada chop etiladi. Etimlar mulki ham sukut bo'yicha 2 ga o'rnatiladi.

P (etim bolalar: 3;)
Yuqoridagi kodning mohiyati shundaki, paragraf keyingi sahifaga to'liq yopilmasligi uchun joriy sahifaga kamida uchta satr to'g'ri kelishi kerak.

Buni yaxshiroq tushunish uchun CodePen bilan tayyorlangan misolni ko'rib chiqing. Va bu erda xuddi shu misolning disk raskadrovka versiyasi, uni sinash qulayroqdir.

*, *: oldin, *: keyin, *: birinchi harf, p: birinchi qator, div: birinchi qator, blokkotirovka: birinchi qator, li: birinchi qator (fon: shaffof! muhim; rang: # 000 ! muhim; quti-soya: hech kim! muhim; matn soyasi: hech kim! muhim;)
Aytgancha, CSS -ni bosib chiqarish uslublari - bu istisnolardan biri! Muhim ko'rsatma juda yaxshi;)

7. Keraksiz tarkibni olib tashlash

Murakkab isrof qilmaslik uchun, sahifaning bosilgan versiyasidan keraksiz hamma narsani olib tashlashingiz kerak, masalan, ulkan chiroyli slaydlar, reklamalar, saytlarni navigatsiya qilish vositalari va boshqalar. Buni displey xususiyatini keraksiz elementlarga o'rnatib qo'yish mumkin. Siz faqat sahifaning asosiy tarkibini ko'rsatishni va boshqa hamma narsani yashirishni to'g'ri deb topishingiz mumkin:

Asosiy> *: emas (asosiy) (ko'rsatish: yo'q;)

8. Havolalar URL manzillarini chiqarish

Hujjatning qog'oz versiyasini o'qiydigan kishi qayerga olib borishini bilmasa, havolalar, odatda, veb -sahifalarda ko'rinadigan shaklda, bosilganda mutlaqo foydasiz bo'ladi.

Havolalarning matnli tasviridan keyin ularning manzillarini ko'rsatish uchun quyidagi uslubdan foydalanish kifoya.

A: keyin (kontent: "(" attr (href) ")";)
Albatta, bu yondashuv bilan juda ko'p keraksiz narsalar "dekodlanadi". Masalan, nisbiy havolalar, bosilgan sahifa bilan bir xil saytdagi mutlaq havolalar, langar bilan bog'lanish va boshqalar. Chop etilgan sahifani yopib yubormaslik uchun quyidagilarni ishlatish yaxshiroq bo'lar edi:

A: emas (): keyin (mazmuni: "(" attr (href) ")";)
Bu, albatta, aqldan ozgan ko'rinadi. Shuning uchun, men bu qoidaning ma'nosini oddiy tilda tushuntiraman: "http bilan boshlanadigan, lekin mywebsite.com saytini o'z ichiga olmaydigan har bir havola yonida href atributining qiymatini ko'rsatish".

9. Qisqartmalarning dekodlanishi

Matndagi qisqartmalar tegga joylashtirilishi kerak va ularning dekodlanishi sarlavha atributiga kiritilishi kerak. Agar siz qisqartirishlarni shunday uslub qilsangiz, ularning ma'nosini bosilgan sahifada ko'rsatish juda oson:

Abbr: keyin (mazmuni: "(" attr (sarlavha) ")";)

10. Fonni majburiy bosib chiqarish

Odatda, brauzerlar, sahifani chop etish uchun ko'rsatganda, agar ularga aniq aytilmagan bo'lsa, fon rangi va fon tasvirlarini ko'rsatmaydi. Biroq, ba'zida bularning barchasini chop etish kerak bo'ladi. Bu erda nostandart bosib chiqarish rangini sozlash xususiyati bizga yordam beradi, bu bizga ba'zi brauzerlar uchun standart sozlamalarni bekor qilishga imkon beradi.

Sarlavha (-webkit-print-color-rostlash: aniq; print-color-rostlash: aniq;)

11. Ommaviy axborot vositalari uchun so'rovlar

Agar siz media -so'rovlarni quyidagi savolga o'xshash tarzda yozsangiz, shuni yodda tutingki, bunday so'rovlardagi CSS qoidalari sahifaning bosilgan versiyasiga ta'sir qilmaydi.

@media ekrani va (min-eni: 48em) ( / * faqat ekran * /)
Nega bu shunday? Gap shundaki, CSS qoidalari faqat min-eni 48em bo'lsa va media turi ekranli bo'lsa amal qiladi. Agar biz ushbu media so'rovda ekran kalit so'zidan qutulsak, u faqat min-kenglik qiymati bilan chegaralanadi.

@media (min-eni: 48em) ( / * barcha media turlari * /)

12. Xaritalarni chop etish

Firefox va Chrome -ning hozirgi versiyalari xaritalarni chop etishi mumkin, lekin Safari, masalan, qila olmaydi. Kartalarni bosib chiqarish haqida nima deyish mumkin? Universal variantlardan biri dinamik xaritalar o'rniga statik xaritalardan foydalanishdir.

Xarita (kenglik: 400px; balandlik: 300px; fon-rasm: url ("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&trual_rextr_tr "); -webkit-print-color-rostlash: aniq; print-color-rostlash: aniq;)

13. QR kodlari

Muhim havolalarni o'z ichiga olgan QR -kodlarni chop etish, bosma nusxadagi veb -sahifalarning mavjudligini ancha yaxshilaydi. Bu erda The Smashing jurnali mavzu bo'yicha foydali maslahatlar uchun. Ulardan biri - bosilgan sahifalarga o'z manzillarini QR -kod shaklida kiritish. Natijada, brauzerda chop etilgan sahifani ochish uchun foydalanuvchi klaviaturada to'liq manzilini yozishi shart emas.

14. Optimallashmagan sahifalarni chop etish haqida

Veb-sahifalarni chop etish mavzusiga kirib, men optimallashtirilmagan sahifalarni chop etish uchun qulay tayyorlashga imkon beradigan ajoyib vositani kashf etdim. Printliminator bilan

Sahifalar tanaffuslari

Quyidagi bo'limlarda CSS2 -da ishlatiladigan sahifalarni formatlash modeli tasvirlangan. Foydalanuvchi agentiga u qayerda sahifani buzishi yoki buzishi mumkinligini va tarkibni ko'rsatishni davom ettirishi kerak bo'lgan sahifani (chapda yoki o'ngda) aytish uchun besh xil xususiyat ishlatiladi. Har bir sahifa tanaffusi joriy sahifadagi kontentni ko'rsatishni to'xtatadi va hujjat daraxtining qolgan qismi yangi sahifa maydonida ko'rsatilishiga olib keladi.

Elementlardan oldin va keyin tanaffuslar: "sahifa-uzilish-oldin", "sahifa-uzilish-keyin", "sahifa-uzilish-ichkarida"

"oldin sahifa tanaffusi"

Boshlang'ich qiymati: avtomatik
Meros: yo'q
Foiz topshirig'i: Yo'q

"sahifa buzilishi"

"sahifa buzilishi"

Qiymat: oldini olish | avtomobil | meros qilib olingan
Boshlang'ich qiymati: avtomatik
Qo'llanish doirasi: strukturaviy darajadagi elementlar
Meros: ha
Foiz topshirig'i: Yo'q
Qurilmalar: vizual formatlash, sahifali

Bu xususiyatlarning qiymatlari quyidagi ma'nolarga ega:

avtomatik

Yaratilgan blokdan oldin (keyin yoki ichida) sahifa tanaffusini boshlamaydi yoki taqiqlamaydi.

har doim

Har doim yaratilgan blokdan oldin (keyin) sahifa tanaffusini boshlaydi.

qochish

Yaratilgan blokdan oldin (keyin yoki keyin) sahifa tanaffusini bekor qiladi.

chapda

Yaratilgan blokdan oldin (keyin) bir yoki ikkita sahifa tanaffusini boshlaydi, shunda keyingi sahifa chap sahifa sifatida formatlanadi.

to'g'ri

Yaratilgan blokdan oldin (keyin) bir yoki ikkita sahifa tanaffusini boshlaydi, shunda keyingi sahifa to'g'ri sahifa sifatida formatlanadi.

Sahifa tanaffusining potentsial joylashuvi asosiy elementning "sahifa-uzilish-ichidagi" xususiyati, oldingi elementning "sahifa-uzilishdan keyin" xususiyati va "sahifa-uzilishdan oldin" xususiyati bilan belgilanadi. keyingi element. Agar bu xususiyatlarning qiymatlari "auto" dan boshqa bo'lsa, "saqlanish" qiymatidan "doim", "chap" va "o'ng" qiymatlari ustun turadi. Qabul qilinadigan sahifa tanaffuslari bo'limida ushbu xususiyatlar yordamida sahifa tanaffuslarini boshlash yoki taqiqlash bo'yicha aniq qoidalar keltirilgan.

Nomlangan sahifalardan foydalanish: "sahifa"

"sahifa"

Ma'nosi:<идентификатор>| avtomatik
Boshlang'ich qiymati: avtomatik
Qo'llanish doirasi: strukturaviy darajadagi elementlar
Meros: ha
Foiz topshirig'i: Yo'q
Qurilmalar: vizual formatlash, sahifali

"Sahifa" xususiyati element ko'rsatiladigan sahifaning o'ziga xos turini aniqlash uchun ishlatilishi mumkin.

Ushbu misolda, barcha jadvallar sahifaning o'ng tomoniga joylashtiriladi ("burilgan" deb nomlanadi), u landshaft yo'nalishi bo'yicha:

JADVAL (sahifa: aylantirildi; sahifa oldin-o'ngda)

"Sahifa" xususiyatining harakati quyidagicha: agar mazmuni inline darajasiga tegishli bo'lgan sahifa blokining "page" xususiyatining qiymati oldingi sahifalar blokining o'xshash xususiyatidan farq qilsa, mazmuni ham inline darajasiga tegishli, keyin ular orasiga bir yoki ikkita sahifa tanaffuslari qo'yiladi, shundan so'ng chiqish nomlangan sahifa blokida chiqariladi. Majburiy sahifa tanaffuslari bo'limiga qarang.

Quyidagi misolda peyzaj sahifalarida ikkita jadval ko'rsatiladi (tabiiyki, bir sahifada, agar ikkalasi ham unga to'g'ri kelsa), DIV elementi uchun o'rnatilgan bo'lsa -da, "tor" sahifa turi umuman ishlatilmaydi.

@sahifa tor (o'lchami: 9 sm 18 sm)
@sahifa aylantirildi (o'lcham: manzara)
DIV (sahifa: tor)
JADVAL (sahifa: aylantirildi)

hujjatda ishlatiladi

...

Sahifalar elementlar ichida: "etimlar", "bevalar"

"etimlar"

Ma'nosi:<целое>| meros qilib olingan
Boshlang'ich qiymati: 2
Qo'llanish doirasi: strukturaviy darajadagi elementlar
Meros: ha
Foiz topshirig'i: Yo'q
Qurilmalar: vizual formatlash, sahifali

"bevalar"

Ma'nosi:<целое>| meros qilib olingan
Boshlang'ich qiymati: 2
Qo'llanish doirasi: strukturaviy darajadagi elementlar
Meros: ha
Foiz topshirig'i: Yo'q
Qurilmalar: vizual formatlash, sahifali

Etim bolalar sahifasining pastki qismida qoldirilishi kerak bo'lgan paragraf satrlarining minimal sonini belgilaydi. "Beva ayollar" xususiyati sahifaning yuqori qismida qoldirilishi kerak bo'lgan paragraf satrlarining minimal sonini aniqlaydi. Sahifa tanaffuslarini boshqarish uchun ushbu xususiyatlardan foydalanish misollari quyida keltirilgan.

Paragraflarni formatlash haqida qo'shimcha ma'lumot olish uchun satr qutilari bo'limiga qarang.

Qabul qilinadigan sahifa tanaffuslari

Oddiy oqimda sahifa tanaffusi quyidagi joylarda bo'lishi mumkin:

Qurilish bloklari orasidagi vertikal chegaralar uchun ajratilgan maydonda. Agar bu vaqtda sahifa tanaffusi ro'y bersa, u holda tegishli "margin-top" va "margin-bottom" xususiyatlarining hisoblangan qiymatlari "0" ga o'rnatiladi.
Strukturaviy darajadagi blokli chiziqli bloklar orasida.

Ko'rib chiqilgan turdagi uzilishlar quyidagi qoidalarga javob beradi:

A qoidasi: Break (1) faqat tanaffusda paydo bo'ladigan bloklarni ochadigan barcha elementlarning "sahifa-uzilishdan keyin" va "sahifa-uzilishdan oldin" xususiyatlarining qiymatlariga ruxsat berilgan taqdirdagina ruxsat etiladi, bu kamida bittasi "har doim", "chapda" yoki "o'ngda" yoki ularning hammasi bir vaqtning o'zida "avto" bo'lganda sodir bo'ladi.
Qoidalar B: Ammo, agar bu xususiyatlarning barchasi "avtomatik" ga o'rnatilgan bo'lsa va barcha nomlangan elementlarning eng yaqin umumiy ajdodining "sahifani buzish" xususiyati "oldini olish" ga o'rnatilgan bo'lsa, u holda sahifa tanaffusi shu nuqtada bo'ladi. taqiqlangan.
Qoida B: Sahifa uzilishi (2) faqat tanaffus va yopilish blokining boshi orasidagi satr qutilari soni "etimlar" mulkining qiymatiga teng yoki undan katta bo'lganida va ular orasidagi chiziqli qutilar soni ko'p bo'lgan taqdirdagina ruxsat etiladi. tanaffus va blokning oxiri "bevalar" mulkining qiymatiga teng yoki undan katta ...
Qoida D: Bundan tashqari, sahifani uzishga (2) ruxsat faqat "sahifani buzish" xususiyati "avtomatik" ga o'rnatilgan bo'lsa.

Agar yuqoridagi qoidalar etarli tanaffuslar kiritishga imkon bermasa, qo'shimcha bloklar yaratishga imkon beradigan sahifa blokidan kontent chiqib ketmasligi uchun B va D qoidalari e'tiborga olinmaydi.

Agar bundan keyin etarli miqdordagi tanaffusga erishish mumkin bo'lmasa, A va B qoidalari qo'shimcha tanaffus nuqtalarini qidirishda hisobga olinmaydi.

Sahifalar tanaffuslari mutlaq joylashtirilgan bloklarda bajarilishi mumkin emas.

Majburiy sahifa tanaffuslari

Sahifa buzilishi sodir bo'lishi kerak (1), agar blokirovka nuqtasida paydo bo'ladigan elementlarning "sahifa buzilishidan keyin" va "sahifa oldin uzilishidan oldin" xususiyatlaridan kamida bittasi "har doim", "chapda" bo'lsa "yoki" to'g'ri ".

Sahifa tanaffusi ham bo'lishi kerak (1), agar satr qutilarining "sahifa" xususiyatining qiymatlari tanaffusdan oldin va keyin boshqacha bo'lsa.

"Eng yaxshi" sahifa tanaffuslari

CSS2 ruxsat berilgan tanaffuslarning qaysi sahifa tanaffusidan foydalanish kerakligini aniqlamaydi; CSS2 foydalanuvchi agentlariga sahifa tanaffuslarini biron -bir joyga kiritishiga yoki umuman ishlatmasligiga to'sqinlik qilmaydi. Ammo CSS2 spetsifikatsiyasi foydalanuvchi agentlariga quyidagi evristikaga rioya qilishni qat'iy tavsiya qiladi (ular ba'zan bir -biriga zid bo'lib chiqmaguncha):

sahifa tanaffuslari imkon qadar kamdan -kam hollarda bajarilishi kerak;
majburiy tanaffus bilan tugamaydigan barcha sahifalar taxminan bir xil balandlikda bo'lishi kerak;
chegarasi bor blok ichida uzilishlar bo'lmasligi kerak;
stol ichida tanaffuslar bo'lmasligi kerak;
ko'chirilgan ob'ekt ichida bo'shliqlar bo'lmasligi kerak.

Aytaylik, sizning uslublar varaqangizda "etimlar: 4" va "bevalar: 2" xususiyatlari bor va joriy sahifaning pastki qismida 20 ta satr (chiziqli qutilar) mavjud:

agar joriy sahifaning oxirgi xatboshisi 20 satrdan oshmasa, u joriy sahifada qolishi kerak;
agar xatboshi 21 yoki 22 qatordan iborat bo'lsa va xatboshining ikkinchi qismi "beva ayol" mulki tomonidan qo'yilgan cheklovlarni buzmasligi kerak bo'lsa, demak, bu tufayli uning ikkinchi qismi ikki qatordan iborat bo'lishi kerak;
agar paragraf 23 satrdan ortiq bo'lsa, unda birinchi qism 20 satr uzunlikda, ikkinchi qism esa boshqa barcha qatorlarni o'z ichiga olishi kerak.

Aytaylik, "etimlar" mulkining qiymati "10", "bevalar" mulkining qiymati "20" va joriy sahifaning pastki qismida 8 qator mavjud:

agar joriy sahifa oxiridagi xatboshi 8 satrdan oshmasa, u joriy sahifada qolishi kerak;
agar paragraf 9 satrdan ortiq bo'lsa, uni ajratish mumkin emas (chunki bu "etimlar" mulki tomonidan o'rnatilgan cheklovni buzadi). Shuning uchun uni blok sifatida keyingi sahifaga o'tkazish kerak.

Katta HTML jadvalini chop etishda sahifa tanaffuslari bilan qanday kurashish mumkin (8)

Menda ko'p satrli HTML jadvalini chop etishni talab qiladigan loyiham bor.

Mening muammom shundaki, jadval bir nechta sahifalarda qanday chop etiladi. Ba'zan u chiziqni yarmiga qisqartiradi va uni o'qilmaydi, chunki yarmi sahifaning chetida, qolgan qismi keyingi sahifaning yuqori qismida bosiladi.

Men o'ylashim mumkin bo'lgan yagona echim - bu jadval o'rniga murakkab DIV -dan foydalanish va agar kerak bo'lsa, sahifa tanaffuslarini majburlash ... lekin hamma o'zgarishlarni amalga oshirishdan oldin men bu erda ilgari so'rashim mumkin deb o'ylagandim.

Ushbu CSS xususiyatlaridan foydalaning:

Sahifa-uzilish-keyin-sahifa-uzilish-oldin

Masalan:

....

Bu erda berilgan javoblarning hech biri men uchun Chrome'da ishlamadi. GitHub -da AAverin buning uchun foydali Javascript yaratdi va bu men uchun ishladi:

JS kodingizga qo'shing va splitForPrint sinfini jadvalga qo'shing, shunda u jadvalni bir nechta sahifalarga ajratadi va har bir sahifaga jadval sarlavhasini qo'shadi.

E'tibor bering: sahifa tanaffusidan foydalanganda: har doim teg uchun, jadvalning oxirgi qismidan keyin sahifa tanaffusini yaratadi va har safar bo'sh sahifa yaratadi! Buni tuzatish uchun uni sahifa uzilishidan keyin o'zgartiring: auto. U to'g'ri buziladi va qo'shimcha bo'sh sahifa yaratmaydi.

....

Qabul qilingan javob men uchun barcha brauzerlarda ishlamadi, lekin CSS men uchun ishlaganidan keyin:

Tr (displey: jadval-qator-guruh; sahifa-uzilish-ichkarisi: oldini olish; sahifa-uzilish-keyin: avtomatik;)

HTML tuzilishi quyidagicha edi:

...

Mening holimda, thead tr bilan bog'liq ba'zi qo'shimcha muammolar bor edi, lekin bu stol satrlarini ushlab turishning asl muammosini hal qildi.

Sarlavha muammolari tufayli men oxiriga yetdim:

#theTable td * (sahifani buzish: oldini olish;)

Bu saflarning buzilishiga to'sqinlik qilmadi; faqat har bir hujayraning tarkibi.

Men @ vicenteherrera -ning yondashuvi bilan, ba'zi tuzatishlar bilan yakunladim (bu, ehtimol bootstrap 3).

Asosan; biz tr s yoki td s ni sindira olmaymiz, chunki ular blokli elementlar emas. Shunday qilib, biz div-ni har biriga qo'shamiz va div-larga o'z sahifa buzish qoidalarini qo'llaymiz. Ikkinchidan, biz har bir divning yuqori qismiga har qanday uslublar artefaktlarini to'ldirish uchun bir nechta to'ldirishni qo'shamiz.

Kiritilgan jitterning bir qismini (yuklash chizig'idan, menimcha) o'rnini bosish uchun tuzatishlar va to'ldirishlar kerak edi. Men bu savolga boshqa javoblardan yangi echim taklif qilyapmanmi, amin emasman, lekin bu kimgadir yordam berishi mumkin.

Yaqinda men bu muammoni yaxshi echim bilan hal qildim.

AvoidBreak (chegara: 2px qattiq; sahifani buzish: oldini olish;)

Print funktsiyasi () ($ (". TableToPrint td, .tableToPrint th"). Har bir (function () ($ (this) .css ("width", $ (this) .width () + "px"))) ; $ (". tableToPrint tr"). o'rash ("

"); window.print ();)

Joziba kabi ishlaydi!

Men ko'plab echimlarni sinab ko'rdim va hech biri yaxshi ishlamadi.

Shunday qilib, men bir oz hiyla ishlatdim va u ishlaydi:

tfoot uslubi bilan: pozitsiya: sobit; pastki: 0 piksel; pozitsiya: sobit; pastki: 0 piksel; oxirgi sahifaning pastki qismiga to'g'ri keladi, lekin agar altbilgi juda baland bo'lsa, u jadval mazmuni bilan bir -biriga to'g'ri keladi.

tfoot faqat bilan: displey: table-footer-group; bir -birining ustiga chiqmaydi, lekin oxirgi sahifaning pastki qismida emas ...

Keling, ikkita oyoq qo'yamiz:

TFOOT.placer (displey: table-footer-group; balandlik: 130px;) TFOOT.contenter (displey: table-footer-group; pozitsiya: sobit; pastki: 0px; balandlik: 130px;) bu erda sizning uzun matningiz yoki yuqori rasmingiz

Biri orqa sahifalarda, ikkinchisi sizning shaxsiy tagliklaringizda joy ajratadi.

Sinov

sarlavha
eslatmalar
x
x
x

Garchi biz hamma narsaga oson kirish mumkin bo'lgan raqamli asrda yashayotgan bo'lsak -da, qog'ozdan uzoq matnni o'qishni afzal ko'radiganlar ko'p. Ba'zi foydalanuvchilar sizning saytingizdagi matnni kompyuterdan tashqarida o'qish uchun chop etishlari mumkin.

Kontentni chop etish uchun mos qilish qobiliyati uzoq vaqtdan beri mavjud. Biz buni uslublar jadvalidagi @media qoidasi yordamida amalga oshirishimiz mumkin:

@media chop etish ( / * Uslub qoidalari * / }

Veb -sahifaning mazmunini uni chop etish uchun uslublashtirishga imkon beradigan bir nechta xususiyatlar mavjud va biz ulardan birini ko'rib chiqamiz: sahifa tanaffusi.

Bu nima qiladi?

Agar siz Microsoft Word va Sahifalar kabi matn tahrirlovchilari bilan ishlagan bo'lsangiz, keyingi sahifaga matnni o'rash imkonini beruvchi sahifa ajratish menyusi bilan tanish bo'lishingiz kerak.

Bu modul ham xuddi shunday qiladi, bu sizga veb -sahifaning tarkibi sahifa -sahifa qanday o'ralganligini nazorat qilish imkonini beradi.

Sahifa tanaffusidan foydalanish

Masalan, biz demo -sahifani yaratdik, uni biz chop etmoqchimiz. Biz yomon transferni topdik, quyida ko'rib turganingizdek.

Agar sarlavha va etim chizig'i keyingi sahifadan boshlansa, yaxshi ko'rinadi.

Buning uchun biz page-break-after xususiyatidan foydalanamiz va uni har doim keyingi elementni keyingi sahifaga o'tishga majburlash uchun o'rnatamiz.

Sahifani uzish (sahifani tanaffusdan keyin: har doim;)

Keyin siz elementlar orasidagi sinf bilan yangi element yaratishingiz yoki shu tarzda sinfni oldingi elementga belgilashingiz mumkin.

Bilan Silgi Xususiyat, siz fotosuratning kompozitsiyalarini olishingiz mumkin, so'ngra bularning barchasini birlashtirib, fonni siz qo'shimchalarsiz olishingiz mumkin.

Bilan sayohat qilish uchun telefon

S Tarjimon Sizning sayohatlaringiz uchun ajoyib vosita bo'ladi ...

Endi sarlavha va pastki osilgan chiziq keyingi sahifada boshlanadi.

Yuqori va pastki chiziqlar

Agar matn ko'p bo'lsa, yuqoridagi usul zerikarli bo'lishi mumkin. Shunday qilib, tarkibni keyingi sahifaga o'tishga majburlash o'rniga, etimlarning yuqori va pastki qismlari uchun minimal chegarani belgilash yaxshiroqdir.

Tipografik amaliyotda, yuqoridan va pastdan osilgan chiziqlar boshqa sahifadagi paragrafning qolgan qismidan uzilib qolgan so'zlar va qisqa chiziqlarni bildiradi.

Etim (past etim) va beva ayol (yuqori etim) xususiyatlaridan foydalanib, biz minimal chegarani belgilashimiz mumkin. Quyidagi misolda biz sahifa parchalanishi sodir bo'lgan paragrafning pastki yoki boshida kamida uchta satr qolishini ko'rsatamiz.

P (etimlar: 3; bevalar: 3;)

Qo'shimcha manbalar

Biz sizning saytingizdagi matn uchun chop etiladigan sahifa tanaffusidan foydalanish asoslarini ko'rib chiqdik va umid qilamizki, bu sizning saytingiz uchun uslublar haqida o'ylashga undaydi, shunda sizning kontentingiz ekranda ham, qog'ozda ham yaxshi ko'rinadi.

Tarjima - burch

Sahifalar bloki tarkibni o'z ichiga olgan sahifa maydonidan va sahifa maydonini o'rab turgan chegara maydonidan iborat. @Sahifa qoidasi hujjatni chop etishda ba'zi CSS xususiyatlarini o'zgartirish uchun ishlatiladi. Siz faqat elementning chekkalarini o'zgartirishingiz mumkin, shuningdek, sahifa tanaffuslarini belgilangan joyga o'rnatishingiz mumkin.

@sahifa (marj: 2in;)

@Sahifa qoidasi doirasida alohida hujjat chegaralarini belgilash mumkin, masalan, chekka-tepa, chekka-o'ng, chekka-pastki, chekka-chap:

2. Sahifalar tanaffuslari

Sahifa tanaffusini oldin sahifalarni ajratish, keyin va keyin sahifalarni ajratish xususiyatlarini boshqarish mumkin. Bu xususiyatlar pozitsiya xususiyati nisbiy yoki statik bo'lgan blok elementlariga qo'llaniladi.

sahifa tanaffusidan oldin
Qiymatlar:
avtomatik
har doim	Har doim element oldidan sahifa tanaffusini qo'shadi.
qochish	Iloji bo'lsa, tanaffusni element oldiga qo'yishni bekor qiladi.
chapda	Keyingi sahifa chap sahifa sifatida formatlanishi uchun element oldidan bir yoki ikkita sahifa tanaffusini qo'shadi. Element chap sahifaning yuqori qismidan boshlab chop etiladi, ya'ni. umurtqa pog'onasining chap tomonidagi sahifada. Ikki tomonlama bosib chiqarish uchun qog'oz varag'ining orqa tomonida chiqadi.
to'g'ri	Element oldidan bir yoki ikkita sahifa tanaffusini qo'shadi. Element o'ng chegaraning yuqori qismidan boshlab chop etiladi. Keyingi sahifa to'g'ri sahifa sifatida formatlanadi.
meros qilib olmoq

Sintaksis:

@media chop etish (h1 (sahifa uzilishidan oldin: har doim;))

sahifa tanaffusidan keyin
Qiymatlar:
avtomatik	Odatiy bo'lib, avtomatik sahifa tanaffuslarini o'rnatish.
har doim	Har doim elementdan keyin sahifa tanaffusini qo'shadi.
qochish	Iloji bo'lsa, elementdan keyin tanaffus qo'shilishini bekor qiladi.
chapda	Elementdan keyin bir yoki ikkita sahifa tanaffuslari qo'shiladi, shunda keyingi sahifa chap sahifa sifatida formatlanadi. Element chap sahifaning yuqori qismidan boshlab chop etiladi, ya'ni. umurtqa pog'onasining chap tomonidagi sahifada. Ikki tomonlama bosib chiqarish uchun qog'oz varag'ining orqa tomonida chiqadi.
to'g'ri	Elementdan keyin bir yoki ikkita sahifa tanaffuslari qo'shiladi, shunda keyingi sahifa to'g'ri sahifa sifatida formatlanadi. Element o'ng chegaraning yuqori qismidan boshlab chop etiladi.
meros qilib olmoq	Bu xususiyatni asosiy elementdan meros qilib oladi.