Standard way to put running elements in CSS 3

Question

What is the correct way to put Header and Footer in CSS 3 ? I am reading up on http://www.w3.org/TR/css3-gcpm/ and I would like to know if the below is the correct interpretation of how to use running elements .

Running elements has the property of being shifted from the normal "flow" of the document and headers and footers need that .

That is the significant part I am trying to achieve and , otherwise there is a string-set attribute which can be used to name a section and use it elsewhere int he page margins . I am also curious if 3rd party implementations support them ? I know of some similar markup's in some tools but I want to know if this is what CSS is trying to mean?

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Testing</title>
<style type="text/css">
div.header {position: running(header)}
div.footer {position: running(footer)} 
@page{
         @top-center {content: element(header)}
         @bottom-center {content: element(footer)}
     }    
</style>
</head>

<body>

<div class="header"> HEADER </div> 
<div class="footer"> FOOTER </div>
<div>
    Normal Text
</div>
</body>
<html>

http://jsfiddle.net/VubtS/ - But of-course browsers won't display that since it is for paged media .

I am trying this in some HTML - PDF convertes to see how much they comply with CSS 3 but apparently none of them renders this . Is my markup correct as per the Css3 definition ?

score 6 · Accepted Answer · answered Feb 01 '14 at 04:14

6

I believe that your syntax is correct. However I am also not seeing browser support for it yet. Most of the commercial HTML to PDF tools I have looked at (Winnovation, DynamicPDF, EvoPDF, RasterEdge, wkhtmltopdf and more) use WebKit or another layout engine that does not support CSS3 Paged Media.

I think these do though ...

Prince (It uses it's own layout engine PrinceXML)
DocRaptor (It uses PrinceXML as a webservice)
RealObjects
Antenna House

answered Feb 01 '14 at 04:14

theChrisMarsh

308
1
7

1

Thanks theChrisMarsh . Right I would like to add WeasyPrint which is a free alternative . Are there any reason why WebKit layout engines don't yetsupport CSS3 ? It it because they have their own custom formatting which is not CSS ? Can you please clarify ? – Nishant Feb 03 '14 at 19:10
1

flyingsaucer supports – Mandeep Pasbola Jul 03 '14 at 05:38
1

[PDFReactor](http://www.pdfreactor.com/product/doc_html/ch05s04.html#d0e3790) is another commercial library that supports them. – amram99 Jul 15 '14 at 13:30
1

Nishant, I don't have any special knowledge of the WebKit's team decision, but I think it's worth noting that the Paged Media Module is a **working draft** and is not formally endorsed by W3C. The original author of the module is Håkon Wium Lie, one of the early authors of the CSS specifications and a board member for YesLogic, the the creator of [Prince](http://www.princexml.com). Paged Media is intended for supporting the creation of printed documents, and that's not a priority for WebKit. – jamespaden Aug 28 '15 at 17:41
for an up-to-date list (as of 2016): https://www.print-css.rocks/tools.html – mb21 Jun 25 '16 at 18:02
1

A promising open-source project for CSS paged media is paged.js (https://www.pagedmedia.org/) – lonesomeday Jun 03 '19 at 16:39

score 1 · Answer 2 · answered Feb 12 '14 at 18:05

Just to confirm @theChrisMarsh's answer, the syntax is correct.

I have direct experience with Flying Saucer which, although otherwise only supports CSS 2.1, includes support for CSS-3-style running elements for paged media. Browsers of course don't do anything with it because they are @media print although it might be different if you try to print (but e.g. Firefox print preview is awful as of FF 27.0).

score 0 · Answer 3 · answered Dec 21 '13 at 10:56

0

I've always understood it that <header> should go at the top shortly after the opening of the <body> tag and <footer> should go at the bottom just before the closing of the <body> tag. Their positioning depends on how you want to lay out the site.

answered Dec 21 '13 at 10:56

Dan Goodspeed

3,484
4
26
35

This is actually for the Paged Media i.e Printing the site to Paper , and not the Screen display i.e Monitors . Does that clarify your doubt ? – Nishant Dec 21 '13 at 10:58
The HTML will still be the same, you would just use different CSS. Unless it was the CSS that you were looking for. – Dan Goodspeed Dec 21 '13 at 11:01
Correct I wanted to know if this is what CSS3 means by Running Elements , or have I interpreted it wrongly . I am running this in some standard HTML - PDF converters and its not working as expected . – Nishant Dec 21 '13 at 11:04

Standard way to put running elements in CSS 3

3 Answers3