Paggamit ng CSS upang Mag-format ng Mga Dokumento para sa Pag-print

Paggamit ng CSS upang Mag-format ng Mga Dokumento para sa Pag-print

Kung nag-print ka na ba ng mga pagpapareserba ng ticket o direksyon patungo sa isang hotel mula sa web, marahil ay mas mababa ka sa paghanga sa mga resulta. Maaari mong, samakatuwid, ay hindi magkaroon ng kamalayan na ang naka-print na mga dokumento ay maaaring istilo sa parehong paraan na maaari silang on-screen, gamit ang Cascading Style Sheets (CSS).





Paghihiwalay ng mga alalahanin

Ang isang pangunahing pakinabang ng CSS ay ang paghihiwalay ng nilalaman mula sa pagtatanghal. Sa pinakasimpleng mga termino, nangangahulugan ito sa halip na napaka makalumang istilong markup tulad ng:



Heading

Gumagamit kami ng marka ng semantiko:






Hindi lamang ito mas malinis, nangangahulugan din ito na ang aming pagtatanghal ay nahiwalay mula sa aming nilalaman. Nag-render ang mga browser h1 mga elemento bilang malaki, naka-bold na teksto bilang default, ngunit maaari naming baguhin ang istilong iyon sa anumang oras gamit ang isang styleheet:

h1 { font-weight: normal; }

Sa pamamagitan ng pagtipon ng mga istilong iyon ng deklarasyon sa isang magkakahiwalay na file, at pagsangguni sa file na iyon mula sa aming dokumento sa HTML, maaari naming mas mahusay na magamit ang paghihiwalay. Maaaring magamit muli ang style sheet, at mababago namin ang solong file anumang oras upang mai-update ang pag-format sa bawat dokumento na gumagamit nito.



Kasama ang isang Print Style Sheet

Sa isang katulad na paraan sa pagsasama ng isang sheet ng istilo ng screen, maaari naming tukuyin ang isang sheet ng estilo para sa pag-print. Karaniwang kasama ang isang sheet ng istilo ng screen tulad nito:


Gayunpaman, isang karagdagang katangian, kalahati , pinapayagan ang pag-target batay sa konteksto kung saan nai-render ang dokumento. Bilang default, ang nakaraang elemento ay katumbas ng:




Nangangahulugan ito na ang styleheet ay mailalapat para sa anumang daluyan na nai-render ang dokumento. Gayunpaman, ang katangian ng media ay maaari ring kumuha ng mga halaga ng pag-print at screen:


Sa halimbawang ito, ang print.css gagamitin lamang ang mga styleheet kapag na-print ang dokumento. Ito ay isang napaka kapaki-pakinabang na mekanismo. Maaari naming tipunin ang lahat ng karaniwang pag-istilo (marahil ng font ng pamilya o spacing ng linya) sa isang styleheet na nalalapat sa lahat ng media, at pag-format na tukoy sa media sa mga indibidwal na styleheet. Muli, ito ay isa pang paggamit ng paghihiwalay ng mga alalahanin.



Ilang Halimbawang Pagpapahayag ng Estilo

Isang Malinis na Background

Halos tiyak na ayaw mong sayangin ang pag-print ng tinta ng isang makulay na background o isang imahe sa background. Magsimula sa pamamagitan ng pag-reset ng anumang mga default para sa mga halagang ito na maaaring maitakda sa iyong dokumento:

body {
background: white;
color: black;
}

Maaari mo ring pigilan ang anumang mga larawan sa background mula sa pag-print — dapat itong pandekorasyon at, samakatuwid, hindi isang kinakailangang bahagi ng iyong nilalaman:

* {
background-image: none !important;
}

Kaugnay: Paano Magtakda ng isang Imahe sa Background sa CSS

kung paano gawing isang monitor ang isang laptop screen

Pagkontrol sa Mga margin

Ang isa pang halatang punto upang isaalang-alang patungkol sa pag-print ay ang margin ng pahina. Habang ang CSS ay nagbibigay ng isang paraan ng pagtatakda ng laki ng margin, dapat mong tandaan na ang iyong browser at printer ay maaari ring maka-impluwensya sa mga setting ng margin mismo.

Halimbawa, sa naka-print na dialog ng Chrome, mayroong isang setting ng margin na may kasamang mga halaga wala at pasadya na kung saan ay i-override ang anumang tinukoy sa pamamagitan ng CSS:

Para sa kadahilanang ito, inirerekumenda na mag-iwan ng mga pagpapasya sa margin sa mambabasa sa mga pampublikong webpage. Gayunpaman, para sa personal na paggamit, o para sa paglikha ng isang default na layout, ang pag-set ng mga margin sa pag-print sa pamamagitan ng CSS ay maaaring angkop. Ang @ pahina Pinapayagan ng panuntunan na maitakda ang mga margin, at dapat gamitin tulad ng sumusunod:

@page {
margin: 2cm;
}

May kakayahan din ang CSS para sa mas sopistikadong mga layout ng pag-print, tulad ng pag-iiba ng margin ayon sa kung ang pahina ay isang kakaibang may bilang (kanan), pantay na numero (kaliwa), o ang pahina ng pabalat.

kung paano gumawa ng isang lutong bahay na antena sa telebisyon

Sa kasamaang palad, hindi ito suportado nang mahina — lalo na ang pagpipilian sa pahina ng pabalat — ngunit maaari itong magamit sa kaunting lawak. Ang mga sumusunod na istilo ay gumagawa ng mga pahina na may bahagyang mas malaking mga gilid sa ibaba kaysa sa itaas at bahagyang mas malaking mga gilid sa panlabas na gilid ng pahina kaysa sa gulugod:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

Itinatago ang Hindi Nauugnay na Nilalaman

Hindi lahat ng nilalaman ay magiging angkop para sa isang naka-print na bersyon ng iyong dokumento. Kung may kasamang pag-navigate sa banner, mga ad, o isang sidebar ang iyong pahina, baka gusto mong pigilan ang mga detalyeng iyon mula sa paglitaw sa naka-print na bersyon, halimbawa:

#contents, div.ad { display: none; }

Malinaw na hindi nauugnay ang mga hyperlink sa naka-print na materyal, kaya malamang na gugustuhin mong alisin ang anumang mga istilo na pinag-iiba ang mga ito mula sa nakapalibot na teksto:

a { text-decoration: none; color: inherit; }

Gayunpaman, baka gusto mo pa ring magkaroon ng access ang mga mambabasa sa mga orihinal na URL, at ang isang direktang solusyon ay awtomatikong ipasok ang mga ito pagkatapos ng naka-link na teksto:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

Nagbibigay ang CSS na ito ng mga resulta tulad ng sumusunod:

a [href]: pagkatapos partikular na target ang posisyon pagkatapos ( : pagkatapos ) bawat elemento ng link ( sa ) na talagang may isang URL ( [href] ). Ang nilalaman idineklara dito ang halaga ng href katangian sa pagitan ng mga braket. Tandaan na ang ibang mga patakaran sa istilo ay maaaring mailapat upang makontrol ang pagpapakita ng nabuong nilalaman.

Mga Paghiwalay ng Pahina sa Paghawak

Upang maiwasan ang mga pag-break ng pahina na nag-iiwan ng nakahiwalay na nilalaman, o masira itong awkwardly sa gitna, gamitin ang mga pag-aari ng pahina-break: page-break-before , page-break-after at pahina-break-inside . Halimbawa:

table { page-break-inside: avoid; }

Makakatulong ito upang mapigilan ang mga talahanayan mula sa paglawak ng maraming mga pahina, na nagbibigay ng walang mas mataas kaysa sa isang solong pahina. Katulad nito:

h1, h2 { page-break-before: always; }

Nangangahulugan ito na ang mga nasabing heading ay laging nagsisimula ng isang bagong pahina. Maaari itong maging sanhi ng mga problema kung agad mong susundan ang h1 ng iyong pahina sa isang h2, bagaman, dahil ang h1 ay magtatapos sa isang pahina nang mag-isa. Upang maiwasan ito, kanselahin lamang ang break ng pahina gamit ang isang tagapili na nagta-target sa tukoy na halimbawa, halimbawa:

magandang pelikula upang makatulog sa
h1 + h2 { page-break-before: avoid; }

Pagtingin sa Mga Estilo ng Pag-print

Sa lahat ng mga kaso, ang iyong browser at operating system ay dapat magbigay ng isang tampok na pag-preview ng preview, madalas bilang bahagi ng karaniwang pag-print ng dayalogo.

Ginagawang mas maginhawa ng browser ng Chrome na suriin at i-debug din ang iyong mga istilo ng pag-print sa pamamagitan ng Mga Tool ng Developer, tulad ng ipinakita sa halimbawang ito na nagpapakita ng isang CV na may sheet na naka-print na sheet. Una, buksan ang pangunahing menu at piliin Marami pang Mga Tool sinundan ng Mga Tool ng Developer pagpipilian:

Mula sa lilitaw na bagong panel, piliin ang Menu , kung gayon Marami pang mga tool , sinundan ng Pag-render :

Pagkatapos mag-scroll pababa sa Gayahin ang uri ng CSS media setting Pinapayagan ka ng dropdown na magpalipat-lipat sa pagitan ng mga pag-print at pagtingin sa screen ng iyong dokumento:

Kapag tinutularan ang print styleheet, ang pamantayan Browser ng Mga Estilo ay magagamit upang siyasatin at baguhin ang mga patakaran sa live style. Tandaan na ang pagtulad sa print output sa isang screen ay hindi pa rin 100% tumpak. Walang alam ang browser tungkol sa laki ng papel, at ang @ pahina hindi maaaring tularan ang panuntunan.

Pagpi-print sa isang PDF

Ang isang madaling gamiting tampok ng mga modernong operating system ay ang kakayahang mag-print sa isang PDF file. Bilang bisa, ang anumang mai-print mo ay maaari, sa halip, maipadala sa isang PDF file — walang tunay na sorpresa dahil ang isang PDF file ay dapat na kumakatawan sa isang naka-print na dokumento, kung tutuusin.

Ginagawa nitong HTML, kasama ng isang print styleheet, isang mahusay na paraan para sa paglikha ng isang de-kalidad na dokumento na maaaring maipadala bilang isang kalakip, pati na rin naka-print.

Maaari kang gumamit ng isang print styleheet upang lumikha ng mga de-kalidad na dokumento, kasama ang anumang mula sa iyong CV hanggang sa mga recipe o anunsyo ng kaganapan. Karaniwan ang hitsura ng mga pahina ng web na pangit at naglalaman ng mga hindi nais na detalye kapag naka-print, ngunit ang isang maliit na bilang ng mga pag-aayos ng istilo ay maaaring kapansin-pansing mapabuti ang mga resulta ng pag-print. Ang pag-save sa huling resulta bilang isang PDF ay isang mabilis na paraan upang lumikha ng kaakit-akit, propesyonal na mga dokumento.

Magbahagi Magbahagi Mag-tweet Email Paano Mag-print ng Mga Pahina sa Web sa PDF Gamit ang Microsoft Edge

Naranasan mo na ba ang isang nakawiwiling artikulo na nais mong i-save para sa ibang pagkakataon? Kaya, maaari kang makatipid bilang PDF na may Edge sa tatlong madaling hakbang.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • Pagpi-print
  • CSS
Tungkol sa May-akda Bobby Jack(58 Mga Artikulo Na-publish)

Si Bobby ay isang mahilig sa teknolohiya na nagtrabaho bilang isang developer ng software sa loob ng halos dalawang dekada. Masigasig siya sa paglalaro, nagtatrabaho bilang Review Editor sa Switch Player Magazine, at nahuhulog sa lahat ng aspeto ng online na pag-publish at pag-unlad sa web.

Higit pa Mula kay Bobby Jack

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe