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?
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);
}
}