Still working on converting my document to work with prince.

Setting up running footers I've run into a problem.

html
<section>
<article id="my-first-chapter">
    <header class="entry-header">
        <h3 class="entry-title">The first chapter title</h3>
    </header>
    <div class="entry-content">
        <p class="copyright">The copyright stuff for this chapter</p>
         <!-- the rest of the chapter -->
    </div>
</article>
<!-- more chapters with same tags for first few lines -->
</section>

css
@page:left {
  @bottom-left {
    content: element(footer);
    font-size: .75em;
   }
}
@page:right {
  @bottom-right {
    content: element(footer);
    font-size: .75em;
  }
}
.copyright { position: running(footer);}

Left hand pages, the footer is left aligned, right hand pages though, are still left aligned. See attached screenshot. (yellow background added temporarily to see where the margins are_ Have I missed something about how this is supposed to work?

1. Screenshot_2024-09-23_21-02-06.png‎ 6.4 kB

Margin boxes have no intrinsic styles, so ordinarily you'd have to stick "text-align: right" on your @bottom-right margin boxes to achieve the effect you want. However, you're flowing an element into the margin box, which means that the flowed element is going to inherit its text-align property from its *original context*, not from the margin box it ends up in, so that won't work here – you'll need to stick the text-align property directly on the flowed element, not on its margin box. I believe "text-align: outside" will achieve what you want here.

Edited 24 Sep 2024 by David J Prokopetz

Ah, that does work, thank you.

I was basing my code on this table which stated @bottom-right and @top-right were automatically right aligned (which does work for hard-coded in css content as well as content utilizing string-set, but I had other issues with that, namely that the string-set did not update if I had display:none set on the class). I'm assuming I must have just missed the warning that the default alignment doesn't apply to moved (flowed) content.

It's not that alignment is special – it's that moved elements inherit their CSS properties from their original context, not from the margin box they got moved into. Try giving .entry-content and @bottom-right different font sizes, for example; you'll see that .copyright (which is a child of .entry-content in its original context) still inherits its font size of the former, not the latter.

Edited 25 Sep 2024 by David J Prokopetz

I think we're saying the same thing to each other, in different ways, because @bottom-right and @top-right DO have the contents right aligned when I do something like content: "this is the bottom-right"; or use string-set to copy the contents of .copyright. Which is what I was assuming would also happen for moving the whole element. There probably is something in the documentation that mentions this isn't the case, I highly likely just missed it. Everything but the alignment I'd already set, because I *did* catch that moving content is how you get all sorts of fancy effects in the margin boxes - I assumed the alignment would not need to be set, because that table says it already is.

I'm afraid you're not missing anything in the documentation – rather, it sounds like you're fuzzy on how CSS inheritance works in this particular context.

Elements inherit (heritable) CSS properties from their parent elements, and moving an element in this fashion does not change what its parent element is for inheritance purposes. In your example, the element with class ".copyright" still has the element with class ".entry-content" as its parent element for the purpose of CSS inheritance, even after being moved; none of the CSS properties of the @top-right margin box will be inherited by the moved .copyright paragraph, because the @top-right margin box is not the .copyright paragraph's parent element for inheritance purposes.

Conversely, when you create content in the @top-right margin box ex nihilo rather than moving it from somewhere else (for example, using the "content" CSS property), the resulting content *is* a child of the @top-right margin box for CSS inheritance purposes, and *does* inherit CSS properties from it.