Log in / Register

Forum › How do I...?

@page Font Style Inheritance

nico

I would like to style text font in one place so that the style definition is applied to the body element and all its children as well as header footer. Unfortunately, it seems that @page doesn’t inherit anything (at least not from body). So my question is : is there a way to define font styles in one place for every text of a document ?


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>@page Font Style Inheritance</title>
<style type="text/css">
	body
	{
		font-family : monospace;
		font-size   : 25pt;
		color       : indigo;
	}
	@page
	{
		font-family : inherit; /* Does not inherit from body */
		font-size   : inherit; /* Does not inherit from body */
		color       : inherit; /* Does not inherit from body */

		@bottom-center
		{
			content : "page " counter( page );
		}
	}
</style>
</head>
<body>

<h1>@page Font Style Inheritance</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>
dauwhe
I believe @page should inherit from the document root, but there has been some confusion on this point. The current editor's draft of the CSS Paged Media module says,

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.


Dave
nico

Thank you for your answer Dave. It seems that in Prince @page does not inherit from the document root as you can see in this example :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>@page Font Style Inheritance</title>
<style type="text/css">
  :root, html, body
  {
    font-family : monospace;
    font-size   : 25pt;
    color       : indigo;
  }
  @page
  {
    font-family : inherit; /* Does not inherit from :root, html or body */
    font-size   : inherit; /* Does not inherit from :root, html or body */
    color       : inherit; /* Does not inherit from :root, html or body */

    @bottom-center
    {
      content   : "page " counter( page );
    }
  }
</style>
</head>
<body>

<h1>@page Font Style Inheritance</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>
mikeday
Right, we have not done this yet. However, we are planning to do so in future.
nico
So from what I understand, I need to specify font styles in body and in @page. Correct?
mikeday
Yes, that is correct.
mikeday
In Prince 13.1 the @page rules now inherit from the document root!