CSS-i lehekülje reegel: prindistiilide kohandamise ja haldamise meisterlikkus globaalsele publikule

Tänapäeva digitaalses maailmas on lihtne unustada prindistiilide olulisust. Siiski on oma veebisisust hästi vormindatud ja optimeeritud prindiversiooni pakkumine ülioluline ligipääsetavuse, arhiveerimise ja võrguühenduseta lugemise jaoks. CSS-i @page reegel annab teile võimu kontrollida ja kohandada oma veebilehtede välimust printimisel, tagades sujuva ja professionaalse kogemuse kasutajatele üle maailma. See põhjalik juhend uurib @page reegli peensusi ja seda, kuidas seda tõhusaks prindistiilide kohandamiseks kasutada.

Miks on prindistiilid digiajastul olulised

Kuigi internet on peamiselt visuaalne meedium, püsib vajadus prinditud dokumentide järele mitmel põhjusel:

• Ligipääsetavus: Nägemispuudega kasutajad võivad eelistada prinditud sisu lugemist või kasutada abistavaid tehnoloogiaid, mis töötavad kõige paremini prinditud dokumentidega.
• Arhiveerimine: Prinditud koopiad on püsivaks arvestuseks, mida veebilehe uuendused või potentsiaalne andmekadu ei mõjuta.
• Võrguühenduseta lugemine: Kasutajad võivad eelistada pikkade artiklite või aruannete lugemist võrguühenduseta, eriti piiratud internetiühendusega piirkondades. Mõelge teadlastele kaugetes asukohtades või reisijatele, kellel puudub usaldusväärne juurdepääs.
• Ametlik dokumentatsioon: Paljud tööstusharud toetuvad endiselt prinditud dokumentidele lepingute, arvete ja juriidiliste dokumentide jaoks.
• Kasutaja eelistus: Mõned kasutajad lihtsalt eelistavad prinditud materjali lugemise taktiilset kogemust.

Seetõttu võib prindistiilide eiramine põhjustada halva kasutajakogemuse ja potentsiaalselt välistada olulise osa teie sihtrühmast. Aja investeerimine hästi kujundatud prindistiilide loomisesse näitab pühendumust ligipääsetavusele ja professionaalsusele.

CSS-i @page reegli mõistmine

CSS-i @page reegel võimaldab teil määratleda stiile spetsiaalselt prinditud lehtede jaoks. See annab kontrolli prinditud väljundi erinevate aspektide üle, nagu veerised, lehe suurus, päised, jalused ja palju muud. Erinevalt tavalistest CSS-i reeglitest, mis kehtivad ekraanil, on @page reegel spetsiaalselt loodud prindimeediumi jaoks.

Süntaks

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

            @page {
 /* Prindistiilide CSS-deklaratsioonid */
}

            

              
                Copy
              
            
          

Saate määrata ka selektori konkreetsete lehtede sihtimiseks, näiteks esimese lehe või vasak- ja parempoolsete lehtede jaoks:

            @page :first {
 /* Stiilid esimesele lehele */
}

@page :left {
 /* Stiilid vasakpoolsetele lehtedele */
}

@page :right {
 /* Stiilid parempoolsetele lehtedele */
}

            

              
                Copy
              
            
          

:left ja :right selektorid on eriti kasulikud raamatu- või ajakirjastiilis väljaprindi vastakuti asetsevate lehtede jaoks erinevate paigutuste loomisel.

Levinud omadused, mida kasutatakse koos @page reegliga

Mitmed CSS-i omadused on eriti olulised @page reegliga töötamisel:

• size: Määrab lehe suuruse. Levinud väärtused on A4, letter, legal ja landscape.
• margin: Määrab veerised lehe sisu ümber. Saate määrata erinevad veerised ülemisele, paremale, alumisele ja vasakule küljele.
• margin-top, margin-right, margin-bottom, margin-left: Individuaalsed veeriste omadused peenema kontrolli saavutamiseks.
• padding: Määrab polsterduse sisu ümber veeriste sees (kasutatakse harvemini kui otse veeriseid).
• orphans: Määrab lõigu ridade miinimumarvu, mis peab jääma lehe allossa. Aitab vältida orbridasid.
• widows: Määrab lõigu ridade miinimumarvu, mis peab jääma lehe ülaossa. Väldib leskridasid.
• marks: Lisab prinditud lehele lõikemärgid või registrimärgid (kasulik professionaalseks printimiseks).

Põhilise prindistiililehe loomine

Esimene samm prindistiililehe loomisel on selle linkimine oma HTML-dokumendiga. Saate seda teha kasutades <link> silti, mille media atribuudi väärtuseks on seatud "print":

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

            

              
                Copy
              
            
          

See tagab, et stiilileht rakendatakse ainult siis, kui lehte prinditakse. Alternatiivina saate kasutada meediapäringut oma olemasolevas CSS-failis:

            @media print {
 /* Prindistiilide CSS-reeglid */
}

            

              
                Copy
              
            
          

See lähenemine hoiab teie prindistiilid samas failis teie ekraanistiilidega, kuid see võib faili haldamise keerulisemaks muuta. Suuremate projektide puhul on üldiselt soovitatav kasutada eraldi print.css faili.

Näide: lihtne prindistiilileht

Siin on lihtne näide print.css failist, mis seab lehe suuruseks A4, kohandab veeriseid ja peidab navigatsioonielemendid:

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

nav, aside, header, footer {
 display: none;
}

body {
 font-family: sans-serif;
 font-size: 12pt;
 line-height: 1.5;
}

a {
 color: black !important; /* Ekraanistiilide ülekirjutamine */
 text-decoration: none !important;
}

            

              
                Copy
              
            
          

See stiilileht peidab elemendid, mis ei ole prinditud sisu jaoks olulised, näiteks navigeerimismenüüd ja jalused. See määrab ka loetavuse huvides põhilise fondi ja reavahe. !important lippu kasutatakse ekraanil kuvamiseks määratletud stiilide ülekirjutamiseks.

Prindistiililehe täiustatud kohandamine

Lisaks põhilisele stiilimisele pakuvad @page reegel ja prindistiililehed mitmeid täiustatud kohandamisvõimalusi.

Leheküljepiirid

Leheküljepiiride kontrollimine on hästi vormindatud prinditud dokumentide loomisel hädavajalik. CSS pakub leheküljepiiride haldamiseks mitmeid omadusi:

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

Näiteks, et tagada, et pealkirjadele järgneks alati nende sisu, saate kasutada järgmist CSS-i:

            h2, h3 {
 page-break-after: avoid;
}

p {
 page-break-inside: avoid;
}

            

              
                Copy
              
            
          

See takistab pealkirjade jäämist orvuks lehe allossa ja lõikude kohmakat jagunemist üle lehtede. Olge ettevaatlik page-break-inside: avoid ülekasutamisega, kuna see võib viia alakasutatud leheruumini ja potentsiaalselt pikkade sisulõikudeni ilma piirideta. Tuleb leida tasakaal.

Sisu genereerimine ::before ja ::after abil

Pseudoelemente ::before ja ::after saab kasutada sisu genereerimiseks, mis on spetsiifiline prindimeediumile. See on eriti kasulik leheküljenumbrite, dokumendi pealkirjade või vesimärkide lisamiseks.

Leheküljenumbrite lisamiseks iga lehe jalusesse saate kasutada järgmist CSS-i:

            @page {
 @bottom-right {
 content: "Page " counter(page) " of " counter(pages);
 }
}

            

              
                Copy
              
            
          

See kood kasutab funktsiooni counter() praeguse leheküljenumbri ja lehekülgede koguarvu kuvamiseks. @bottom-right at-reegel paigutab sisu lehe paremasse alanurka. Sarnaselt saate kasutada @top-left, @top-right, @bottom-left ja @top-center, @bottom-center, et paigutada sisu teistesse lehe osadesse.

Keerukamate paigutuste jaoks võib olla vajalik kasutada absoluutse positsioneerimise ja genereeritud sisu kombinatsiooni. Näiteks vesimärgi lisamiseks igale lehele võiksite kasutada järgmist CSS-i:

            body::before {
 content: "CONFIDENTIAL";
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(-45deg);
 font-size: 5em;
 color: #ccc;
 z-index: -1;
 pointer-events: none; /* Vältige interaktsioonide segamist */
}

            

              
                Copy
              
            
          

See loob vesimärgi, mis on lehel keskel ja pööratud nurga all. Omadus z-index tagab, et vesimärk paigutatakse sisu taha, ja omadus pointer-events: none takistab sellel kasutaja interaktsioone segamast.

Piltide ja graafika käsitlemine

Prindistiililehtede loomisel on oluline arvestada, kuidas pilte ja graafikat käsitletakse. Võimalik, et peate nende suurust, eraldusvõimet või nähtavust kohandama, et neid printimiseks optimeerida.

Näiteks suurte piltide suuruse vähendamiseks saate kasutada omadust max-width:

            img {
 max-width: 100%;
 height: auto;
}

            

              
                Copy
              
            
          

See tagab, et pildid ei ulatu üle lehe piiride. Samuti võiksite kaaluda kõrgema eraldusvõimega piltide kasutamist printimiseks, et tagada nende terav ja selge välimus.

Mõnel juhul võiksite teatud pildid või graafika täielikult peita. Näiteks dekoratiivseid pilte, mis ei ole sisu jaoks olulised, saab peita kasutades omadust display: none:

            .decorative-image {
 display: none;
}

            

              
                Copy
              
            
          

Tabelite optimeerimine printimiseks

Tabelite vormindamine printimiseks võib olla eriti keeruline. Võimalik, et peate kohandama veergude laiust, fondi suurusi ja leheküljepiire, et tagada tabelite loetavus ja mahtumine lehe piiridesse.

Et vältida tabelite jagunemist üle lehtede, saate kasutada omadust table-layout: fixed:

            table {
 table-layout: fixed;
 width: 100%;
}

            

              
                Copy
              
            
          

See sunnib tabelit kasutama fikseeritud paigutust, mis aitab vältida selle ületamist lehe piiridest. Võimalik, et peate kohandama ka veergude laiust, et tagada kõigi veergude nähtavus.

Pikkade tabelite puhul saate kasutada elemente thead ja tfoot, et korrata tabeli päist ja jalust igal lehel:

            thead {
 display: table-header-group;
}

tfoot {
 display: table-footer-group;
}

            

              
                Copy
              
            
          

See muudab lugejatele tabeli sisu mõistmise lihtsamaks, isegi kui see ulatub üle mitme lehe.

Globaalsed kaalutlused prindistiilide jaoks

Globaalsele sihtrühmale prindistiililehtede kujundamisel on oluline arvestada kultuuriliste erinevuste ja keelevariatsioonidega. Siin on mõned peamised kaalutlused:

• Paberiformaadid: Erinevad piirkonnad kasutavad erinevaid paberiformaate. Kui Euroopas ja Aasias on levinud A4, siis Põhja-Ameerikas on standardiks Letter-formaat. Pakkuge valikuid või kohandage oma kujundust, et see sobiks mõlemaga. Saate kasutada CSS-i meediapäringuid konkreetsete paberiformaatide sihtimiseks.
• Kuupäeva- ja numbrivormingud: Veenduge, et kuupäevad ja numbrid oleksid vormindatud vastavalt kohalikele tavadele. Näiteks Ameerika Ühendriikides vormindatakse kuupäevad tavaliselt MM/DD/YYYY, samas kui Euroopas on levinum DD/MM/YYYY. Samamoodi varieeruvad numbrivormingud komakoha eraldaja ja tuhandete eraldaja osas. Kaaluge JavaScripti teekide kasutamist nende elementide dünaamiliseks vormindamiseks vastavalt kasutaja lokaadile.
• Tüpograafia: Valige fonte, mis toetavad laia valikut märke ja keeli. Kaaluge veebifontide kasutamist, mida saab manustada prinditud dokumenti. Olge siiski teadlik litsentsipiirangutest ja failisuurustest. Avatud lähtekoodiga fondid nagu Noto Sans ja Roboto on head valikud rahvusvahelistamiseks.
• Paremalt vasakule keeled: Kui teie veebisait toetab paremalt vasakule keeli nagu araabia või heebrea, veenduge, et teie prindistiilileht käsitleks teksti suunda õigesti. Kasutage teksti suuna kontrollimiseks omadusi direction ja unicode-bidi.
• Ligipääsetavus: Järgige ligipääsetavuse juhiseid, et tagada teie prinditud dokumentide kättesaadavus puuetega kasutajatele. Kasutage sobivaid fondisuurusi, värvikontraste ja piltidele alternatiivteksti.
• Tõlge: Kui teie veebisait on saadaval mitmes keeles, pakkuge oma prindistiililehtedest tõlgitud versioone. See tagab, et prinditud sisu on kooskõlas veebisaidi keelega.

Näide: erinevate paberiformaatide käsitlemine

Saate kasutada CSS-i meediapäringuid erinevate stiilide rakendamiseks vastavalt paberiformaadile:

            @media print and (size: A4) {
 /* Stiilid A4-paberile */
 margin: 2cm;
}

@media print and (size: letter) {
 /* Stiilid Letter-formaadis paberile */
 margin: 1in;
}

            

              
                Copy
              
            
          

See võimaldab teil kohandada veeriseid ja muid omadusi vastavalt konkreetsele paberiformaadile.

Prindistiililehtede testimine ja silumine

Prindistiililehtede testimine on ülioluline, et tagada nende ootuspärane toimimine. Siin on mõned näpunäited prindistiililehtede testimiseks ja silumiseks:

• Kasutage prindi eelvaate funktsiooni: Enamikul brauseritel on prindi eelvaate funktsioon, mis võimaldab teil näha, kuidas teie leht prindituna välja näeb. Kasutage seda funktsiooni paigutusprobleemide, leheküljepiiride ja muude probleemide kontrollimiseks.
• Printige PDF-i: PDF-i printimine on hea viis oma prinditud väljundi püsiva salvestise loomiseks. See võib olla kasulik teie prindistiililehe erinevate versioonide võrdlemiseks.
• Kasutage brauseri arendaja tööriistu: Brauseri arendaja tööriistu saab kasutada prinditud lehele rakendatavate CSS-reeglite uurimiseks. See aitab teil tuvastada ja parandada stiiliprobleeme.
• Testige erinevates brauserites ja seadmetes: Prindistiililehed võivad erinevates brauserites ja seadmetes käituda erinevalt. Testige oma prindistiililehti mitmesugustes brauserites ja seadmetes, et tagada nende järjepidev toimimine.
• Kaaluge kolmandate osapoolte tööriistu: Mitmed veebitööriistad aitavad teil prindistiililehti luua ja testida. Need tööriistad pakuvad sageli funktsioone nagu automaatne lehekülgede murdmine ja veeriste kohandamine.

Kokkuvõte

CSS-i @page reegel ja prindistiililehed on võimsad tööriistad teie veebisisust optimeeritud prindiversioonide loomiseks. Neid tehnikaid omandades saate pakkuda sujuvat ja professionaalset kogemust kasutajatele üle maailma, olenemata sellest, kas nad vaatavad teie sisu ekraanil või prindituna. Ärge unustage prindistiililehtede kujundamisel arvestada globaalsete teguritega, nagu paberiformaadid, keelevariatsioonid ja ligipääsetavus. Järgides selles juhendis toodud juhiseid ja parimaid tavasid, saate luua prindistiililehti, mis parandavad teie veebisaidi kasutatavust ja ligipääsetavust kõigile kasutajatele. Investeering prindistiililehtedesse on investeering paremasse kasutajakogemusse ja teie sisu laiemasse kättesaadavusse.

Ärge alahinnake hästi koostatud prindistiililehe võimsust! See võib oluliselt parandada kasutajakogemust ja tagada, et teie sisu on kättesaadav laiemale sihtrühmale, olenemata nende eelistatud lugemismeetodist. Võtke omaks @page reegel ja looge prindisõbralikke veebilehti, mis jätavad püsiva mulje.