Unable to override CSS variables per-section

[Fleker]

I'm having a good time using this tool to render PDFs. But now I'm working on a book using this tool which is an anthology, with a collection of short stories.

For printing, I want to have the title and author placed at the top of the page, one on the left and one on the right:

  @page :left {
    margin-left: var(--outside-margin);
    margin-right: var(--inside-margin);
    @top-left {
        margin-bottom: -.22in;
        font-family: 'Libre Baskerville', serif;
        font-weight: 300;
        font-size: 9.2pt;
        content: var(--author);
        padding-left: .2in;
    }
  }

  @page :right {
      margin-left: var(--inside-margin);
      margin-right: var(--outside-margin);

      @top-right {
          margin-bottom: -.23in;
          font-family: 'Libre Baskerville', serif;
          font-weight: 300;
          font-size: 10pt;
          content: var(--title);
          padding-right: .2in;
      }
  }

This works when I set the variables in the root:

:root {
  --title: 'The Next Horizon';
  --author: 'Author Name';
}

But since this is an anthology, I want to be able to change the title that appears on top depending on the individual titles. This means I need a way to replace this title variable. But when I try to do that, it doesn't appear to have an effect in the tool:

      <section id="introduction" style="--title: 'Introduction'">

section#introduction {
  --title: 'Introduction'
}

Neither seem to have an effect, but I can confirm in the basic HTML via a web browser that the value should've changed.

Is this a bug? Should I just stick with having the name of the entire collection?

[liZe]

Hi!

Thanks for the report.

This is not a bug. As the page is not a child of section#introduction, the cascade doesn’t apply, you can’t do this with variables.

What you’re looking for is running elements, there’s a short blog entry about them if you want an example. It should be perfect for your use case!