How to localize content property in margin at-rules of paged media?

Question

I'm generating PDFs from a webpage using print styles and want to include localized page numbering (e.g., "Page 1 of 5" in English, "Side 1 av 5" in Norwegian) in the bottom-right margin of each page.

This SCSS works fine for a single language:

@page {
  @bottom-right {
    content: 'Page ' counter(page) ' of ' counter(pages);
  }
}

However, I want to reflect the user's current locale. I tried using the :lang() pseudo-class like this:

html:lang(nb) {
  @page {
    @bottom-right {
      content: 'Side ' counter(page) ' av ' counter(pages);
    }
  }
}

html:lang(en) {
  @page {
    @bottom-right {
      content: 'Page ' counter(page) ' of ' counter(pages);
    }
  }
}

But this does not work. Nothing shows up in the margin.

Is it possible to localize @page margin at-rules based on the document language?

C3roe · Accepted Answer · 2025-06-26 12:23:13Z

3

I don't think nesting @page into html { ... } can work.

Try using CSS variables instead:

html:lang(nb) {
  --page: 'Side';
  --of: 'av';
}
html:lang(en) {
  --page: 'Page';
  --of: 'of'
}
@page {
  @bottom-right {
    content: var(--page) ' ' counter(page) ' ' var(--of) ' ' counter(pages);
  }
}

answered Jun 26 at 12:23

C3roe

97.6k15 gold badges100 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to localize content property in margin at-rules of paged media?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related