Asiakirjojen muotoilu tulostusta varten CSS: n avulla

Asiakirjojen muotoilu tulostusta varten CSS: n avulla

Jos olet koskaan tulostanut lippujen varaukset tai reittiohjeet hotellille verkosta, olet todennäköisesti ollut vähemmän vaikuttunut tuloksista. Saatat siis olla tietämätön siitä, että tulostetut asiakirjat voidaan muotoilla suunnilleen samalla tavalla kuin ne voidaan näyttää ruudulla CSS-tyylisivujen avulla.





Huolien erottaminen

CSS: n keskeinen etu on sisällön erottaminen esityksestä. Yksinkertaisimmillaan tämä tarkoittaa hyvin vanhanaikaisia ​​tyylimerkintöjä, kuten:



Heading

Käytämme semanttista merkintää:






Paitsi että tämä on paljon puhtaampaa, se tarkoittaa myös sitä, että esityksemme on erotettu sisällöstämme. Selaimet renderoivat h1 oletuksena suuret, lihavoidut tekstit, mutta voimme muuttaa tyyliä milloin tahansa tyylitaulukon avulla:

h1 { font-weight: normal; }

Keräämällä nämä tyylivakuutukset erilliseen tiedostoon ja viittaamalla kyseiseen tiedostoon HTML -dokumentistamme, voimme hyödyntää erottelua entistä paremmin. Tyylisivua voidaan käyttää uudelleen, ja voimme muuttaa yksittäistä tiedostoa milloin tahansa päivittääksemme muotoilun jokaisessa sitä käyttävässä asiakirjassa.



Sisältää tulostustyylisivun

Samalla tavalla kuin näytön tyylisivun sisällyttäminen, voimme määrittää tulostustyylisivun. Näytön tyylisivu sisältyy yleensä seuraavasti:


Kuitenkin lisäominaisuus, puoli , mahdollistaa kohdistamisen asiayhteyden perusteella, jossa asiakirja on muodostettu. Oletuksena edellinen elementti vastaa:




Tämä tarkoittaa sitä, että tyylitaulukkoa sovelletaan kaikkiin tietovälineisiin, joissa asiakirja on muodostettu. Media -attribuutti voi kuitenkin ottaa myös tulosteen ja näytön arvot:


Tässä esimerkissä print.css tyylitaulukkoa käytetään vain, kun asiakirja on tulostettu. Tämä on erittäin hyödyllinen mekanismi. Voimme koota kaikki yleiset tyylit (ehkä kirjasinperhe tai riviväli) tyylitaulukkoon, joka koskee kaikkia medioita, ja mediakohtaiset muotoilut yksittäisiin tyylitaulukoihin. Jälleen tämä on toinen tapa huolenaiheiden erottamiseen.



Muutamia esimerkkejä tyylivakuutuksista

Puhdas tausta

Et melkein varmasti halua tuhlata mustetta värillisen taustan tai taustakuvan tulostamiseen. Aloita nollaamalla näiden asiakirjan oletusarvot:

body {
background: white;
color: black;
}

Haluat ehkä myös estää taustakuvien tulostamisen - niiden pitäisi olla koristeellisia eikä siksi pakollinen osa sisältöäsi:

* {
background-image: none !important;
}

Aiheeseen liittyviä: Taustakuvan asettaminen CSS: ään

miksi tietokone jatkaa nukkumista?

Marginaalien hallinta

Toinen ilmeinen asia, joka on otettava huomioon tulostettaessa, on sivumarginaali. Vaikka CSS tarjoaa keinon marginaalin koon asettamiseen, muista, että selaimesi ja tulostimesi voivat myös vaikuttaa itse marginaaliasetuksiin.

Esimerkiksi Chromen tulostusvalintaikkunassa on marginaaliasetus, joka sisältää arvot, mukaan lukien ei mitään ja mukautettu joka ohittaa kaiken CSS: n kautta määritetyn:

Tästä syystä on suositeltavaa jättää marginaalipäätökset lukijan tehtäväksi julkisilla verkkosivuilla. Kuitenkin henkilökohtaiseen käyttöön tai oletusasettelun luomiseen tulostusmarginaalien asettaminen CSS: n kautta voi olla tarkoituksenmukaista. The @sivu sääntö mahdollistaa marginaalien asettamisen, ja sitä tulee käyttää seuraavasti:

@page {
margin: 2cm;
}

CSS: llä on myös valmiudet kehittyneempiin tulostusasetteluihin, kuten marginaalin vaihtelu sen mukaan, onko sivu pariton (oikea), parillinen (vasen) vai kansilehti.

paras ilmainen Windowsin tiedostonhallinta 2018

Valitettavasti tätä tuetaan huonosti - etenkin kansilehtivaihtoehto - mutta sitä voidaan käyttää vähäisessä määrin. Seuraavat tyylit tuottavat sivuja, joiden alareunat ovat hieman suuremmat kuin yläreunan ja hieman suuremmat marginaalit sivun ulkoreunassa kuin selkäranka:

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

Epäolennaisen sisällön piilottaminen

Kaikki sisältö ei sovellu asiakirjan painetuksi versioksi. Jos sivullasi on bannerinavigointi, mainoksia tai sivupalkki, haluat ehkä estää näiden tietojen näkymisen painetussa versiossa, esimerkiksi:

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

Hyperlinkit eivät ilmeisesti liity painettuun materiaaliin, joten haluat todennäköisesti poistaa kaikki tyylit, jotka erottavat ne ympäröivästä tekstistä:

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

Haluat kuitenkin silti, että lukijoilla on pääsy alkuperäisiin URL -osoitteisiin, ja yksinkertainen ratkaisu on lisätä ne automaattisesti linkitetyn tekstin jälkeen:

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

Tämä CSS antaa tuloksia, kuten seuraavat:

a [href]: jälkeen kohdistaa nimenomaan paikkaan sen jälkeen ( :jälkeen ) jokainen linkkielementti ( kohteeseen ), jolla on todella URL -osoite ( [href] ). The sisältö ilmoitus lisää tähän arvon href attribuutti suluissa. Huomaa, että muitakin tyylisääntöjä voidaan soveltaa hallitsemaan luodun sisällön näyttöä.

Sivunvaihtojen käsittely

Vältä sivunvaihdot jättämästä erillistä sisältöä tai rikkoa sitä hankalasti keskellä käyttämällä sivunvaihto-ominaisuuksia: sivunvaihto-ennen , sivunvaihto-jälkeen ja sivunvaihto . Esimerkiksi:

table { page-break-inside: avoid; }

Tämän pitäisi auttaa estämään taulukoita kattamasta useita sivuja, jos mikään niistä ei ole korkeampi kuin yksi sivu. Samoin:

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

Tämä tarkoittaa, että tällaiset otsikot aloittavat aina uuden sivun. Se voi kuitenkin aiheuttaa ongelmia, jos seuraat heti sivusi h1: tä h2: lla, koska h1 päätyy sivulle kokonaan. Voit välttää tämän peruuttamalla sivunvaihdon käyttämällä valitsinta, joka kohdistaa kyseiseen ilmentymään, esimerkiksi:

miten käynnistyslevy luodaan
h1 + h2 { page-break-before: avoid; }

Tulostustyylien tarkasteleminen

Kaikissa tapauksissa selaimesi ja käyttöjärjestelmäsi tulee tarjota esikatselutoiminto, usein osana vakiotulostusvalintaikkunaa.

Chrome -selain helpottaa tulostustyylien tarkistamista ja jopa virheenkorjaamista kehittäjätyökalujen kautta, kuten tämä esimerkki osoittaa, jossa on CV, jossa on tulostustyylisivu. Avaa ensin päävalikko ja valitse Lisää työkaluja jota seuraa Kehitystyökalut vaihtoehto:

Valitse avautuvasta uudesta paneelista Valikko , sitten Lisää työkaluja , jonka jälkeen Renderöinti :

Vieritä sitten alas kohtaan Jäljittele CSS -mediatyyppiä asetus. Avattavasta valikosta voit vaihtaa asiakirjan tulostus- ja näyttönäkymien välillä:

Tulostustyylisivun emuloinnissa standardi Tyyli -selain on käytettävissä live -tyylin sääntöjen tarkastamiseen ja muuttamiseen. Muista, että tulostuksen emulointi näytöllä ei edelleenkään ole 100% tarkka. Selain ei tiedä mitään paperikoosta ja @sivu sääntöä ei voi jäljitellä.

Tulostaminen PDF -tiedostoon

Nykyaikaisten käyttöjärjestelmien kätevä ominaisuus on mahdollisuus tulostaa PDF -tiedostoon. Käytännössä kaikki, mitä voit tulostaa, voidaan sen sijaan lähettää PDF -tiedostoon - ei mikään yllätys, koska PDF -tiedoston on tarkoitus edustaa tulostettua asiakirjaa.

Tämä tekee HTML: stä yhdessä tulostustyylisivun kanssa erinomaisen keinon luoda laadukas asiakirja, joka voidaan lähettää liitteenä ja tulostaa.

Tulostustyylisivun avulla voit luoda laadukkaita asiakirjoja, kuten CV: stä resepteihin tai tapahtumailmoituksiin. Verkkosivut näyttävät tyypillisesti rumailta ja sisältävät ei -toivottuja yksityiskohtia tulostettaessa, mutta pieni määrä tyylisäätöjä voi parantaa dramaattisesti tulostustuloksia. Lopullisten tulosten tallentaminen PDF -tiedostona on nopea tapa luoda houkuttelevia, ammattimaisia ​​asiakirjoja.

Jaa Jaa Tweet Sähköposti Web -sivujen tulostaminen PDF -muotoon Microsoft Edgen avulla

Oletko koskaan törmännyt mielenkiintoiseen artikkeliin, jonka halusit tallentaa myöhempää käyttöä varten? Voit tallentaa PDF -tiedostona Edgen avulla kolmessa helpossa vaiheessa.

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • Tulostus
  • CSS
Kirjailijasta Bobby Jack(58 artikkelia julkaistu)

Bobby on teknologian harrastaja, joka työskenteli ohjelmistokehittäjänä lähes kaksi vuosikymmentä. Hän on intohimoinen pelaamisesta, työskentelee Switch Editor Magazine -lehden arvostelutoimittajana ja on upotettu kaikkeen verkkojulkaisemiseen ja -kehitykseen.

Lisää Bobby Jackilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi