Tulosta sivu CSS
- Käännös
3. Absoluuttiset mittayksiköt
Absoluuttiset yksiköt eivät sovellu kovin hyvin sivujen näyttöversioihin, mutta tulostukseen ne ovat juuri sitä, mitä tarvitset. Painatustyyleissä se on täysin turvallista, ja lisäksi on suositeltavaa käyttää absoluuttisia mittayksiköitä, kuten cm, mm, in, pt tai pc.Osio ( marginaali-ala: 2 cm; )
4. Sivun ominaisuudet
@page-säännön avulla voit hallita sivun ominaisuuksia, kuten niiden kokoa, suuntaa ja marginaaleja. Tämä on erittäin kätevää esimerkiksi silloin, kun tarvitset kaikilla tulostetuilla sivuilla samat marginaalit.@mediatulostus ( @sivu ( marginaali: 1cm; ) )
@page-sääntö on osa Paged Media Module -standardia, joka tarjoaa paljon hienoja asioita, kuten ensimmäisen tulostettavan sivun valitseminen ja mukauttaminen tyhjiä sivuja, sijoitteluelementit sivun kulmiin ja . Sitä voidaan käyttää jopa kirjojen valmistukseen painamista varten.
5. Sivukatkojen hallinta
Koska painetut arkit, toisin kuin web-sivut, eivät ole loputtomia, web-sivujen sisältö ennemmin tai myöhemmin päättyy yhdelle paperiarkille ja jatkuu seuraavalle. Sivunvaihtojen hallintaan on viisi ominaisuutta.▍Sivunvaihto ennen elementtiä
Jos haluat elementin olevan aina sivun alussa, voit pakottaa sen eteen sivunvaihdon käyttämällä page-break-befor-ominaisuutta.Osio ( sivunvaihto ennen: aina; )
▍Sivunvaihto elementin jälkeen
Sivunvaihdon jälkeen -ominaisuuden avulla voit asettaa pakotetun sivunvaihdon elementin jälkeen. Tämän ominaisuuden avulla voit myös estää rikkoutumisen.H2 (sivunvaihto jälkeen: aina; )
▍Sivunvaihto elementin sisällä
Page-break-inside-ominaisuus on kätevä, kun haluat välttää elementin jakamisen kahdelle sivulle.Ul (sivumurto sisällä: vältä; )
▍Ylä- ja alaripustusnauhat
Joskus sisään pakkotauko Sivuja ei tarvita, mutta sinun on ohjattava kappaleiden tulostamista sivun reunoilla.Jos esimerkiksi kappaleen viimeinen rivi on tämänhetkinen sivu ei sovi, tämän kappaleen kaksi viimeistä riviä tulostetaan seuraavalle sivulle. Tämä johtuu siitä, että tätä hallitseva ominaisuus (widows, eli "yläriippuvat rivit") on oletuksena 2. Tätä voidaan muuttaa.
P (lesket: 4;)
Jos tapahtuu toinen tilanne ja vain yksi rivi kappaleesta mahtuu nykyiselle sivulle, koko kappale tulostetaan seuraavalle sivulle. Myös alemmista riippuviivoista (orvot) vastaava ominaisuus on oletuksena 2.
P(orvot: 3;)
Yllä olevan koodin tarkoitus on, että jotta koko kappale ei pääty seuraavalle sivulle, nykyiselle sivulle täytyy mahtua vähintään kolme riviä.
Ymmärtääksesi tämän paremmin, katso esimerkkiä, joka on valmistettu CodePenillä. Ja tässä on virheenkorjausversio samasta esimerkistä, se on helpompi testata.
*, *:ennen, *:after, *:first-letter, p:first-line, div:first-rivi, blockquote:first-line, li:first-rivi ( tausta: läpinäkyvä !tärkeää; väri: #000 !tärkeää; tekstivarjo: ei mitään !tärkeää;
Muuten, CSS-tyylit tulostukseen ovat yksi harvoista poikkeuksista, joissa!important-ohje on täysin normaali ;)
7. Tarpeettoman sisällön poistaminen
Jotta mustetta ei tuhlata, kannattaa sivun painetusta versiosta poistaa kaikki tarpeeton, kuten valtavat kauniit diat, mainokset, sivuston navigointityökalut ja vastaavat. Tämä voidaan tehdä asennuksen avulla näytön ominaisuudet aseta arvoksi none tarpeettomille elementeille. On täysin mahdollista, että sinun on oikea näyttää vain sivun pääsisältö ja piilottaa kaikki muu:Runko > *:not(main) ( näyttö: ei mitään; )
8. Linkkien osoitteiden näyttäminen
Linkit, kuten ne tyypillisesti esiintyvät verkkosivuilla, ovat täysin hyödyttömiä painettuna, ellei asiakirjan paperiversion lukija tiedä, mihin ne johtavat.Jos haluat näyttää linkkien osoitteet niiden tekstiesitysten jälkeen, käytä seuraavaa tyyliä:
A:after ( sisältö: " (" attr(href) ")"; )
Tietysti tällä lähestymistavalla "puretaan" paljon tarpeettomia asioita. Esimerkiksi, suhteellisia linkkejä, ehdottomia linkkejä samalla sivustolla, jossa painettu sivu sijaitsee, linkit ankkureilla ja niin edelleen. Jotta tulostettu sivu ei sotkuisi, on parempi käyttää jotain tällaista:
A:not():after ( content: " (" attr(href) ")"; )
Hullulta se tietysti näyttää. Joten selitän merkityksen tästä säännöstä selkeällä kielellä: "Näyttöarvo href -attribuutti jokaisen linkin vieressä, jossa on http-alkuinen attribuutti, mutta joka ei sisällä omasivusto.fi-osoitetta."
9. Dekoodauslyhenteet
Tekstissä olevat lyhenteet on sijoitettava tunnisteeseen , ja niiden transkriptiot on sisällytettävä title-määritteeseen. Jos muotoilet lyhenteet tällä tavalla, niiden merkitykset näkyvät erittäin helposti painetulla sivulla:Abbr:after ( sisältö: " (" attr(title) ")"; )
10. Pakotettu taustatulostus
Kun selaimet renderöivät sivun tulostettaviksi, ne eivät yleensä näytä taustaväriä ja taustakuvia, ellet nimenomaisesti kehota heitä tekemään niin. Joskus tämä kaikki on kuitenkin tulostettava. Tässä auttaa meitä standardoimaton print-color-adjust -ominaisuus, jonka avulla voit ohittaa joidenkin selainten oletusasetukset.Otsikko ( -webkit-print-color-adjust: tarkka; print-color-adjust: tarkka; )
11. Mediakyselyt
Jos kirjoitat seuraavanlaisia mediakyselyitä, muista, että CSS-säännöt vastaavia pyyntöjä ei vaikuta sivun painettuun versioon.@medianäyttö ja (min-leveys: 48em) ( /* vain näyttö */ )
Miksi näin on? Asia on siinä, että CSS-sääntöjä sovelletaan vain, jos minimileveyden arvo on 48em ja jos mediatyyppi on screen . Jos pääset eroon tästä mediakyselystä avainsana näyttö , sitä rajoittaa vain vähimmäisleveyden arvo.
@media (min-leveys: 48em) ( /* kaikki mediatyypit */ )
12. Korttien tulostus
Nykyinen Firefox-versiot ja Chrome voi tulostaa karttoja, mutta esimerkiksi Safari ei voi tehdä tätä. Mitä tehdä, kun tulostat kortteja? Yksi universaaleja vaihtoehtoja– käytä staattisia karttoja dynaamisten karttojen sijaan.Kartta ( leveys: 400 pikseliä; korkeus: 300 kuvapistettä; taustakuva: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&maptype=roadmap&fffruatre "); -webkit-print-color-adjust: tarkka; print-color-adjust: tarkka; )
13. QR-koodit
Tärkeitä linkkejä sisältävien QR-koodien tulostaminen voi parantaa huomattavasti verkkosivujen paperiversioiden käytettävyyttä. Tässä on pala The Smashing Magazinesta, josta löydät hyödyllisiä vinkkejä tästä teemasta. Yksi niistä on lisätä heidän osoitteensa QR-koodien muodossa painetuille sivuille. Tämän seurauksena käyttäjän ei tarvitse kirjoittaa koko osoitetta näppäimistöllä voidakseen avata selaimessa sivun, jolta tulostettiin.14. Tietoja ei-optimoitujen sivujen tulostamisesta
Tutkiessani web-sivujen tulostamisen aihetta huomasin loistava työkalu, jonka avulla voit kätevästi valmistella optimoimattomia sivuja tulostusta varten. Lisää tunnisteita käyttämälläLöydät usein verkkosivustoilta tulostettava versio tietystä sivusta. Monet ihmiset ajattelevat, että tämä on jotain sisäänrakennettua selaimeen tai että se tehdään hyvin yksinkertaisesti. Itse asiassa tämä ei ole ollenkaan totta. Painettu versio on tavallinen sivu , jota tarvitset omillaan tehdä.
Voit katsoa tämän artikkelin tulostettavan version. Mitä siellä oikeastaan pitäisi näyttää? Artikkelin nimi, osio, luokka, kirjoittaja, itse teksti ja päivämäärä. Kaikki tämä näkyy tällä sivulla. Tarvitsetko valikon, hakulomakkeen tai erilaisia lohkoja? En usko niin, siksi niitä ei ole olemassa.
Varmista myös, että tulostettavan version leveys on ei ylitä 650 pikseliä, muuten selain voi leikata reunat.
Ymmärrät siis jo sen Tulostettava versio Sinun on luotava se itse ja tulostettava täsmälleen mitä käyttäjä tarvitsee. Nyt puhutaan kuinka tämä tehdään.
Syödä 2 vaihtoehtoa: luoda erillinen sivu ja luoda erillinen tiedosto tyylejä. Ensimmäinen vaihtoehto on mielestäni selvä. Luo toinen sivu tulostettavalla versiolla ja pääsivulla annat linkin tähän painettuun versioon. Käyttäjä seuraa sitä ja läpi "Tiedosto" -> "Tulosta" hän tulostaa sen.
Toinen vaihtoehto sisältää erillisen tyylisivun luomisen, jossa piilotat kaikki tarpeettomat lohkot (via näyttö: ei mitään;) ja aseta sopivat koot tulostesisällölle. Sitten tämä tyylitiedosto yhdistetään seuraavasti:
Jos käyttäjä nyt haluaa tulostaa tämän sivun, ei tulosteta sitä, mitä hän näkee, vaan se mitä on kirjoitettu print.css. Itse asiassa käyttäjä näkee sivun yhdessä näkymässä ja tulostimen täysin eri näkymässä.
Tällä tavalla tulostettava versio luodaan mikä tahansa sivuston sivu.
Ajoittain voit törmätä Internetissä artikkeleihin, jotka ovat niin arvokkaita, että haluat tulostaa ne ja lukea ne ytimeen. Samanaikaisesti kaikki palvelut eivät tarjoa artikkelista tulostettavaa versiota tai tulostustoiveemme eivät vastaa tarjottuja mahdollisuuksia (haluamme jättää kuvan tai muuttaa pääkirjasintyyppiä). Miten voin tulostaa sivun ilman tarpeettomia elementtejä? Tässä tapauksessa verkkopalvelu auttaa.
Päällä kotisivu PrintWhatYouLike ruudun keskellä on lomake tulostettavan sivun osoitteen syöttämiseen. Osoite syötetään, sivu ladataan ja näemme, että kun valitset minkä tahansa käyttöliittymäelementin, sitä ympäröi punainen kehys. Toinen painallus hiiren vasemmalla painikkeella avautuu luettelo mahdollisista toiminnoista. Käyttöliittymäelementit voidaan poistaa yksitellen tai ryhmässä, laajentaa erikseen rajojen sisällä tai valita yksi tekstilohko, jolloin kaikki muut poistetaan. Toisin sanoen sivusta on mahdollista poistaa yksitellen tulostuksen kannalta tarpeettomat osat tai eristää nopeasti tarpeellinen tarpeettomasta ja tulostaa.
Näytön vasemmalla puolella on sivupaneeli joissa on useita toimintoja muokattavalle sivulle:
- muokatun sivun tallentaminen PDF-, HTML-muotoon;
- tekstin koon, kirjasintyypin muuttaminen;
- poisto tausta tai kuvia yhdellä napsautuksella.
Käyttäjän mukavuuden vuoksi PrintWhatYouLike ehdottaa, että asetat kirjanmerkkipalkkiin painikkeen muokkausta varten ennen minkä tahansa vierailemamme sivun tulostamista. Saatavilla on myös PageZipper-vaihtoehto. Se on kätevää luettaessa niitä resursseja, joissa he haluavat jakaa yhden artikkelin viiteen, kymmeneen tai useampaan sivuun. painat " Seuraava sivu”, “Seuraava sivu”, ja sitten huomaat, ettei ollut mitään luettavaa. PageZipper asettaa koko artikkelin yhdelle sivulle lisämuokkausta ja tulostusta varten. Jos et halua asentaa kirjanmerkkiä, Firefox PageZipper 0.6.1 -laajennus on saatavilla.
Rekisteröityneille käyttäjille PrintWhatYouLike tarjoaa ohjauspaneelin, joka sisältää tietoja asennettujen tulostinystävällisten painikkeiden määrästä, tallennettujen ja tulostettujen paperiarkkien määrästä, säästetystä rahasta, kaatamattomista puista ja ilmakehään pääsemättömästä hiilimonoksidista.
Bloggaajat voivat myös hyötyä. Laajennuksen asentaminen saa blogi näkyviin jokaiselle sivulle kätevä painike artikkeleiden lähettämiseen tulostettaviksi, mahdollisuus tallentaa sivuja PDF-muodossa, jonka avulla lukijat voivat säästää paperia ja tulostimen mustetta.
Etupään kehittäjä Manuel Matuzovich.
Kirjanmerkkeihin
Manuel Matuzovich
Entinen Microsoftin johtaja Aaron Gustafson lokakuussa 2016 kirjoitti Twitterissä vetoomuksen Indiegogoon, jossa hän kiinnitti yrityksen huomion siihen, että tilaustietoja sisältäviä sivuja ei voi tulostaa.
Kun näin tämän twiitin, se osui minuun kuin sähköisku, koska en ollut optimoinut sivuani tulostettaviksi pitkään aikaan, enkä ollut edes ajatellut sitä hetkeäkään. Ehkä se johtuu siitä, että olen jatkuvasti tekemisissä ongelmiin, jotka liittyvät selaimen koon muuttamiseen ja sen varmistamiseen, että sivustomme sivut toimivat täydellisesti kaikissa koossa ja muodoissa, tai ehkä siksi, että en melkein koskaan tulosta sivuja itse. Joka tapauksessa, unohdin kokonaan tulostustyylit, mikä on huonoa.
Verkkosivujen optimointi tulostettaviksi on erittäin tärkeää, koska on etumme mukaista, että sivustot ovat mahdollisimman helposti käyttäjien ulottuvilla muodosta riippumatta. Ei tarvitse olettaa, millaisia käyttäjät ovat ja miten he käyttäytyvät: ihmiset kirjoittavat silti verkkosivustojen sivuja. Ajattele vain kaikkia niitä artikkeleita tai blogeja, reseptejä, yhteystiedot, miten sinne pääsee -sivuilla tai kiinteistösivustoilla. Eräänä päivänä joku, jossain, yrittää varmasti tulostaa yhden luomistasi sivuista.
Lopetin tulostimen käytön kotona kauan sitten, koska se hajosi 10 minuutin välein. Mutta kaikki eivät ole minun kaltaisiani.
Gaydon Pickering
Kattavat suunnittelumallit
Jos löydät saman ongelman kuin minä, toivon, että tämä artikkeli päivittää tietosi nopeasti. Jos et ole vielä optimoinut sivujasi CSS:n avulla, seuraavat vinkit auttavat sinua pääsemään alkuun.
1. Upota tyylit tulostusta varten
Paras tapa upota tulostustyylit - kuvaile @media-ohjetta CSS:ssäsi.
Voit myös upottaa tulostustyylejä HTML:ään, mutta tämä vaatii lisäpyynnön.
2. Testaus
Sivua ei tarvitse tulostaa aina talletuksen yhteydessä pieni muutos. Selaimestasi riippuen voit viedä sivun nimellä PDF-tiedosto, esikatsella sivua tai jopa tehdä muutoksia itse selaimeen.
Voit säätää tulostustyylejä Firefoxissa avaamalla Kehittäjäpaneelin (Vaihto + F2 tai Kehitä → Verkkokehitys → Kehittäjäpaneeli), kirjoittamalla mediaemulointitulostus syöttöriville selainikkunan alareunassa ja painamalla Enter. Aktiivinen välilehti toimii ikään kuin materiaalityyppi olisi tulostettu, kunnes suljet tai päivität sivun.
Firefoxin kirjoitustyyliemulointi
SISÄÄN Chrome-selain avaa Kehittäjätyökalut (CMD + Opt + I (macOS) tai Ctrl + Shift + I (Windows) tai Näytä → Kehittäjä → Kehittäjätyökalut), peilaa konsolin vetolaatikko (Esc), avaa Renderöinti-paneeli, valitse Emuloi-ruutu CSS Media ja valitse Tulosta.
Emuloi tulostustyyliä Chromessa
3. Absoluuttiset yksiköt
Absoluuttiset yksiköt eivät sovellu näyttöihin, mutta toimivat hyvin tulostukseen. Painatustyyleissä on täysin turvallista ja jopa suositeltavaa käyttää absoluuttisia mittayksiköitä, kuten cm, mm, in, pt tai pc.
osa (marginaali-ala: 2cm;)
4. Sivulle erilliset säännöt
Voit myös määrittää tätä sivua koskevat parametrit - mitat, suunta ja marginaalit - @page-ohjeen avulla. Tämä on erittäin hyödyllistä, jos haluat, että kaikilla sivuilla on tietyt kentät.
@mediatulostus ( @sivu ( marginaali: 1cm; ))
Monilla sivustoilla on mahdollisuus näyttää tulostettava versio sivusta, mutta onko niiden käyttö aina kätevää?
Tärkeimmät ongelmat asiakirjaa tulostettaessa ovat huono typografia, läsnäolo tarpeetonta tietoa(esimerkiksi käyttöliittymäelementit) ja vääriä värejä. Tyyliin voit käyttää sääntöä @media:
@media print()
Jos käyttäjä haluaa tulostaa sivun, jonka kuvio näkyy näytöllä, hän ottaa kuvakaappauksen ja tulostaa sen. Tulostettava versio on suunniteltu yksinkertaiseen ja mukavaan tekstin lukemiseen paperiarkilta. Siksi ensinnäkin on välttämätöntä poistaa sivulta kaikki tarpeettomat asiat: valikko, massiivinen ylä- tai alatunniste, taustakuvat jne. jättäen vain välttämättömät: otsikot, sisältö kuvilla, sivuston logo, Sivun URL-osoite. Tämä koodi piilottaa esimerkiksi H1-otsikot sekä sivuston sivupalkin, ylä- ja alatunnisteen:
H1, div#header, div#sidebar, div#footer ( näyttö: ei mitään; )
Tulosta sivun säännöt
1. Nykyaikaiset selaimet voivat poistaa taustakuva. On kuitenkin suositeltavaa lisätä taustakuva: ei mitään jotta myös vanhemmat selaimet voivat tehdä tämän.2. Tulostetun sivun ja sen näytön välillä voi olla epäjohdonmukaisuuksia määritettäessä pikselimittoja. Siksi kannattaa käyttää tuumaa, senttimetriä tai prosentteja.
3. Seuraavalla koodilla voit näyttää koko URL-osoitteen hyperlinkin sijaan, koska et voi napsauttaa paperia:
A:after (sisältö:"<" attr(href) ">";
Muutamalla koodia hieman voit lisätä URL-näytön vain ulkoisiin linkkeihin:
A:after (sisältö:"<" attr(href) ">";
4. varten suuria tekstejä joskus on tarkoituksenmukaista erottaa osiin. Seuraava koodi katkaisee kunkin H3-otsikon sisällön ja tulostaa uudelle sivulle:
H3 (sivunvaihto ennen: aina; )
Ja tämä koodi auttaa tulostamaan jokaisen artikkelin uusi sivu, voi olla hyödyllistä tulostettaessa luetteloa blogikirjoituksista:
Artikkeli + artikkeli ( sivunvaihto ennen: aina; )
5. Tumman tai kirkkaan suunnittelun sivustojen tyylit kannattaa määrittää uudelleen vakioiksi väriskeema- musta teksti valkoisella pohjalla. Tämä on kätevä sekä luettavuuden että kulutustarvikkeiden säästämisen kannalta käyttäjän tulostimessa.
Oikea näyttö
Kuten yllä mainittiin, nykyaikaiset selaimet osaa poistaa tarpeettomia elementtejä tulostettaessa tätä ei kuitenkaan aina vaadita. SISÄÄN Firefoxin käyttäjä voi hallita sitä itse ulkomuoto tuloksena Chromessa ja Safarissa voit näyttää alla olevan koodin alkuperäinen tyyli:* ( -webkit-print-color-adjust: tarkka; )
Miltä se näyttää toiminnassa:
Tulostuslaatu
Usein tulostustulos on hyvin erilainen kuin näytöllä näkyvä alkuperäinen. pahin puoli. Yksi yleisiä syitä katsotaanpa tätä yksinkertainen esimerkki. Tummalla taustalla on vaaleaa tekstiä:Seuraavalla CSS:llä:
Otsikko ( tausta: #000; väri: #fff; pehmuste: 1rem; fonttiperhe: Avenir, Arial, sans-serif; )
Selain yrittää palauttaa tulostusversion normaaliksi:
Jos sivulla on kuva, esimerkiksi logo, selain ei korjaa sitä millään tavalla, ja tulos on kauhea:
Kaikki näyttää vielä pahemmalta, jos sitä käytetään logona vektorikuva läpinäkyvyydellä:
Voit välttää tämän kauhun käyttämällä CSS3-suodatinta:
@mediatulostus ( header ( tausta: ei mitään; väri: #000; ) header img ( -webkit-filter: invert(100%); filter: invert(100%); ) )
Siitä käy ilmi:
Firefoxissa voit käyttää SVG:tä:
@mediatulostus ( otsikko ( tausta: ei mitään; väri: #000; ) header img ( suodatin: url(inverse.svg#negative); -webkit-filter: invert(100%); suodatin: invert(100%); ) )
IE9-ratkaisulle alkaen
