Separate affiliation and email when using `string-set` in CSS

[Cédric Vidonne]

First thanks for the great work on pagedown it is a key component for our unhcrdown package that allows us to promote better quality and brand-aligned reports.

I would like to know if there is a way to separate the affiliation from the email if we want to use it in another place than the first page? As you can see in the example below, when using string-set in the CSS it extracts the content of the address.author-afil div but also all the children (in this case the email). Unfortunately from the pagedown HTML template, the affiliation doesn't have its proper div.

The Rmarkdown file:

---
title: "A Multi-page HTML Document"
author:
  - name: John Doe
    affiliation: Poetry Officer
    email: [e-mail]
output:
  pagedown::html_paged:
    toc: false
    css: "afil.css"
---

# Introduction

This is an example of a multi-page HTML document.

<p class="job-title"></p>

The CSS file: (CSS file name: afil.css)

address.author-afil {
  string-set: address-author-afil content(text);
}
  
.job-title:after {
  content: string(address-author-afil);
}

The result:

Couldn't find any CSS selector that worked, would you know a possible solution without altering the HTML template on our side?

FYI this issue is also reflected in our unhcrdown repo, issues 2 et 16.

Thanks in advance for your help.

[Alexander Sevostianov]

Hello @vidonne !
Do you mind altering your Rmarkdown file?
Because you can access yaml metadata from R without using css, like so:

<p class="job-title">`r rmarkdown::metadata$author[[1]]$affiliation`</p>

[Cédric Vidonne]

Hi @Darxor, Thanks for the proposal, we actually thought about it but as these are templates for the whole organization we would like to keep the Rmd as simple as possible and keep it mainly for content. If possible we would like to keep all the styling and inclusion of elements out of the Rmd.

[Alexander Sevostianov]

Your other option would be to include an html file like this in includes$after_body.
There is no css selector to target element without its child nodes that I know of.

<script>
    document.querySelector('.job-title').innerHTML = document.querySelector('.front-page .author-afil').childNodes[0].nodeValue;
</script>

[Cédric Vidonne]

@Darxor thanks worked like a charm!!!