Log in / Register

Forum › Bugs

'rem' units do not seemingly use a consistent root element

joelmeador
Had an interesting case today. I believe that what is happening is rem units for different parts of the page rendering use different root elements. The @page margin (@top, @bottom, etc.) appear to be based on the font-size defined on @page, whereas non-margin parts appear to be based on the font-size of the html element. If I drop something like this into the CSS, then suddenly the size of the page @top and the box in the PDF seem to be ~roughly the same size:

html {
  font-size: 50%;
}


  1. rem-test.html‎ 0.5 kB
  2. rem-test.pdf‎ 16.0 kB
dauwhe
There seems to be some ambiguity in the spec:

page-margin boxes inherit from the page context. The page context inherits from the root element. However, since the previous revision of CSS Paged Media Level 3 did not specify this point, an implementation that sets inherited properties in the page context to their initial values (as for the root element) is also conformant to CSS Paged Media Level 3. Note that this exception will be removed in Level 4.


joelmeador
Yup, that is reasonably ambiguous, though I think the current behavior is very curious given rems don't cascade from @page -> html but font-size does.