PDF-design
Designet til Compose har blitt oppdatert. Siden kan inneholde skjermbilder av det gamle designet, men informasjonen er oppdatert. Vi takker for din tålmodighet mens vi oppdaterer bildene!
Å lage et PDF-design er en solid måte å sette et særegent preg på PDF-ene dine uten å måtte produsere PDF-templat for hver tjeneste du kjører. På denne siden finner du den tekniske informasjonen til PDF-generatoren vår, samt en veiledning til hvordan du enklere kan feilsøke PDF-CSS, samt konkrete CSS-eksempler. Her er en full innholdsfortegnelse:
- 1 PDF-generering
- 2 Tilpass PDF-design
- 2.1 Fonter
- 2.2 @page Media – bredde og marginer
- 2.3 Plassholdere
- 2.4 Sidetall
- 2.5 Logoer, bilder og vannmerker
- 2.5.1 Bildelogo
- 2.5.2 Logofont
- 2.5.3 Logo på toppen
- 2.5.4 Vannmerker
PDF-generering
Compose bruker OpenHTMLtoPDF-biblioteket til å generere PDF-er, som baserer seg på Flying Saucer. Dette verktøyet lar deg designe PDF-er med brukeragenten CSS 2.1 Page media. Du finner en komplett dokumentasjon (engelsk) for forståelsen av logikken og mulighetene for tilpassing av PDF-dokumenter bak disse nettlenkene:
Feilsøk CSS i Chrome
Det er ikke like intuitivt å feilsøke PDF-design i en nettleser sammenlignet med tjeneste-design. Heldigvis finnes det en hendig funksjon i skjemabyggeren. Åpne Forhåndsvisning-menyen og velg PDF-valget i Layout-listen. Huk deretter av boksen vis HTML istedenfor å generere PDF for å forhåndsvise HTML-strukturen.
Forhåndsvisningen vil være en nesten identisk visning av PDF-en din.
Viktig: Du vil kunne erfare noe variasjon fra forhåndsvisningen og PDF-en generert i tjenesten. For å unngå denne variasjonen, åpne Chrome DevTools, enten ved å høyreklikke på siden og trykke Inspiser, eller bruk snarveien Ctrl+Shift+I. Trykk prikker-ikonet øverst i høyre hjørne i DevTools-menyen. Naviger til More tools, velg Rendering, bla ned til Emulate CSS media type og velg print.
Last inn siden på nytt og da skal du kunne jobbe med en presis HTML-versjon av PDF-en. Nå kan du se, feilsøke og redigere CSS-en i PDF-designet slik du ville gjort for tjeneste-design. Firebug er også et godt verktøy for feilsøking i Firefox.
Tilpass PDF-design
For PDF-design gjelder de samme stilingsmetodene som for tjenestedesign. Ta en titt på dokumentasjonen for Bootstrap Theme for å se hvordan du designer skjemainnhold. Under er noen spesifikke bolker CSS-kode for forskjellige PDF-implementeringer.
Fonter
Du kan bygge fonter inn i PDF-er ved å inkludere .tff-filer i designet. I tilfellet under er fonten lokalisert i en egen mappe i designet med navnet fonts. Legg til fonter, gjerne med rik tekstformatering (normal, kursiv, fet, fet-kursiv etc.) og legg til fonten til PDF-en ved å referere til plasseringen (src: url(“fonts/arial.tff”):
@font-face {
font-family: "Arial";
src: url("fonts/arial.ttf");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}@page Media – bredde og marginer
Tilleggsinformasjon om @page media finner du her; http://www.w3.org/TR/css3-page. @page media (@page{}) i CSS-stilarket er hvor du styler layouten til sidene og legger til innhold. Her er et eksempel av @page media med innstillinger for sidenes bredde (width) og marginer (margin):
@page {
width: 100%;
margin: 40pt 30pt 50pt 40pt !important;
}Plassholdere
For å legge til gjentagende innhold over alle PDF-sidene må innholdet designeres til eksisterende plassholdere rundt sidemarginene i @page media. Logoer, bilder, sidenumre, topptekster, bunntekster etc. kan inkluderes på disse plassene i PDF-en. Det er 16 tilgjengelige plassholdere:
@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottomI de kommende avsnittene er eksempler på innhold du kan legge til i plassholderne.
Sidetall
Legg til sidetall i en av plassholderne i PDF-en.
@page {
@bottom-right-corner {
font-family: "Arial";
content: "" counter(page);
font-size: 0.8em;
}
}Logoer, bilder og vannmerker
Bildelogo
Legg til en billedlig logo til designet (i eksempelet i mappen img). Logoen er lagt til i plassholderen i det øvre høyre hjørnet. Det er anbefalt å bruke bildefiler med oppløsning på minst 300DPI for å unngå et pikselert bilde. Tilpass størrelsen på logoen med width- og height-attributer.
@page {
@top-right-corner{
content: "";
background-image :url(../../img/logo-600.jpg);
background-repeat: no-repeat;
background-position: -4pt top;
width: 100%;
height: auto;
}
}
Logofont
En logo kan legges til som en font. Dersom du har laget en font med logoen er det bare å laste opp designet med fonten i fonts-mappen.
@font-face {
font-family: "MoreFontLogos";
src: url("fonts/MoreFontLogos.ttf");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
font-weight: normal;
font-style: normal;
}
@page {
@top-right-corner{
font-family: "MoreFontLogos";
content: "b";
color: #000000;
font-size: 42pt;
text-align: left!important;
vertical-align: middle;
}
}Logo på toppen
Det er en tom div hvor du kan legge til en bakgrunnslogo på toppen av PDF-sidene.
.contentRow.topHeader .imageSpan.headerLogo {
background-image:url(img/moreLogo2.png);
background-repeat:no-repeat;
display: inline-block;
height: 60px;
width: 200px;
}Vannmerker
Et vannmerke er et bilde som vil vises på bakgrunnen av hver side. Når vannmerket lages bør farge og dimensjoner være gjennomtenkt. Bildet bør ideelt sett ikke forstyrre innholdet i PDF-en. Det er derfor anbefalt å ha et vannmerke med ikke-aggressive farger, for eksempel en lys gråtone (#eeeeee) med gjennomsiktig bakgrunn.
Dimensjonene bør være proporsjonale med dimensjonene til en A4-side (2480px*3508px med 300DPI). Det optimale filformatet til vannmerket er .tif, men .gif, .png, og .bmp vil også fungere. Høy DPI resulterer i høyere oppløsning, men unngå for store filstørrelser. Du risikerer å ikke få til å laste opp designfilen hvis den er for stor.
Legg til vannmerket til hver side med følgende CSS-kode:
@page {
background: url("img/logo-pdf-big.bmp");
background-repeat: no-repeat;
}Det er også nødvendig å sette den standard hvite bakgrunnen til gjennomsiktig:
.printWrapper.singlePageWrapper table.pageQuestionsWrapper,
table > tbody > tr, table > tbody > tr > td,
.contentRow.questionsGroup > table {
background-color: transparent !important;
}