htmlcssangularprinting

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


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?


Solution

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