CSS-i @page Reegli Meistriklass: Prindistiilide Kohandamine Globaalsele Publikule

Tänapäeva digitaalses maastikus, kus fookus on sageli ekraanipõhistel kogemustel, on tagasihoidlik prinditud lehekülg üllatavalt asjakohane. Olgu tegemist aruannete, arvete, retseptide või reisiplaanidega, kasutajad peavad sageli veebisisu printima. Hästi vormindatud, printerisõbraliku versiooni pakkumine oma veebisaidist on kasutajakogemuse ja juurdepääsetavuse seisukohast ülioluline. Siin tulevadki mängu CSS-i prindistiilid ja @page reegel.

Prindistiilide Tähtsuse Mõistmine

Prindistiil on CSS-fail, mis on spetsiaalselt loodud kontrollimaks, kuidas veebileht printimisel välja näeb. Ilma spetsiaalse prindistiilita üritavad brauserid sageli printida lehe ekraaniversiooni, mille tulemuseks on:

• Tindi ja paberi raiskamine: Ebavajalike elementide, nagu navigeerimismenüüde, reklaamide ja dekoratiivsete piltide printimine.
• Halb loetavus: Liiga väike tekst, ebamugavalt murtud veerud ja värvid, mida on paberil raske lugeda.
• Küljendusprobleemid: Elemendid kattuvad või lõigatakse lehe servadest ära.
• Juurdepääsetavuse probleemid: Raskused nägemispuudega kasutajatele, kes tuginevad prinditud sisule.

Luues prindistiili, saate optimeerida oma veebilehti printimiseks, tagades puhta, loetava ja professionaalse välimusega tulemuse. See aitab kaasa paremale kasutajakogemusele ja tugevdab teie brändi pühendumust kvaliteedile.

@page Reegli Tutvustus

CSS-i @page reegel võimaldab teil kontrollida prinditud lehtede erinevaid aspekte, nagu veerised, suurus ja orientatsioon. See pakub viisi stiilide määratlemiseks, mis kehtivad spetsiifiliselt prindimeediale.

Põhisüntaks

@page reegli põhisüntaks on järgmine:

            @media print {
  @page {
    /* CSS properties for the printed page */
  }
}

            

              
                Copy
              
            
          

@media print meediapäring tagab, et reegli sees olevad stiilid rakendatakse ainult siis, kui lehte prinditakse.

@page Reegli Võtmeomadused

• size: Määrab prinditud lehe suuruse. Levinud väärtused on A4, Letter, Legal ja landscape (horisontaalpaigutuse jaoks).
• margin: Määrab veerised prinditud lehe sisu ümber. Saate määrata erinevad veerised ülemisele, paremale, alumisele ja vasakule küljele.
• margin-top, margin-right, margin-bottom, margin-left: Üksikud omadused spetsiifiliste veeriste määramiseks.
• marks: Lisab prinditud lehele lõikemärgid või registrimärgid. See on kasulik professionaalseks printimiseks. Väärtused hõlmavad crop ja cross.
• bleed: Määrab lõikevaru ala suuruse väljaspool lehe veeriseid. See on samuti oluline professionaalseks printimiseks.
• orphans: Määrab lõigu minimaalse ridade arvu, mis peab jääma lehekülje allossa. Hoiab ära üksikute ridade eraldumise.
• widows: Määrab lõigu minimaalse ridade arvu, mis peab jääma lehekülje ülaossa. Hoiab ära üksikute ridade eraldumise.

Prindistiili Loomine: Samm-sammuline Juhend

Siin on samm-sammuline juhend oma veebisaidi jaoks prindistiili loomiseks:

1. Tuvastage Peidetavad Elemendid

Esimene samm on tuvastada elemendid, mis ei ole printimiseks vajalikud, näiteks:

• Navigeerimismenüüd
• Küljeribad
• Reklaamid
• Sotsiaalmeedia nupud
• Dekoratiivsed pildid

Saate need elemendid peita, kasutades oma prindistiilis omadust display: none;.

            @media print {
  nav, aside, .ad, .social-buttons, img.decorative {
    display: none;
  }
}

            

              
                Copy
              
            
          

2. Optimeerige Teksti ja Küljendust

Järgmisena keskenduge teksti ja küljenduse optimeerimisele loetavuse parandamiseks. Kaaluge järgmist:

• Fondi suurus: Suurendage fondi suurust parema loetavuse tagamiseks paberil. Fondi suurus 12pt või 14pt on sageli hea lähtepunkt.
• Fondi perekond: Valige fondi perekond, mida on paberil lihtne lugeda. Sageli eelistatakse seriifidega fonte nagu Times New Roman või Georgia.
• Reakõrgus: Suurendage reakõrgust parema loetavuse saavutamiseks. Üldiselt on soovitatav reakõrgus 1.4 või 1.5.
• Värvikontrastsus: Tagage piisav kontrastsus teksti ja tausta vahel. Must tekst valgel taustal on kõige loetavam valik.
• Veerised ja polsterdus: Kohandage veeriseid ja polsterdust, et luua puhas ja korras küljendus.
• Eemaldage ebavajalikud värvid: Kui kasutate oma veebisaidil taustavärve või värvilist teksti, kaaluge nende eemaldamist prindistiilis tindi säästmiseks.

            @media print {
  body {
    font-size: 12pt;
    font-family: Georgia, serif;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
  }

  h1, h2, h3 {
    color: #000;
  }
}

            

              
                Copy
              
            
          

3. Kontrollige Leheküljevahetusi

Leheküljevahetused võivad sageli tekkida ebamugavates kohtades, näiteks tabeli või koodilõigu keskel. Saate kasutada järgmisi CSS-i omadusi leheküljevahetuste kontrollimiseks:

• page-break-before: Määrab, kas leheküljevahetus peaks toimuma enne elementi. Väärtused on auto, always, avoid, left ja right.
• page-break-after: Määrab, kas leheküljevahetus peaks toimuma pärast elementi. Väärtused on samad, mis omadusel page-break-before.
• page-break-inside: Määrab, kas leheküljevahetus peaks toimuma elemendi sees. Väärtused on auto ja avoid.

Näiteks, et vältida tabeli poolitamist mitmele leheküljele, saate kasutada järgmist CSS-i:

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

            

              
                Copy
              
            
          

Et sundida leheküljevahetust enne pealkirja, saate kasutada järgmist CSS-i:

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

            

              
                Copy
              
            
          

4. Kohandage @page Reeglit

Kasutage @page reeglit prinditud lehe üldise välimuse kontrollimiseks. Näiteks, et määrata lehe suuruseks A4 ja lisada veerised, saate kasutada järgmist CSS-i:

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

            

              
                Copy
              
            
          

Saate kasutada ka :left ja :right pseudoklasse @page reegli sees, et määrata erinevad stiilid vasak- ja parempoolsetele lehtedele kahepoolses dokumendis. See on kasulik päiste või jaluste lisamiseks, mis vahelduvad igal lehel.

            @media print {
  @page :left {
    margin-right: 3cm;
  }

  @page :right {
    margin-left: 3cm;
  }
}

            

              
                Copy
              
            
          

5. Käsitlege URL-e ja Linke

Veebilehe printimisel on sageli kasulik lisada linkide URL-id, et kasutajad saaksid veebiressurssidele hõlpsasti juurde pääseda. Saate seda saavutada, kasutades CSS-i genereeritud sisu ja attr() funktsiooni.

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

            

              
                Copy
              
            
          

See CSS lisab iga lingi URL-i sulgudes lingi teksti järele. Võiksite kaaluda URL-i teksti tegemist väiksemaks või vähem pealetükkiva värviga, et vältida prinditud lehe segamini ajamist.

6. Testige Oma Prindistiili

Pärast prindistiili loomist on oluline seda põhjalikult testida, et tagada soovitud tulemuste saavutamine. Saate oma prindistiili testida järgmiselt:

• Kasutades oma brauseri printimise eelvaate funktsiooni.
• Printides lehe füüsilisele printerile.
• Kasutades veebipõhiseid prindistiili testimise tööriistu.

Testige oma prindistiili erinevates brauserites ja operatsioonisüsteemides, et tagada brauseriteülene ühilduvus. Samuti testige erinevat tüüpi sisuga, et veenduda, et teie prindistiil töötab hästi erinevates stsenaariumides.

Globaalsed Kaalutlused Prindistiilide Puhul

Globaalsele publikule prindistiilide kujundamisel on oluline arvestada järgmisega:

• Paberiformaadid: Erinevates piirkondades kasutatakse erinevaid paberiformaate. Kui A4 on levinud enamikus maailmas, siis Põhja-Ameerikas on standardiks Letter-formaat. Kaaluge kasutajatele võimaluste pakkumist eelistatud paberiformaadi valimiseks või kujundage oma prindistiil nii, et see kohanduks erinevate paberiformaatidega.
• Kuupäeva- ja numbrivormingud: Kuupäeva- ja numbrivormingud varieeruvad erinevates kultuurides. Kasutage JavaScripti või serveripoolset skriptimist kuupäevade ja numbrite vormindamiseks vastavalt kasutaja lokaadile.
• Keeletugi: Veenduge, et teie prindistiil toetaks erinevaid keeli, sealhulgas erinevate märgistikega ja tekstisuundadega keeli (nt paremalt vasakule kirjutatavad keeled nagu araabia ja heebrea).
• Juurdepääsetavus: Muutke oma prindistiil puuetega kasutajatele juurdepääsetavaks. Pakkuge piltidele alternatiivteksti ja veenduge, et tekst on loetav ja hästi vormindatud.
• Õiguslikud ja vastavusnõuded: Olge teadlik mis tahes õiguslikest või vastavusnõuetest, mis on seotud printimisega erinevates piirkondades. Näiteks võivad mõnedes riikides olla määrused arvete või finantsdokumentide printimise kohta.

Näide: Reisikava Prindistiil

Vaatleme näidet reisikava prindistiilist. Reisikava sisaldab teavet lendude, hotellide, tegevuste ja kontaktandmete kohta.

Siin on põhline HTML-struktuur:

            <div class="itinerary">
  <h1>Reisikava</h1>
  <div class="flight">
    <h2>Lennuandmed</h2>
    <p>Lennufirma: United Airlines</p>
    <p>Lennu number: UA123</p>
    <p>Väljumine: New York (JFK) - 10:00</p>
    <p>Saabumine: London (LHR) - 22:00</p>
  </div>
  <div class="hotel">
    <h2>Hotelli andmed</h2>
    <p>Hotelli nimi: The Ritz London</p>
    <p>Aadress: 150 Piccadilly, London W1J 9BR, Ühendkuningriik</p>
    <p>Telefon: +44 20 7493 8181</p>
  </div>
  <div class="activity">
    <h2>Tegevus: Buckinghami palee tuur</h2>
    <p>Kuupäev: 20. juuli 2024</p>
    <p>Aeg: 14:00</p>
    <p>Kohtumispaik: Buckinghami palee peavärav</p>
  </div>
</div>

            

              
                Copy
              
            
          

Siin on prindistiil:

            @media print {
  body {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    color: #000;
  }

  .itinerary {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .itinerary h1 {
    font-size: 18pt;
    margin-bottom: 10px;
  }

  .itinerary h2 {
    font-size: 14pt;
    margin-top: 20px;
    margin-bottom: 5px;
  }

  .flight, .hotel, .activity {
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
  }

  @page {
    size: A4;
    margin: 2cm;
  }
}

            

              
                Copy
              
            
          

Selles näites oleme määranud fondi perekonna, fondi suuruse ja värvi kogu dokumendi jaoks. Samuti oleme kohandanud reisikava elementide veeriseid ja polsterdust, et luua puhas ja loetav küljendus. @page reegel määrab lehe suuruseks A4 ja lisab igale küljele 2 cm veerised.

Täpsemad Tehnikad ja Parimad Praktikad

• CSS-muutujate (kohandatud omaduste) kasutamine: Määratlege CSS-muutujad värvide, fondi suuruste ja veeriste jaoks, et oma prindistiili hõlpsalt hallata ja uuendada.
• Tingimuslik printimine JavaScriptiga: Kasutage JavaScripti, et tuvastada, kas lehte prinditakse, ja lisage või eemaldage dünaamiliselt klasse spetsiifiliste stiilide käivitamiseks. Olge siiski ettevaatlik liigse JavaScriptile tuginemisega, kuna see ei pruugi alati lubatud olla.
• SVG skaleeritava graafika jaoks: Kasutage logosid ja ikoone SVG-vormingus (Scalable Vector Graphics), et tagada nende terav ja selge välimus erinevate eraldusvõimetega printimisel.
• Kaaluge CSS-raamistiku kasutamist: Mõned CSS-raamistikud pakuvad sisseehitatud tuge prindistiilidele, mis teeb ühtlase ja hästi struktureeritud prindipaigutuse loomise lihtsamaks.
• Optimeerige pildid printimiseks: Kui peate pilte lisama, optimeerige need prindiresolutsioonile (300 DPI), et vältida pikslilisi või uduseid pilte.

Kokkuvõte

Tõhusate prindistiilide loomine on veebiarenduse oluline osa, tagades positiivse kasutajakogemuse neile, kes peavad teie sisu printima. Mõistes @page reeglit ja järgides selles juhendis toodud parimaid praktikaid, saate luua printerisõbralikke veebilehti, mis näevad välja professionaalsed ja on juurdepääsetavad globaalsele publikule. Ärge unustage seada esikohale loetavust, optimeerida küljendust ja testida oma prindistiili põhjalikult parimate tulemuste saavutamiseks.

Pöörates tähelepanu prindistiilidele, näitate pühendumust pakkuda täielikku ja juurdepääsetavat kasutajakogemust, olenemata sellest, kuidas teie kasutajad teie sisu tarbivad. See tähelepanu detailidele võib oluliselt parandada teie brändi mainet ja luua usaldust teie publikuga üle maailma.