CSS @page: Ovladavanje prilagodbom stilova za ispis za globalnu publiku

U današnjem digitalnom okruženju lako je previdjeti važnost stilova za ispis. Međutim, pružanje dobro formatirane, za ispis prilagođene verzije sadržaja vaše web stranice ključno je za pristupačnost i korisničko iskustvo. Korisnici iz različitih sredina možda će radije čitati i komunicirati s informacijama izvan mreže, a ispravno stilizirana verzija za ispis pokazuje predanost inkluzivnosti. Ovaj sveobuhvatni vodič zaronit će u snagu CSS @page pravila, omogućujući vam stvaranje prilagođenih izgleda za ispis koji odgovaraju globalnoj publici.

Zašto su stilovi za ispis važni

Iako živimo u digitalnom dobu, potreba za tiskanim dokumentima nije nestala. Razmotrite ove scenarije:

• Obrazovni resursi: Studenti često preferiraju tiskane materijale za učenje i bilježenje.
• Pravni dokumenti: Ugovori, sporazumi i pravne informacije često zahtijevaju tiskane kopije.
• Recepti: Mnogi kuhari radije imaju tiskani recept u kuhinji, izbjegavajući gnjavažu listanja po zaslonu s prljavim rukama.
• Informacije o putovanju: Putnici ponekad ispisuju karte, itinerare i bitne dokumente za izvanmrežni pristup, posebno u područjima s ograničenom internetskom vezom.
• Pristupačnost: Neki korisnici mogu imati oštećenja vida zbog kojih im je lakše čitati tiskani tekst s prilagođenom veličinom fonta i kontrastom.

Namjenski stil za ispis osigurava da je vaš sadržaj predstavljen u najboljem mogućem formatu za ispis, bez obzira na uređaj ili preglednik korisnika. Bez njega, korisnici bi mogli ispisati cijelu web stranicu, uključujući navigaciju, bočne trake i druge elemente koji su nevažni u tiskanom dokumentu. To troši tintu, papir i može rezultirati pretrpanim i nečitljivim ispisom.

Predstavljamo CSS @page pravilo

Pravilo @page u CSS-u omogućuje vam kontrolu izgleda i prikaza ispisanih stranica. Ono pruža mehanizam za definiranje margina, veličine stranice, orijentacije i drugih svojstava specifičnih za tiskane medije. Pravilo @page postavlja se unutar @media print bloka kako bi se osiguralo da se njegovi stilovi primjenjuju samo prilikom ispisa.

Ovo je osnovna sintaksa:

            @media print {
  @page {
    /* Ovdje idu CSS svojstva za stilove ispisa */
  }
}

            

              
                Copy
              
            
          

Bitna @page svojstva

Pravilo @page nudi niz svojstava za prilagodbu vašeg izgleda za ispis. Istražimo neka od najvažnijih:

1. Veličina

Svojstvo size definira dimenzije ispisane stranice. Uobičajene vrijednosti uključuju:

• auto: Preglednik određuje veličinu stranice na temelju postavki pisača.
• A4: Standardna veličina stranice koja se koristi u većini zemalja (210mm x 297mm).
• Letter: Standardna veličina stranice koja se koristi u Sjedinjenim Državama i Kanadi (8.5 inča x 11 inča).
• Legal: Veća veličina stranice koja se često koristi za pravne dokumente (8.5 inča x 14 inča).
• Prilagođene dimenzije: Možete također specificirati širinu i visinu stranice koristeći jedinice poput px, cm ili in. Na primjer: size: 20cm 30cm;

Primjer: Postavljanje veličine stranice na A4:

            @media print {
  @page {
    size: A4;
  }
}

            

              
                Copy
              
            
          

Globalna razmatranja: Zapamtite da se standardi veličine stranica razlikuju diljem svijeta. Iako je A4 dominantan u većini regija, Letter je standard u Sjevernoj Americi. Razmislite o pružanju opcija korisnicima da odaberu željenu veličinu stranice ili koristite auto kako biste se oslonili na postavke pisača.

2. Margina

Svojstvo margin kontrolira prostor između sadržaja i rubova stranice. Možete postaviti pojedinačne margine za gornju, desnu, donju i lijevu stranu stranice ili koristiti skraćenu notaciju.

• margin: 1in;: Postavlja sve margine na 1 inč.
• margin: 1in 2in;: Postavlja gornju i donju marginu na 1 inč, a lijevu i desnu marginu na 2 inča.
• margin: 1in 2in 3in;: Postavlja gornju marginu na 1 inč, lijevu i desnu marginu na 2 inča, a donju marginu na 3 inča.
• margin: 1in 2in 3in 4in;: Postavlja gornju, desnu, donju i lijevu marginu na 1 inč, 2 inča, 3 inča i 4 inča, redom.

Primjer: Postavljanje margina za A4 papir:

            @media print {
  @page {
    size: A4;
    margin: 1cm;
  }
}

            

              
                Copy
              
            
          

Globalna razmatranja: Veličine margina mogu utjecati na čitljivost, posebno za jezike s dugim riječima ili složenim pismima. Osigurajte dovoljne margine kako biste spriječili da tekst bude odrezan ili da izgleda zbijeno.

3. Orijentacija

Svojstvo orientation određuje treba li stranicu ispisati u portretnom (okomitom) ili pejzažnom (vodoravnom) načinu.

• portrait: Zadana orijentacija, gdje je stranica viša nego što je široka.
• landscape: Stranica je šira nego što je visoka.

Primjer: Forsiranje pejzažne orijentacije:

            @media print {
  @page {
    size: A4 landscape;
  }
}

            

              
                Copy
              
            
          

Globalna razmatranja: Pejzažna orijentacija može biti korisna za prikaz širokih tablica, grafikona ili slika. Razmotrite izgled sadržaja i potrebe korisnika prilikom odabira orijentacije.

4. Oznake

Svojstvo marks dodaje oznake za obrezivanje i/ili registracijske oznake na ispisanu stranicu. One se prvenstveno koriste u profesionalnom tisku za rezanje i poravnavanje stranica.

• crop: Dodaje oznake za obrezivanje na kutovima stranice, koje pokazuju gdje treba odrezati papir.
• cross: Dodaje registracijske oznake (male križiće) kako bi se pomoglo u poravnavanju različitih separacija boja.
• none: Ne dodaju se nikakve oznake.

Primjer: Dodavanje oznaka za obrezivanje:

            @media print {
  @page {
    size: A4;
    marks: crop;
  }
}

            

              
                Copy
              
            
          

Globalna razmatranja: Svojstvo marks prvenstveno je relevantno za profesionalni tisak i možda neće biti potrebno za tipičan web sadržaj koji se ispisuje na kućnim ili uredskim pisačima.

5. Napust (Bleed)

Svojstvo bleed određuje količinu sadržaja koja se proteže izvan rubova stranice. To se koristi kako bi se osiguralo da se boje ili slike protežu do samog ruba ispisane stranice nakon što se obreže.

Primjer: Postavljanje područja napusta od 5 mm:

            @media print {
  @page {
    size: A4;
    bleed: 5mm;
  }
}

            

              
                Copy
              
            
          

Globalna razmatranja: Kao i marks, bleed se prvenstveno koristi u kontekstu profesionalnog tiska. Važno je dizajnirati sadržaj s napustom na umu ako ga namjeravate koristiti.

Iznad @page: Poboljšanje stilova za ispis

Dok pravilo @page pruža kontrolu nad izgledom stranice, trebat ćete primijeniti i druge CSS stilove kako biste optimizirali sadržaj za ispis. Evo nekih bitnih tehnika:

1. Skrivanje nepotrebnih elemenata

Uklonite elemente koji su nevažni u tiskanom dokumentu, kao što su navigacijski izbornici, bočne trake, oglasi i widgeti društvenih mreža. Koristite svojstvo display: none; unutar @media print bloka kako biste sakrili te elemente.

Primjer: Skrivanje navigacije i bočne trake:

            @media print {
  nav, aside {
    display: none;
  }
}

            

              
                Copy
              
            
          

2. Optimiziranje čitljivosti teksta

Prilagodite veličine fontova, visine redaka i boje kako biste poboljšali čitljivost na papiru. Koristite jasan i čitljiv font, kao što su Arial, Helvetica ili Times New Roman.

Primjer: Prilagodba stilova teksta:

            @media print {
  body {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }
  a {
    color: inherit; /* Ukloni boju poveznice */
    text-decoration: none; /* Ukloni podcrtavanje */
  }
}

            

              
                Copy
              
            
          

Globalna razmatranja: Odabir fontova trebao bi podržavati skupove znakova koji se koriste u različitim jezicima. Osigurajte da odabrani font uključuje glifove za sve znakove u vašem sadržaju. Na primjer, ako koristite kineske, japanske ili korejske znakove, odaberite font posebno dizajniran za te jezike.

3. Rukovanje slikama i grafikama

Optimizirajte slike i grafike za ispis. Razmislite o korištenju crno-bijelih verzija slika kako biste uštedjeli tintu. Ako su slike bitne, osigurajte da imaju dovoljno visoku rezoluciju za jasan ispis.

Primjer: Pretvaranje slika u crno-bijele:

            @media print {
  img {
    filter: grayscale(100%);
  }
}

            

              
                Copy
              
            
          

Globalna razmatranja: Budite svjesni kulturološke osjetljivosti prilikom korištenja slika. Osigurajte da su slike prikladne za raznoliku publiku i izbjegavajte bilo kakve slike koje bi mogle biti uvredljive ili pogrešno protumačene.

4. Rad s poveznicama

Prema zadanim postavkama, preglednici možda neće ispisati URL-ove povezane s hipervezama. Možete koristiti CSS za prikaz URL-ova pored poveznica.

Primjer: Prikazivanje URL-ova:

            @media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

            

              
                Copy
              
            
          

5. Upravljanje tablicama

Osigurajte da su tablice ispravno formatirane za ispis. Izbjegavajte široke tablice koje bi mogle biti odrezane. Koristite CSS za kontrolu obruba, razmaka i veličina fontova tablica.

Primjer: Stiliziranje tablica za ispis:

            @media print {
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #000;
    padding: 5px;
  }
}

            

              
                Copy
              
            
          

Globalna razmatranja: Neki jezici koriste smjer teksta s desna na lijevo. Osigurajte da vaši stilovi tablica ispravno rukuju izgledima s desna na lijevo.

6. Izbjegavanje nepotrebnih boja

Ispis u boji troši više tinte. Razmislite o korištenju monokromatske sheme boja za stilove ispisa kako biste uštedjeli tintu i poboljšali čitljivost. To možete postići postavljanjem boje teksta na crnu i boje pozadine na bijelu (ili vrlo svijetlo sivu).

Primjer: Postavljanje boja za ispis:

            @media print {
  body {
    color: #000;
    background-color: #fff;
  }
}

            

              
                Copy
              
            
          

7. Prijelomi stranica

Koristite svojstva page-break-before, page-break-after i page-break-inside za kontrolu mjesta gdje se događaju prijelomi stranica. Ova svojstva mogu pomoći spriječiti da se naslovi odvoje od svog sadržaja ili da se tablice podijele na više stranica.

• page-break-before: always;: Prisiljava prijelom stranice prije elementa.
• page-break-after: always;: Prisiljava prijelom stranice nakon elementa.
• page-break-inside: avoid;: Pokušava izbjeći prijelom stranice unutar elementa.

Primjer: Sprječavanje prijeloma stranica unutar tablica i forsiranje prijeloma stranice prije svakog novog poglavlja:

            @media print {
  table {
    page-break-inside: avoid;
  }
  h2 {
    page-break-before: always;
  }
}

            

              
                Copy
              
            
          

Implementacija stilova za ispis

Postoje dva glavna načina za implementaciju stilova za ispis:

1. Vanjski stilski list

Napravite zasebnu CSS datoteku posebno za stilove ispisa (npr. print.css) i povežite je s vašim HTML dokumentom koristeći <link> oznaku s atributom media="print".

            <link rel="stylesheet" href="print.css" media="print">
            

              
                Copy
              
            
          

Ovaj pristup drži vaše stilove za ispis odvojenima od vaših stilova za zaslon, čineći vaš kôd organiziranijim i lakšim za održavanje.

2. Ugrađeni stilovi

Ugradite svoje stilove za ispis izravno u HTML dokument koristeći <style> oznaku unutar @media print bloka.

            <style>
  @media print {
    /* Ovdje idu stilovi za ispis */
  }
</style>

            

              
                Copy
              
            
          

Ovaj pristup je prikladan za male projekte ili kada trebate samo nekoliko jednostavnih stilova za ispis. Međutim, može učiniti vaš HTML dokument pretrpanim ako imate velik broj stilova za ispis.

Testiranje vaših stilova za ispis

Nakon implementacije vašeg stila za ispis, ključno je temeljito ga testirati kako biste osigurali da se vaš sadržaj ispravno ispisuje.

1. Koristite pregled ispisa u vašem pregledniku: Većina preglednika ima ugrađenu značajku pregleda ispisa koja vam omogućuje da vidite kako će vaša stranica izgledati kada se ispiše.
2. Ispis u PDF: Koristite opciju ispisa u PDF u vašem pregledniku kako biste stvorili PDF datoteku vaše stranice. To vam omogućuje da detaljnije pregledate ispisani izlaz i podijelite ga s drugima.
3. Testirajte na različitim preglednicima i uređajima: Stilovi za ispis mogu se neznatno razlikovati između različitih preglednika i uređaja. Testirajte svoj stil za ispis na više preglednika i uređaja kako biste osigurali dosljednost.
4. Zatražite povratne informacije: Zamolite korisnike iz različitih sredina da ispišu vaš sadržaj i daju povratne informacije o čitljivosti, izgledu i cjelokupnom iskustvu.

Razmatranja o pristupačnosti

Prilikom izrade stilova za ispis, bitno je uzeti u obzir pristupačnost za korisnike s invaliditetom. Evo nekoliko savjeta:

• Osigurajte dovoljan kontrast: Osigurajte da postoji dovoljan kontrast između boja teksta i pozadine kako bi tekst bio lak za čitanje.
• Koristite čitljive fontove: Odaberite fontove koji su laki za čitanje za korisnike s oštećenjem vida.
• Izbjegavajte korištenje boje kao jedinog sredstva prenošenja informacija: Korisnici s daltonizmom možda neće moći razlikovati određene boje. Koristite alternativne metode, kao što su tekstualne oznake ili simboli, za prenošenje informacija.
• Pružite alternativni tekst za slike: Uključite alt atribute za sve slike kako biste pružili alternativni tekst za korisnike koji ne mogu vidjeti slike.

Zaključak

Ovladavanje prilagodbom stilova za ispis pomoću CSS @page pravila ključno je za pružanje pozitivnog korisničkog iskustva i osiguravanje pristupačnosti za globalnu publiku. Razumijevanjem različitih @page svojstava i primjenom najboljih praksi za stiliziranje ispisa, možete stvoriti za ispis prilagođene verzije sadržaja vaše web stranice koje su optimizirane za čitljivost, upotrebljivost i učinkovitost tinte. Ne zaboravite temeljito testirati svoje stilove za ispis i uzeti u obzir pristupačnost za sve korisnike.

Implementacijom ovih strategija pokazujete predanost pružanju sveobuhvatnog i inkluzivnog iskustva za sve korisnike, bez obzira na njihov preferirani način pristupa informacijama. To u konačnici poboljšava upotrebljivost vaše web stranice i jača reputaciju vašeg brenda na globalnoj razini.