4 Tekst, Code invoegen en layout aanpassen

De standaardrapportage GMJV is (net als dit boek) gemaakt met Quarto. Met Quarto kunnen opgemaakte tekst en afbeeldingen gecombineerd worden met code. In dit hoofdstuk worden de enkele technieken behandeld waarmee je een quarto document kan bewerken.

4.1 ‘Source’ en ‘Visual’ editor

Linksboven in een quarto document kan je kiezen tussen twee manieren van bewerken: Source en Visual. Als je niet zo thuis bent in programmeren of markdown zal je waarschijnlijk gebruik willen maken van de visual-editor. Dit lijkt het meest op andere tekstverwerkers. Desalnietttemin is het goed om bewust te zijn van beide mogelijkheden, al is het slechts om terug te wisselen wanneer je perongeluk op source hebt geklikt.

In de visual-editor worden opgemaakte tekst en afbeeldingen getoond. Ook krijg je bovenaan een werkbalk te zien zoals in Word & andere tekstverwerkers. Met deze werkbalk kan je o.a.
- Tekst opmaken.
- Een type Kop / Header selecteren.
- Lijsten maken
- Links, plaatjes , codeblokken of tabellen invoegen.
- Lees hier meer over de Visual Editor
In de source-editor wordt de ‘markdown-syntax’ van je document weergeven. Dit is de onderliggende logica van je document. In de source-editor ontbreekt de werkbalk. Toch kan je alle dingen doen die ook in de visual editor kunnen. Hiervoor kan je gebruik maken van markdown-syntax. Bijvoorbeeld:
- Een regel die met een hashtag begint wordt een kop. De hoeveelheid hashtags geeft het niveau van de kop aan. Dus: “# Kop 1” “## Kop 2” etc.
- **woord** maakt ‘woord’ vetgedrukt, *woord* maakt ‘woord’ schuingedrukt.
- Lees hier meer over Markdown Basics

4.2 Stijlelementen in tekst

In de tekst kunnen verschillende stijlelementen toegevoegd worden, zoals een tussenlijn, een blok met gele achtergrondkleur en een extra witregel.

4.2.1 Witregel toevoegen

Een witregel kan toegevoegd worden door <br> in de tekst toe te voegen.

4.2.2 Websites

Websites met hyperlink kunnen toegevoegd worden door eerst de gewenste naam van de titel tussen nietjes [] te zetten en meteen daarachter tussen haakjes () de link te zetten:

[Titel van website](www.website.nl)

4.2.3 Tussenlijn

In de standaard rapportage worden horizontale lijnen gebruikt om tussen verschillende secties. De opmaak van de tussenlijn wordt bepaald in het custom.css bestand. Daar staat de div .tussenlijn die aangeeft hoe deze lijn eruit ziet. Hier kan je dus ook de eigenschappen van de lijn veranderen, zoals kleur of dikte. De ‘div’ met de class ‘tussenlijn’ ziet er zo uit:

/*Lijntje dat tussen tekstblokken geplaatst kan worden*/
.tussenlijn {
  border-bottom: 1px solid #86B443;
}

De tussenlijn zelf ziet er standaard zo uit:

Een tussenlijn kan toegevoegd worden in de rapportage door het volgende toe te voegen:

::: tussenlijn

:::

4.2.4 Achtergrondkleur

In de standaard rapportage worden tekstvakken soms voorzien van een achtergrondkleur. Ook de opmaak van dit blok wordt bepaald in het custom.css bestand. Daar staat de div .achtergrondkleur die aangeeft hoe deze lijn eruit ziet. Hier kan je dus ook de eigenschappen van de class veranderen. Het blok ziet er standaard zo uit:

/* achtergrond-kleur*/
.achtergrondkleur {
  background-color: #F7F7DB;
  color: #012C17;
  padding: 20px;
}

Dit ziet er zo uit:

Hier tekst die in het blok komt.

Een blok met achtergrondkleur kan je zelf op de volgende manier toevoegen:

::: achtergrondkleur

Hier tekst

:::

4.2.5 Inleiding

In de standaard rapportage worden sommige teksten als inleiding weergegeven. Deze teksten worden dan dikgedrukt en iets groter weergegeven. Deze opmaak wordt bepaald in custom.css Daar staat de div .inleiding die aangeeft hoe deze eruit ziet. Hier kan je dus ook de eigenschappen van de class veranderen. Dit ziet er standaard zo uit:

/* class voor inleiding*/
  .inleiding {
    color: #002c17;
    font-size: 19px;
    font-weight: bold;
  }

Dit ziet er zo uit:

Hier tekst die in de inleiding komt.

Tekst met deze layout kan je zelf op de volgende manier toevoegen:

::: inleiding

Hier tekst

:::

4.2.6 Titel

Je kunt op verschillende manieren titels/tussenkoppen toevoegen.

Headers worden in de inhoudsopgave getoond. Header 1 heeft in de (voorbeeld)rapportage een aangepaste opmaak. Deze opmaak bepaald in het custom.css bestand. Daar staat de div h1 die aangeeft hoe deze header eruit ziet. Hier kan je dus ook de eigenschappen van de header veranderen, zoals kleur of dikte. De ‘div’ ziet er zo uit:

/*H1 eigenschappen*/
  h1 {
    page-break-before: always; /* Iedere H1 maakt een pagebreak. relevant voor pdf uitdraai */
    font-family: "Century Gothic";
    font-size: 24px;
    color: white;
    background-color: #007E48;
    padding: 20px;
  }

Je kunt headers toevoegen door # Header-naam in te voegen.

Dit ziet er zo uit: Je kunt ook headers met iconen toevoegen. Dat kan d.m.v. de volgende code:

# ![](Naam_van_afbeelding.png) Header-naam {.h1-icoon}

Dit ziet er dan bijvoorbeeld zo uit bij de header Achtergrondkenmerken met afbeelding iconen/achtergrondkenmerken.svg:

Een andere optie zijn titels in de tekst. Deze worden in de rapportage gebruikt als subkopjes binnen in thema. Ook hiervan wordt de opmaak bepaald in custom.css. Dit ziet er zo uit:

/* class voor titels*/
  .titel {
    color: #002c17;
    font-size: 21px;
    font-weight: bold;
  }

Een titel ziet er dan zo uit:

Titel van subkop

Een titel kan je zelf op de volgende manier toevoegen:

::: titel

Hier titel

:::

4.3 R code in code-blokken

Om te zorgen dat tabellen en grafieken met een dynamische inhoud in de rapportage geplaatst kunnen worden maken we gebruik van code-blokken met R code. Een code-blok kan je tijdens het bewerken van je rapport draaien door rechtsbovenin het code-blok op de groene pijl te klikken. De uitvoer van de code zal dan onder het blok verschijnen.

Een nieuw code-blok kan je als volgt aanmaken:

In de visual editor: Insert > Executable Cell > R
In de source editor: Zoals hieronder. Type drie backticks ‘```’ gevolgd door ‘{r}’ Sluit het blok af met drie backticks.

```{r naam-blokje, echo=FALSE}
#Hier R code
```

Standaard worden codeblokjes ook in de rapportage getoond. Dat is meestal niet de bedoeling. Daarom is hierboven de chunk-option ‘echo=FALSE’ opgegeven. Optioneel kan je het code-blok een naam geven zoals naam-blokje hierboven. Een naam kan helpen met overzicht en het opsporen van fouten.

4.4 R code in lopende tekst

Het is ook mogelijk om R code in lopende tekst te plaatsen. Op de plek waar je de code aanroept toont de rapportage dan het resultaat van de code. Bijvoorbeeld een percentage, of een gemeentenaam. De syntax is als volgt:

` r #hier code `

Deze syntax kan je overal gebruiken in de lopende tekst bijvoorbeeld:

Een Header 1 met een dynamische gemeentenaam:

# ` r params$gemeentenaam`

Inline berekeningen:

Er waren ` r totaal_deelnemers ` deelnemers. Daarvan was ` r deelnemers_geslaagd / totaal_deelnemers * 100` % geslaagd.

4.5 Kolomlayout

Je kan onderdelen van je rapportage naast elkaar presenteren in Quarto. Hier wordt een van de manieren om dit te doen uitgelegd. Hierbij wordt steeds gebruik gemaakt van twee setjes van drie dubbele punten naast elkaar. Voor mensen die thuis zijn in html is het handig te weten dat dit de markdown syntax is voor een ‘div’.

Waarschuwing

Let op. Om deze werkwijze toe te passen het nodig om de editor op ‘Source’ in te stellen.

Zie ook het Quarto boek over Custom layouts

4.5.1 Syntax voor twee kolommen van gelijke grote:

::: {layout=“[50,50]”}

::: column

Dit is tekst in de linkerkolom

:::

Dit is tekst in de rechterkolom

::: column

:::

4.5.2 Het resultaat:

Dit is tekst in de linkerkolom

Dit is tekst in de rechterkolom

4.5.3 Toelichting

Het buitenste setje van ‘:::’ bepaald de layout.
- Achter de eerste ‘:::’ komt ‘{layout=“[50,50]”}’ te staan
- Het maakt alleen uit hoe de getallen zich tot elkaar verhouden.
  - [5,5] geeft hetzelfde resultaat als [50,50].
  - [3,7] maakt twee kolommen waarvan de linker kolom 30% van de ruimte opneemt en de rechterkolom 70%.
  - Het mogelijk meer dan twee kolommen te definieren.
Tussen het buitenste setje ‘:::’ worden setjes geplaatst voor de alle kolommen.
- Achter de eerste ‘:::’ van de kolom komt het woordt ‘column’ te staan
- Tussen de eerte en laatste ‘:::’ van de kolom kan je ieder soort inhoud plaatsen. Een afbeelding, tekst of een code-blok waar een grafiek uitkomt.

4.5.4 X-assen uitlijnen bij verschillende lengte labels

Als je twee grafieken naast elkaar plaatst kan het zijn dat de x-assen niet op dezelfde hoogte staan. Dit heeft dan te maken met het aantal regels dat verschillende aslabels innemen. De x-as wordt omhoog geduwd door de aslabels. Als je de x-assen in dit geval gelijk wilt trekken kan dat met het argument x_as_regels_toevoegen.

staafdiagram met percentages voor verschillende indicatoren bij jongvolwassenen in GGD Limburg-Noord: Volgt een opleiding : 71%, Ervaart gezondheidals (zeer) goed : 63%, Voelde zich in deafgelopen 4 wekenvaak tot voortdurendgelukkig : 54%, Is tevreden metzijn/haar leven : 79%.

In het bovenstaande voorbeeld heeft de linkergrafiek maximaal 4 regels in de aslabels, terwijl de rechtergrafiek er slechts 2 heeft. Dit kunnen we dus uitlijnen door twee lege regels toe te voegen aan de aslabels van de rechtergrafiek.

4.6 Afbeelding invoegen

Het is ook mogelijk om afbeeldingen in te voegen in de rapportage. Daarvoor moet de afbeelding zich bevinden in de werkmap. Vervolgens kan hiermee een afbeelding toegevoegd worden:

![](Naam_van_afbeelding.png)

Op een vergelijkbare manier worden ook de iconen toegevoegd aan de header:

# ![](Naam_van_afbeelding.png) Header-naam {.h1-icoon}

4.7 Tabel en Grafiek layout t.b.v digitoegankelijkheid

Standaard maken grafiekfuncties automatisch alt-text o.b.v. de data in de grafiek. Alt-text is één van de manieren om ervoor te zorgen dat de informatie die een grafiek overbrengt digitoegankelijk is. De automatisch gegenereerde alt-text is een opsomming van alle labels in de grafiek en de percentages die daarbij horen. Zo een opsomming kan (zeker bij grafieken met veel groepen en percentages) het nadeel hebben dat er overzicht verloren gaat.

Een alternatieve benadering is om de grafiek van een digitoegankelijke tabel met de equivalente informatie te voorzien. In alle grafiekfuncties kan dit met de parameter tabel_en_grafiek. Wanneer deze optie aantstaat worden er op de plaats van de grafiek twee tabbladen gemaakt: “Tabel en Grafiek”. Hiervoor moeten kleine aanpassingen aan aanroep van codeblokjes gedaan worden.

get_alt_text() is niet meer nodig
gebruik results = ‘asis’
geen ‘plot = monitor_df’ maar direct aanroepen (resulteert anders in ongewenste ‘NULL’ onder plot).

#|echo: fenced

monitor_df %>% 
  maak_staafdiagram_dubbele_uitsplitsing(
    var_inhoud = "LVEES404",
    var_crossing_groep = "AGGSA402",
    var_crossing_kleur = "AGLFA401",
    tabel_en_grafiek = TRUE #tabel_en grafiek staat aan
    )

Grafiek
Tabel


	Vrouw	Man
Is sterk eenzaam
16-17 jaar	25%	*
18-20 jaar	30%	28%
21-25 jaar	25%	33%

Tabset panel in Quarto

Als tabel_en_grafiek = TRUE, wordt er aan de achterkant markdown syntax gegenereerd om de layout met tabbladen te maken.

Dit kan je ook zelf handmatig doen: Quarto Tabset-Panels