PDF Styleguide
Nærværende dokument beskriver de overordnede muligheder for, hvordan man som blanketdesigner har mulighed for at tilføre custom styling til PDF-udgaverne af sine blanketter, samt giver en række eksempler på konkrete style-muligheder
Sådan gør du
Det er i Orbeon muligt at indføre custom styling på de enkelte blanketter ved at indsætte styling directe i blankettens XML
CSS'en indsættes i en xh:style knude i toppen af XML'en som illustreret nedenfor
Herfra kan du gå i gang med at indsætte alt det CSS du har lyst til. Du kan læse mere om syntaksen og brugen af CSS her https://www.w3schools.com/css/
For at stylingen kun påføres PDF'en, så skal CSS'en placeres inde i et @page område som illustreret nedenfor
@page {
* {
font-family: "IBMPlexSans", "system", sans-serif !important;
}
.orbeon .xforms-output-output:empty {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.navbar-inner .container img {
display: block !important;
}
} |
Konkrete eksempler
Nedenfor ses en række konkrete eksempler lavet hos Erhvervsstyrelsen ifm. projektet med at lave ansøgningsskemaer til Covid-19 hjælpepakkerne.
Eksemplerne blev oprindeligt lavet i hast og den oprindelige mening bag de enkelte selectors kan derfor potentielt være gået tabt og bør primært bruges som inspiration
Generelt sidelayout
size: A4;
margin: 2.5cm; |
Skjul header, footer og padding
/* Skjul footeren */
@bottom-center {
content: '' !important;
display: none !important;
}
@top-center {
content: '' !important;
display: none !important;
}
@top-center {
border: none !important;
}
@top-right {
border: none !important;
}
@bottom-center {
border: none !important;
}
@bottom-right {
border: none !important;
}
@bottom-left {
border: none !important;
}
padding-top: 0;
padding-bottom: 0; |
Gør labels fede
Skriftstørrelse på diverse tekster
Mere spacing mellem grids i PDF
Skjult ikke-valgte radio buttons og tjekbokse
Links (til sort farve og fjernet understregning - kan bruges uafhængigt)
Tips og tricks
!important: Selvom brugen af "!important" inden for CSS-styling normalt betragtes som bad practise, så kan det i et helt konkret tilfælde som her med styling af en PDF være et effektivt redskab til at få ting igennem uden at skulle lave alt for kringlede CSS-selectors
Kommentarer: Brug kommentarer for de enkelte dele af din CSS for at huske, hvad formålet med de enkelte dele er. Kommentarer er tekst placeret mellem et "/*" og et "*/"