Men unutgan CSS uslublarini chop eting. CSS3 yordamida chop etish uchun sahifa tanaffusi havolalarning URL manzillarini chop etish

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

Ko'p qatorli HTML jadvalini chop etishni talab qiladigan loyiham bor.

Mening muammom - jadvalning bir nechta sahifalarda chop etilishi. Ba'zan chiziqni yarmiga bo'lib, uni o'qib bo'lmaydi, chunki yarmi sahifaning chetida, qolgan qismi esa keyingi sahifaning yuqori qismida bosiladi.

Men o'ylayotgan yagona ishonchli yechim - jadval o'rniga murakkab DIV'lardan foydalanish va kerak bo'lganda sahifalarni uzishga majburlash ... lekin barcha o'zgarishlarni ko'rib chiqishdan oldin bu erda avvalroq so'rashim mumkin deb o'yladim.

Ushbu CSS xususiyatlaridan foydalaning:

Sahifa-to'liq-keyin sahifa-break-oldin

Masalan:

@media print (jadval (sahifadan keyin: har doim)) ....

Bu yerdagi javoblarning hech biri Chrome'da men uchun ishlamadi. GitHub-dagi AAverin buning uchun foydali Javascript yaratdi va u men uchun ishladi:

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

Eslatma: Sahifalar uzilishidan foydalanilganda: har doim teg uchun, u jadvalning oxirgi bitidan keyin sahifa tanaffusini yaratadi va har safar butunlay bo'sh sahifa yaratadi! Buni tuzatish uchun uni page-break-after: auto-ga o'zgartirish kifoya. U to'g'ri buziladi va ortiqcha bo'sh sahifa yaratmaydi.

@media chop etish (jadval (sahifani buzish:avtomatik ) tr (sahifani buzish:oldini olish; sahifani buzish:avtomatik ) td (sahifani buzishdan keyin:avoid; sahifani buzish:avtomatik ) thead (displey:jadval-sarlavha-guruhi) tfoot (displey:jadval-alt-kolon-guruh)) ....

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

Tr ( displey: jadval-qator-guruhi; sahifa-buzilish-ichkarida:qochish; sahifa-uzilish-keyin:avto; )

HTML tuzilishi edi:

...

Mening holimda thead tr bilan ba'zi qo'shimcha muammolar bor edi, lekin bu jadval qatorini saqlashning asl muammosini hal qildi.

Sarlavha muammolari tufayli men bilan yakunlandim:

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

Bu qatorlarning uzilishiga to'sqinlik qilmadi; faqat har bir hujayraning mazmuni.

Men @vicenteherrera ning yondashuvi, ba'zi o'zgarishlar bilan yakunlandim (bu 3-bootstrap bo'lishi mumkin).

Asosan; biz tr s yoki td ni sindira olmaymiz, chunki ular blok darajasidagi elementlar emas. Shunday qilib, biz har biriga div ni kiritamiz va divlarga sahifa-break-* qoidalarini qo'llaymiz. Ikkinchidan, har qanday uslub artefaktlarini qoplash uchun biz ushbu divlarning har birining tepasiga biroz to'ldirish qo'shamiz.

@media print ( /* tr ni yarmiga kesishdan saqlaning */ th div, td div (margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Har bir tr va td" kontentini div ichiga oʻrash // (todo: mantiqni qoʻshing, shuning uchun biz buni faqat chop etishda qilamiz) $("table tbody th, table tbody td").wrapInner(" ");)))

Kiritilgan ba'zi jitterni qoplash uchun qo'shimchalarga tuzatishlar va tuzatishlar kerak edi (menimcha, yuklash tizimidan). Men bu savolga boshqa javoblardan yangi yechim taqdim etayotganimga amin emasman, lekin bu kimgadir yordam berishi mumkin.

Men yaqinda bu muammoni yaxshi yechim bilan hal qildim.

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

Funktsiya Print())( $(".tableToPrint td, .tableToPrint th").each(funksiya())( $(bu).css("kenglik", $(bu).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Jozibasi kabi ishlaydi!

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

Shunday qilib, men bir oz hiyla-nayrangni sinab ko'rdim va u ishlaydi:

uslub bilan tfoot: pozitsiyasi: sobit; pastki: 0px; pozitsiyasi: qattiq; pastki: 0px; oxirgi sahifaning pastki qismiga joylashtiriladi, lekin agar pastki kolontiter juda baland bo'lsa, u jadval mazmunini qoplaydi.

tfoot faqat bilan: displey: table-footer-group; bir-biriga mos kelmaydi, lekin oxirgi sahifaning pastki qismida emas...

Keling, ikki fut qo'yaylik:

TFOOT.placer (displey: jadval-alt-bilgi-guruhi; balandlik: 130px; ) TFOOT.contenter (displey: jadval-alt-bilgi-guruhi; joylashuv: qattiq; pastki: 0px; balandlik: 130px; ) bu yerda sizning uzun matningiz yoki baland tasviringiz

Ulardan biri oxirgi bo'lmagan sahifalarda, ikkinchisi esa shaxsiy altbilgida joy ajratadi.

Sinov jadvali (sahifani buzish-ichkarida:avtomatik ) tr (sahifani sindirish-ichkarida:oldini olish; sahifani buzishdan keyin:avtomatik ) thead (displey:jadval-sarlavha-guruh) tfoot (displey:jadval-footer-guruh )

sarlavha

eslatmalar

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

Ko'p qatorli HTML jadvalini chop etishni talab qiladigan loyiham bor.

Ushbu CSS xususiyatlaridan foydalaning:

Sahifa-to'liq-keyin sahifa-break-oldin

Masalan:

@media print (jadval (sahifadan keyin: har doim)) ....

Bu yerdagi javoblarning hech biri Chrome'da men uchun ishlamadi. GitHub-dagi AAverin buning uchun foydali Javascript yaratdi va u men uchun ishladi:

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

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

Tr ( displey: jadval-qator-guruhi; sahifa-buzilish-ichkarida:qochish; sahifa-uzilish-keyin:avto; )

HTML tuzilishi quyidagicha edi:

...

Mening holimda thead tr bilan ba'zi qo'shimcha muammolar bor edi, lekin bu jadval qatorini saqlashning asl muammosini hal qildi.

Sarlavha muammolari tufayli men bilan yakunlandim:

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

Bu qatorlarning uzilishiga to'sqinlik qilmadi; faqat har bir hujayraning mazmuni.

Men @vicenteherrera ning yondashuvi, ba'zi o'zgarishlar bilan yakunlandim (bu 3-bootstrap bo'lishi mumkin).

Men yaqinda bu muammoni yaxshi yechim bilan hal qildim.

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

Funktsiya Print())( $(".tableToPrint td, .tableToPrint th").each(funksiya())( $(bu).css("kenglik", $(bu).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Jozibasi kabi ishlaydi!

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

Shunday qilib, men bir oz hiyla-nayrangni sinab ko'rdim va u ishlaydi:

tfoot faqat bilan: displey: table-footer-group; bir-biriga mos kelmaydi, lekin oxirgi sahifaning pastki qismida emas...

Keling, ikki fut qo'yaylik:

Ulardan biri oxirgi bo'lmagan sahifalarda, ikkinchisi esa shaxsiy altbilgida joy ajratadi.

sarlavha

eslatmalar

Bu tvit meni o'ziga tortdi. Men veb-sahifalarni chop etish uchun optimallashtirganimni yoki hatto printerga qanday chiqarilishini tekshirganimni endi eslay olmasligimni birdan angladim.

Veb-ishlab chiqishning asosiy yo'nalishi elektron versiyalari saytlar. Sahifalar bir nechta brauzerlarda tekshirilishi, turli oyna o'lchamlari bo'yicha sinovdan o'tkazilishi kerak ... Printerlarga kim g'amxo'rlik qiladi? Yoki men chop etish uslublarini unutib qo'ydim, chunki men sahifalarning qog'oz nusxalarini kamdan-kam hollarda o'zim qilaman. Qanday bo'lmasin, men vaziyatni zudlik bilan tuzatish kerakligini his qildim.

Veb-sahifaning bosma nusxasi elektron versiyasi kabi mavjud bo'lish huquqiga ega. Va agar biz materiallarimizni iloji boricha qulayroq qilishga intilsak, qog'oz ommaviy axborot vositalarini e'tiborsiz qoldirmasligimiz kerak. Bundan tashqari, siz foydalanuvchilar va ularning xatti-harakatlari haqida taxmin qilmasligingiz kerak. Odamlar hali ham printerlarda veb-sahifalarni chop etishadi. Maqolalar yoki blog postlari, retseptlar mavjud sahifalar, aloqa ma'lumotlari, yo'nalishlar yoki ro'yxatlar haqida o'ylang. Ertami-kechmi, kimdir siz Internetga joylashtirgan narsangizni chop etishga harakat qiladi.

“Inklyuziv dizayn naqshlari” kitobi muallifi Haydon Pikering bu haqda shunday deydi: “Men uzoq vaqtdan beri uy printerlaridan foydalanmadim. Gap shundaki, siz chop etishni boshlaganingizdan keyin taxminan o'n daqiqadan so'ng ular buzilib ketganini his qilaman. Lekin men hamma narsa emasman."

Agar siz ham men kabi bosma uslublarga yetarlicha e'tibor bermaganingizni tushunsangiz, mening hikoyam sizga yaxshi xizmat qiladi va xotirangizni tezda yangilashga yordam beradi deb umid qilaman. Agar siz hech qachon printerlar uchun veb-sahifalarni optimallashtirmagan bo'lsangiz, mening foydali CSS fokuslari to'plamim sizni boshlashga yordam beradi.

1. CSS Chop etish uslublaridan foydalanish Chop etish uslublarini sahifangizga kiritishning eng yaxshi usuli bu asosiy CSS faylingizda @media qoidasini e'lon qilishdir.

Body (shrift o'lchami: 18px; ) @media print ( /* chop etish uslublari shu yerda */ body (shrift o'lchami: 28px; ) )
Shu bilan bir qatorda, siz chop etish uslublarini alohida faylga qo'yishingiz va uni HTML-ga kiritishingiz mumkin, ammo bu yondashuv bilan sahifani yuklashda sizga qo'shimcha so'rov kerak bo'ladi.

2. Test qanday baholanadi tashqi ko'rinish veb-sahifa chop etishga tayyormi? Har bir uslubni o'zgartirgandan so'ng uni qog'ozga tushirish har kimga tushunarli emas Eng yaxshi qaror. Yaxshiyamki, brauzer imkoniyatlari sahifalarning bosma versiyalarini "qog'ozsiz" tekshirish uchun etarli.

Brauzerga qarab, siz sahifani PDF-ga eksport qilishingiz mumkin, funksiyadan foydalaning oldindan ko'rish yoki hatto sahifani to'g'ridan-to'g'ri veb-brauzerda disk raskadrovka qiling.

Firefox-da chop etish uslublarini disk raskadrovka qilish uchun Shift + F2 klaviatura yorlig'i yordamida yoki Ishlab chiqish → Dasturchilar paneli menyu buyrug'ini bajarish orqali Dasturchilar panelini oching. Kirish buyruq qatori Oynaning pastki qismida joylashgan bo'lib, quyidagilar: media taqlid chop etish , Enter tugmasini bosib yozuvni yakunlang. Faol yorliq siz sahifani yopguningizcha yoki yangilamaguningizcha uning media turi chop etilgandek ishlaydi.

Firefox-da emulyatsiyani chop etish

Chrome ham shunga o'xshash xususiyatga ega. Tuzuvchi vositalarini oching, buning uchun MacOS-da siz CMD + Opt + I, Windowsda - Ctrl + Shift + I tugmalar birikmasidan foydalanishingiz yoki menyu buyrug'ini bajarishingiz mumkin. Qo'shimcha vositalar→ Ishlab chiquvchi vositalari. Shundan so'ng, render panelini oching. Buning usullaridan biri Konsol panelini ochish uchun Esc tugmasini bosing va keyin Rendering panelini ochish uchun menyudan foydalaning. Renderlash panelida CSS mediaga taqlid qilish bayrog'ini o'rnating va Chop etish-ni tanlang.

Chrome brauzerida emulyatsiyani chop etish

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

3. Mutlaq o'lchov birliklari Mutlaq o'lchov birliklari sahifalarning ekranli versiyalari uchun juda mos kelmaydi, ammo chop etish uchun ular sizga kerak bo'lgan narsadir. Chop etish uslublarida bu mutlaqo xavfsizdir, bundan tashqari sm, mm, in, pt yoki kompyuter kabi mutlaq o'lchov birliklaridan foydalanish tavsiya etiladi.

Bo'lim (pastki cheti: 2 sm; )

4. Sahifa xususiyatlari @page qoidasidan sahifa xususiyatlarini, masalan, ularning oʻlchami, yoʻnalishi va chekkalarini boshqarish uchun foydalanishingiz mumkin. Bu, aytaylik, barcha chop etilgan sahifalar bir xil chekkalarga ega bo'lishi kerak bo'lganda juda qulay bo'ladi.

@media print ( @sahifa ( hoshiya: 1 sm; ) )
@page qoidasi Paged Media Module standartining bir qismi bo‘lib, u chop etish uchun birinchi sahifani tanlash, sozlash kabi ko‘plab ajoyib narsalarni taklif etadi. bo'sh sahifalar, sahifaning burchaklaridagi elementlarni joylashtirish va. U hatto kitoblarni chop etishga tayyorlash uchun ham ishlatilishi mumkin.

5. Sahifa uzilishlarini boshqarish Chop etilgan varaqlar, veb-sahifalardan farqli o'laroq, cheksiz bo'lmaganligi sababli, veb-sahifalarning mazmuni ertami-kechmi bir varaqda uzilib, keyingisida davom etadi. Sahifa tanaffuslarini boshqarish uchun beshta xususiyat mavjud: Elementdan oldin sahifa uzilishi Agar element har doim sahifa boshida paydo boʻlishini istasangiz, page-break-befor xususiyatidan foydalanib, undan oldin sahifa tanaffusini majburlashingiz mumkin.

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

▍Elementdan keyin sahifa uzilishi Page-break-after xususiyati elementdan keyin majburiy sahifa uzilishini o‘rnatish imkonini beradi. Ushbu xususiyatdan foydalanib, siz buzilishning oldini olishingiz mumkin.

H2 (sahifadan keyin: har doim; )

▍Element ichidagi sahifani sindirish Agar elementni ikki sahifaga boʻlishdan qochish kerak boʻlsa, page-break-inside xususiyati juda qoʻl keladi.

Ul (sahifani buzish: oldini olish; )

▍Yuqori va pastki osilgan chiziqlar Ba'zan sahifalarni uzishga majburlashning hojati yo'q, lekin siz sahifa chegaralarida paragraflar chiqishini nazorat qilishni xohlaysiz.

Misol uchun, agar joriy sahifadagi paragrafning oxirgi qatori mos kelmasa, keyingi sahifada ushbu paragrafning oxirgi ikki qatori chop etiladi. Buning sababi, buni boshqaradigan xususiyat (bevalar, ya'ni "yuqori osilgan qatorlar") sukut bo'yicha 2 ga o'rnatilgan. Buni o'zgartirish mumkin.

P ( bevalar: 4; )
Agar boshqa vaziyat yuzaga kelsa va paragrafning faqat bitta satri joriy sahifaga to'g'ri kelsa, butun paragraf keyingi sahifada chop etiladi. Pastki osilgan chiziqlar (etimlar) uchun mas'ul bo'lgan mulk ham sukut bo'yicha 2 ga o'rnatiladi.

P (etimlar: 3;)
Yuqoridagi kodning mohiyati shundan iboratki, butun paragraf keyingi sahifaga o'tmasligi uchun joriy sahifaga kamida uchta qator to'g'ri kelishi kerak.

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

*, *: oldin, *: keyin, *: birinchi harf, p: birinchi qator, div: birinchi qator, blok tirnoq: birinchi qator, li: birinchi qator ( fon: shaffof !muhim; rang: #000 !muhim; quti-soya: hech !muhim; matn-soya: hech !muhim; )
Aytgancha, chop etish uchun CSS uslublari!muhim direktivasi mutlaqo normal bo'lgan bir nechta istisnolardan biridir;)

7. Keraksiz tarkibni olib tashlash Siyohni isrof qilmaslik uchun sahifaning bosma versiyasidan ulkan chiroyli slaydlar, reklama, sayt navigatsiya vositalari va boshqalar kabi keraksiz narsalarni olib tashlashingiz kerak. Buni keraksiz elementlar uchun displey xususiyatini none ga o'rnatish orqali amalga oshirish mumkin. Siz sahifaning faqat asosiy mazmunini ko'rsatishni va qolgan hamma narsani yashirishni to'g'ri deb topishingiz mumkin:

Tana > *:not(asosiy) (ekran: hech biri; )

8. Bog'lanish manzillarini ko'rsatish Havolalar, odatda, veb-sahifalarda topilganidek, hujjatning qog'oz versiyasini o'qiydigan kishi ular qayerga olib borishini bilmasa, chop etilganda mutlaqo foydasiz bo'ladi.

Matn ko'rinishidan keyin havola manzillarini ko'rsatish uchun quyidagi uslubdan foydalaning:

Javob: keyin (tarkib: "(" attr(href) ")"; )
Albatta, bu yondashuv bilan ko'p keraksiz narsalar "ochiladi". Masalan, nisbiy havolalar, chop etilgan sahifa bilan bir xil saytdagi mutlaq havolalar, langar havolalari va boshqalar. Chop etilgan varaqni chalkashtirmaslik uchun quyidagi kabi narsalarni ishlatish yaxshiroqdir:

A:not():keyin (tarkib: " (" attr(href) ")"; )
Bu aqldan ozgan ko'rinadi, albatta. Shunday qilib, men ma'nosini tushuntiraman ushbu qoidadan oddiy ingliz tilida: "Http bilan boshlanadigan, lekin mywebsite.com ni o'z ichiga olmagan atributga ega bo'lgan har bir havola yonida href atributining qiymatini ko'rsating."

9. Qisqartmalarga tushuntirish Matndagi qisqartmalar tegga joylashtirilishi, ularning tushuntirishlari esa sarlavha atributiga kiritilishi kerak. Agar siz qisqartmalarni shu tarzda formatlasangiz, ularning ma'nolarini chop etilgan sahifada ko'rsatish juda oson:

Qisqartirish: keyin ( mazmuni: " (" attr(title) ")"; )

10. Fonni majburiy chop etish Odatda brauzerlar chop etish uchun sahifa yaratishda fon rangini ko‘rsatmaydi va fon rasmlari, agar ular buni aniq ko'rsatmasalar. Biroq, ba'zida bularning barchasi chop etilishi kerak. Standartlashtirilmagan chop etish rangini sozlash xususiyati bu erda bizga yordam beradi, bu sizga ba'zi brauzerlar uchun standart sozlamalarni bekor qilish imkonini beradi.

Sarlavha (-webkit-print-color-sozlash: aniq; chop-rang-sozlash: aniq; )

11. Media so'rovlari Agar siz quyidagiga o'xshash media so'rovlarini yozsangiz, CSS qoidalarini yodda tuting. shunga o'xshash so'rovlar sahifaning chop etilgan versiyasiga ta'sir qilmaydi.

@media ekrani va (min-kengligi: 48em) ( /* faqat ekran */ )
Nega bunday? Gap shundaki, CSS qoidalari faqat min-kenglik qiymati 48em bo'lsa va media turi ekran bo'lsa qo'llaniladi. Agar siz ushbu media so'rovidan qutulsangiz kalit so'z ekran , keyin u faqat min-kenglik qiymati bilan cheklanadi.

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

12. Xaritalarni chop etish Firefox va Chrome-ning joriy versiyalari xaritalarni chop etishi mumkin, ammo, masalan, Safari buni qila olmaydi. Kartalarni chop etishda nima qilish kerak? Umumjahon variantlardan biri dinamik xaritalar o'rniga statik xaritalardan foydalanishdir.

Xarita (kengligi: 400px; balandlik: 300px; fon tasviri: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap=revisual&visual" "); -webkit-print-color-sozlash: aniq; chop-rang-sozlash: aniq; )

13. QR kodlari Muhim havolalarni o'z ichiga olgan QR kodlarini chop etish veb-sahifalarning qog'oz versiyalaridan foydalanish qulayligini sezilarli darajada yaxshilaydi. Mana, The Smashing Magazine jurnalidan parcha Foydali maslahatlar bu mavzu haqida. Ulardan biri ularning manzillarini bosma sahifalarga QR kodlar ko'rinishida kiritishdir. Natijada, foydalanuvchi brauzerda chop etilgan sahifani ochish uchun klaviaturada uning to'liq manzilini yozishi shart bo'lmaydi.14. Optimallashtirilmagan sahifalarni chop etish haqida Veb-sahifalarni chop etish mavzusini o'rganar ekanman, men buni aniqladim ajoyib vosita, bu sizga optimallashtirilmagan sahifalarni chop etish uchun qulay tarzda tayyorlash imkonini beradi. Printliminator-dan foydalanish