{"id":91159,"date":"2022-10-11T13:40:34","date_gmt":"2022-10-11T18:40:34","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/anvanda-css-for-att-formatera-dokument-for-utskrift\/"},"modified":"2022-10-11T13:40:34","modified_gmt":"2022-10-11T18:40:34","slug":"anvanda-css-for-att-formatera-dokument-for-utskrift","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/anvanda-css-for-att-formatera-dokument-for-utskrift\/","title":{"rendered":"Anv\u00e4nda CSS f\u00f6r att formatera dokument f\u00f6r utskrift"},"content":{"rendered":"
\n

Om du n\u00e5gonsin har skrivit ut biljettreservationer eller v\u00e4gbeskrivningar till ett hotell fr\u00e5n webben, har du f\u00f6rmodligen varit mindre imponerad av resultaten. Du kanske d\u00e4rf\u00f6r inte \u00e4r medveten om att utskrivna dokument kan formateras p\u00e5 ungef\u00e4r samma s\u00e4tt som de kan p\u00e5 sk\u00e4rmen, med hj\u00e4lp av Cascading Style Sheets (CSS).<\/p>\n

<\/span> Dela upp problemen<\/span><\/h2>\n

En viktig f\u00f6rdel med CSS \u00e4r separeringen av inneh\u00e5ll fr\u00e5n presentation. I enklaste termer betyder detta ist\u00e4llet f\u00f6r mycket gammaldags stilistisk uppm\u00e4rkning som:<\/p>\n

<font size=\"7\"><b>Heading<\/b><\/font><\/pre>\n
Vi anv\u00e4nder semantisk uppm\u00e4rkning:<\/p>\n
<h1>Heading<\/h1><\/pre>\n
Detta \u00e4r inte bara mycket renare, det betyder ocks\u00e5 att v\u00e5r presentation \u00e4r skild fr\u00e5n v\u00e5rt inneh\u00e5ll.  Webbl\u00e4sare renderar h1<\/strong> element som stor, fet text som standard, men vi kan \u00e4ndra den stilen n\u00e4r som helst med en stilmall:<\/p>\n
h1 { font-weight: normal; }<\/pre>\n
Genom att samla dessa stildeklarationer i en separat fil och referera till den filen fr\u00e5n v\u00e5rt HTML-dokument, kan vi anv\u00e4nda separationen \u00e4nnu b\u00e4ttre.  Stilmallen kan \u00e5teranv\u00e4ndas, och vi kan \u00e4ndra den enskilda filen n\u00e4r som helst f\u00f6r att uppdatera formateringen i varje dokument som anv\u00e4nder den.<\/p>\n
<\/span>  Inklusive en utskriftsformatmall<\/span><\/h2>\n
P\u00e5 samma s\u00e4tt som att inkludera en sk\u00e4rmformatmall kan vi ange en stilmall f\u00f6r utskrift.  En sk\u00e4rmformatmall ing\u00e5r vanligtvis s\u00e5 h\u00e4r:<\/p>\n
<link href=\"https:\/\/www.makeuseof.com\/format-web-page-for-printer\/base.css\" rel=\"stylesheet\" \/><\/pre>\n
Men ett ytterligare attribut, media<\/strong>, till\u00e5ter inriktning baserat p\u00e5 det sammanhang d\u00e4r dokumentet renderas.  Som standard motsvarar det f\u00f6reg\u00e5ende elementet:<\/p>\n
<link href=\"https:\/\/www.makeuseof.com\/format-web-page-for-printer\/base.css\" rel=\"stylesheet\" media=\"all\" \/><\/pre>\n
Detta inneb\u00e4r att formatmallen kommer att till\u00e4mpas f\u00f6r alla medier som dokumentet renderas i. Men mediaattributet kan ocks\u00e5 ha v\u00e4rden f\u00f6r utskrift och sk\u00e4rm:<\/p>\n
<link href=\"https:\/\/www.makeuseof.com\/format-web-page-for-printer\/print.css\" rel=\"stylesheet\" media=\"print\" \/><\/pre>\n
I det h\u00e4r exemplet \u00e4r print.css<\/strong> stilmall kommer endast att anv\u00e4ndas n\u00e4r dokumentet skrivs ut.  Detta \u00e4r en mycket anv\u00e4ndbar mekanism.  Vi kan samla all vanlig stil (kanske typsnittsfamilj eller radavst\u00e5nd) i en stilmall som g\u00e4ller alla media, och mediespecifik formatering i enskilda stilmallar.  \u00c5terigen, detta \u00e4r en annan anv\u00e4ndning av separation av bekymmer.<\/p>\n
<\/span>  N\u00e5gra exempel p\u00e5 stildeklarationer<\/span><\/h2>\n
<\/span>En ren bakgrund<\/span><\/h3>\n
Du vill n\u00e4stan s\u00e4kert inte sl\u00f6sa med bl\u00e4ck p\u00e5 att skriva ut en f\u00e4rgstark bakgrund eller en bakgrundsbild.  B\u00f6rja med att \u00e5terst\u00e4lla alla standardv\u00e4rden f\u00f6r dessa v\u00e4rden som kan ha st\u00e4llts in i ditt dokument:<\/p>\n
body {background: white;color: black;}<\/pre>\n
Du kanske ocks\u00e5 vill f\u00f6rhindra att bakgrundsbilder skrivs ut \u2013 dessa b\u00f6r vara dekorativa och d\u00e4rf\u00f6r inte en obligatorisk del av ditt inneh\u00e5ll:<\/p>\n
* {background-image: none !important;}<\/pre>\n
<\/span>Kontrollera marginaler<\/span><\/h3>\n
En annan uppenbar punkt att t\u00e4nka p\u00e5 n\u00e4r det g\u00e4ller utskrift \u00e4r sidmarginalen.  \u00c4ven om CSS tillhandah\u00e5ller ett s\u00e4tt att st\u00e4lla in marginalstorlek, b\u00f6r du komma ih\u00e5g att din webbl\u00e4sare och skrivare ocks\u00e5 kan p\u00e5verka marginalinst\u00e4llningarna sj\u00e4lva.<\/p>\n
Till exempel, i Chromes utskriftsdialogruta finns det en marginalinst\u00e4llning som har v\u00e4rden inklusive ingen<\/strong> och best\u00e4llnings-<\/strong> som kommer att \u00e5sidos\u00e4tta allt som anges via CSS:<\/p>\n
Av denna anledning rekommenderas det att l\u00e4mna marginalbeslut till l\u00e4saren p\u00e5 offentliga webbsidor.  F\u00f6r personligt bruk eller f\u00f6r att skapa en standardlayout kan det dock vara l\u00e4mpligt att st\u00e4lla in utskriftsmarginaler via CSS.  De @sida<\/strong> regeln till\u00e5ter att marginaler st\u00e4lls in och b\u00f6r anv\u00e4ndas enligt f\u00f6ljande:<\/p>\n
@page {margin: 2cm;}<\/pre>\n
CSS har ocks\u00e5 kapacitet f\u00f6r mer sofistikerade utskriftslayouter, som att variera marginalen beroende p\u00e5 om sidan \u00e4r en udda siffra (h\u00f6ger), j\u00e4mn siffra (v\u00e4nster) eller f\u00f6rs\u00e4ttsbladet.<\/p>\n
Tyv\u00e4rr st\u00f6ds detta d\u00e5ligt \u2013 s\u00e4rskilt f\u00f6rs\u00e4ttsbladsalternativet \u2013 men det kan anv\u00e4ndas i minimal utstr\u00e4ckning.  F\u00f6ljande stilar ger sidor med n\u00e5got st\u00f6rre bottenmarginaler \u00e4n \u00f6vre och n\u00e5got st\u00f6rre marginaler p\u00e5 den yttre sidkanten \u00e4n ryggraden:<\/p>\n
@page {margin-left: 20mm;margin-right: 20mm;margin-top: 40mm;margin-bottom: 50mm;}@page :left {margin-left: 30mm;}@page :right {margin-right: 30mm;}<\/pre>\n
<\/span>D\u00f6ljer irrelevant inneh\u00e5ll<\/span><\/h3>\n
Allt inneh\u00e5ll \u00e4r inte l\u00e4mpligt f\u00f6r en tryckt version av ditt dokument.  Om din sida inneh\u00e5ller bannernavigering, annonser eller ett sidof\u00e4lt kanske du vill f\u00f6rhindra att dessa uppgifter visas i den tryckta versionen, till exempel:<\/p>\n
#contents, div.ad { display: none; }<\/pre>\n
<\/span>Fixar l\u00e4nkar<\/span><\/h3>\n
Hyperl\u00e4nkar \u00e4r uppenbarligen inte relevanta i tryckt material, s\u00e5 du vill f\u00f6rmodligen ta bort alla stilar som skiljer dem fr\u00e5n omgivande text:<\/p>\n
a { text-decoration: none; color: inherit; }<\/pre>\n
Men du kanske fortfarande vill att l\u00e4sarna ska ha tillg\u00e5ng till de ursprungliga webbadresserna, och en enkel l\u00f6sning \u00e4r att automatiskt infoga dem efter den l\u00e4nkade texten:<\/p>\n
a[href]:after {content: \" (\" attr(href) \")\";font-size: 90%;color: #333;}<\/pre>\n
Denna CSS ger resultat som f\u00f6ljande:<\/p>\n
a[href]:efter<\/strong> riktar sig specifikt till positionen efter (:efter<\/strong>) varje l\u00e4nkelement (a<\/strong>) som faktiskt har en URL ([href]<\/strong>).  De inneh\u00e5ll<\/strong> deklarationen infogar h\u00e4r v\u00e4rdet av href<\/strong> attribut mellan parenteser.  Observera att andra stilregler kan till\u00e4mpas f\u00f6r att styra visningen av det genererade inneh\u00e5llet.<\/p>\n
<\/span>Hantera sidbrytningar<\/span><\/h3>\n
F\u00f6r att undvika sidbrytningar som l\u00e4mnar isolerat inneh\u00e5ll, eller bryta det obekv\u00e4mt i mitten, anv\u00e4nd sidbrytningsegenskaperna: sidbrytning-f\u00f6re<\/strong>, sidbrytning-efter<\/strong> och page-break-in<\/strong>.  Till exempel:<\/p>\n
table { page-break-inside: avoid; }<\/pre>\n
Detta b\u00f6r hj\u00e4lpa till att f\u00f6rhindra att tabeller sp\u00e4nner \u00f6ver flera sidor, f\u00f6rutsatt att ingen \u00e4r l\u00e4ngre \u00e4n en enda sida.  Liknande:<\/p>\n
h1, h2 { page-break-before: always; }<\/pre>\n
Det betyder att s\u00e5dana rubriker alltid startar en ny sida.  Det kan dock orsaka problem om du omedelbart f\u00f6ljer din sidas h1 med en h2, eftersom h1 kommer att hamna p\u00e5 en sida helt f\u00f6r sig.  F\u00f6r att undvika detta, avbryt helt enkelt sidbrytningen med en v\u00e4ljare som riktar sig till den specifika instansen, till exempel:<\/p>\n
h1 + h2 { page-break-before: avoid; }<\/pre>\n
<\/span>  Visa utskriftsstilar<\/span><\/h2>\n
I alla fall b\u00f6r din webbl\u00e4sare och ditt operativsystem tillhandah\u00e5lla en f\u00f6rhandsgranskningsfunktion, ofta som en del av standarddialogrutan f\u00f6r utskrift.<\/p>\n
Chrome-webbl\u00e4saren g\u00f6r det bekv\u00e4mare att kontrollera och till och med fels\u00f6ka dina utskriftsstilar via utvecklarverktyg, vilket visas i det h\u00e4r exemplet som visar ett CV med en utskriftsformatmall.  \u00d6ppna f\u00f6rst huvudmenyn och v\u00e4lj Fler verktyg<\/strong> f\u00f6ljt av Utvecklarverktyg<\/strong> alternativ:<\/p>\n
\n<\/figure>\n
Fr\u00e5n den nya panelen som visas v\u00e4ljer du Meny<\/strong>, d\u00e5 Fler verktyg<\/strong>, f\u00f6ljd av Tolkning<\/strong>:<\/p>\n
\n<\/figure>\n
Scrolla sedan ner till Emulera CSS-medietyp<\/strong> milj\u00f6.  I rullgardinsmenyn kan du v\u00e4xla mellan utskrifts- och sk\u00e4rmvyn f\u00f6r ditt dokument:<\/p>\n
\n<\/figure>\n
N\u00e4r du emulerar utskriftsformatmallen, standarden Stilar webbl\u00e4sare<\/strong> \u00e4r tillg\u00e4nglig f\u00f6r att inspektera och \u00e4ndra livestilsreglerna.  T\u00e4nk p\u00e5 att emulering av utskrifter p\u00e5 en sk\u00e4rm fortfarande inte \u00e4r 100 % korrekt.  Webbl\u00e4saren vet ingenting om pappersstorlek och @sida<\/strong> regel kan inte efterliknas.<\/p>\n
<\/span>  Skriva ut till en PDF<\/span><\/h2>\n
En praktisk funktion i moderna operativsystem \u00e4r m\u00f6jligheten att skriva ut till en PDF-fil.  I sj\u00e4lva verket kan allt du kan skriva ut ist\u00e4llet skickas till en PDF-fil \u2013 ingen riktig \u00f6verraskning eftersom en PDF-fil trots allt ska representera ett utskrivet dokument.<\/p>\n
Detta g\u00f6r HTML, i kombination med en utskriftsstilmall, till ett utm\u00e4rkt s\u00e4tt att skapa ett h\u00f6gkvalitativt dokument som kan skickas som en bilaga, s\u00e5v\u00e4l som att skrivas ut.<\/p>\n
\n<\/figure>\n
<\/span>  Skriv ut en m\u00e4ngd olika dokument<\/span><\/h2>\n
Du kan anv\u00e4nda en utskriftsformatmall f\u00f6r att skapa kvalitetsdokument, inklusive allt fr\u00e5n ditt CV till recept eller evenemangsannonser.  Webbsidor ser vanligtvis fula ut och inneh\u00e5ller o\u00f6nskade detaljer n\u00e4r de skrivs ut, men ett litet antal stiljusteringar kan dramatiskt f\u00f6rb\u00e4ttra utskriftsresultaten.  Att spara de slutliga resultaten som en PDF \u00e4r ett snabbt s\u00e4tt att skapa attraktiva, professionella dokument.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Bobby Jack (65 artiklar publicerade)
<\/strong><\/p>\n
Bobby \u00e4r en teknikentusiast som arbetat som mjukvaruutvecklare under de flesta av tv\u00e5 decennier.  Han brinner f\u00f6r spel, arbetar som chefredakt\u00f6r p\u00e5 Switch Player Magazine och \u00e4r f\u00f6rdjupad i alla aspekter av onlinepublicering och webbutveckling.<\/p>\n
                            Mer fr\u00e5n Bobby Jack<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n