PDF Styleguide
- Blanketmotorens Produktteam
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 direkte 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 W3Schools.com
For at stylingen kun påføres PDF'en, skal CSS'en placeres inde i et @media print område som illustreret nedenfor
@media print {
* {
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
@page {
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
.xforms-label {
font-weight: 700;
} |
Skriftstørrelse på diverse tekster
/* Større skriftstørrelse på blankettitel */
.orbeon #xforms-form:not([target*="fb-test-iframe"]):not([action*="/blanketdesigner/orbeon/fr/orbeon/builder/"]) .fr-header-title div {
font-size: 25px !important;
margin-bottom: 10px !important;
overflow: visible !important;
font-weight: 700;
}
/* Control værdier */
.orbeon .xforms-field,
.orbeon .xforms-output.xforms-output-appearance-minimal output[role=textbox],
.orbeon .xforms-output.xforms-static output {
font-size: 14px;
border: none;
}
/* Brødtekst */
.orbeon .fr-grid .xforms-static.xforms-readonly.xforms-textarea pre,
.orbeon .fr-grid .xforms-static.xforms-readonly.xforms-output.xforms-mediatype-text-html {
font-size: 14px;
}
/* Default (labels) */
.orbeon {
font-size: 15px;
}
.fr-section-title .xforms-output-output {
font-weight: 700;
h1 .xforms-output-output {
font-weight: bold;
} |
Mere spacing mellem grids i PDF
.fr-grid {
margin: 0;
padding: 0;
}
.fr-grid-tr .xforms-control {
padding-bottom: 28px;
} |
Skjult ikke-valgte radio buttons og tjekbokse
.xforms-deselected {
display: none !important;
} |
Links (til sort farve og fjernet understregning - kan bruges uafhængigt)
.orbeon a[href]:link,
.orbeon a[href]:visited {
color: #000000 !important;
text-decoration: none !important;
} |
Tips og tricks
!important: Selvom brugen af "!important" inden for CSS-styling normalt betragtes som bad practise, 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 "*/"