Hi,

I am trying to use two different text styles in the top left header area. I have a hard time achieving this, since I can only add unstyled content while the style goes directly into the @top-left media query. Any suggestions to how I can get it done? The attachment is showing what I am trying to achieve.

1. Screenshot 2022-12-05 at 09.39.26.png‎ 13.0 kB ‎
   Header screen shot

Running elements should be able to handle this:
https://css4.pub/2022/running-headers/#running-elements

Edited 5 Dec 2022 by howcome

Thanks for your reply howcome. Thanks for your suggestion. Running elements are great as long as the content is not depending on any PDF specific values. In my case I am using the section title as one part of the header text and that is depending on what page you are on. So the header will change slightly for each section.

I have used `string-set: section-title contents` to achieve this and it looks like combining string() and element() for content is not supported.

What if you use two separate margin boxes, and style them gently to appear side-by-side?
https://css4.pub/2022/running-headers/#aligning-running-headers

Edited 7 Dec 2022 by howcome

Thanks again howcome. The solution needs to work dynamically for all kinds of title lengths. Do you know if prince supports something like

 width: fit-content 

in margin box? I have not found a solution to it so far. The article you shared uses a fixed width in the example which won't work for us.

Thanks again.

Calculations are described here:
https://www.w3.org/TR/css-page-3/#flex-fit
Alas, I don't see a general solution for your very valid use case.

If you can center your headers, you could use "top-left" for the first string, and "top-right" for the second. Or use "top-left-corner" for the first, and "top-left" for the second. But this will probably not give you the alignment you're after.

Edited 8 Dec 2022 by howcome

If we were to find a general solution, we could possibly introduce pseudo-elements for margin boxes.

For example, instead of

@top-left {
  content: string(chapter) " | " string(section);
  color: gray;
}

one could write:

@top-left {
  content: string(chapter);
  color: green;
}

@top-left:after {
  content: " | " string(section);
  color: gray;
}

Any better ideas for how to achieve this?

I think that solution would work great for my case. Another solution could be to allow combining element and string

@top-left {
  content: element(chapter) " | " string(section);
  color: green;
}

Given that the running element would keep it's style and not be affected by the color styling of the margin box. But I think your solution is cleaner.

Any chance that could be implemented in near future?

How about:

https://css4.pub/2022/running-headers/#changing-running-elements

Nice! That solved it Thanks!