Running Headers with running() and element()
I did some tests to enrich the header of a document using the functions running() and element().
W3C reference: https://www.w3.org/TR/css-gcpm-3/#running-elements
Test Case
Setup a running named as issue-number and use it in the top-right box:
@media print {
@page :first {
margin-left: 0cm;
margin-right: 0cm;
@top-left {
content: '';
}
@top-center {
content: '';
}
@top-right {
content: '';
}
@bottom-left {
content: '';
}
@bottom-center {
content: '';
}
@bottom-right {
content: '';
}
}
@page {
margin-left: 1cm;
margin-right: 1cm;
@top-left {
font-size: 9pt;
content: string(journal-title);
}
@top-center {
}
@top-right {
content: element(issue-number);
font-size: 9pt;
color: red
}
@bottom-left {
}
@bottom-center {
content: string(license);
font-size: 9pt;
color: blue;
text-align: center;
}
@bottom-right {
content: counter(page);
}
}
.cover .journal-meta .journal-title {
string-set: journal-title content(text);
}
.cover .issue-meta .issue-number {
position: running(issue-number);
}
.cover .license {
string-set: license content(text);
color: #FFFFFF;
}
}
Original output for Page 1 and 2 without running/element:
Results:
Results for page 1 and 2 with running/element:
According to the above CSS We will use the issue legend displayed in the blue area to compound the top-right header and the header must not be available in the first page once all boxes in the first page has the content setup to ' '.
Conclusions:
-
I agree with the ISSUE 1 in the W3C documentation that says (This idea would be much more useful if we could also copy (rather than just move) elements. That would avoid the duplication of HTML in the example above.)
- In the sample above, the issue label is removed from its place to be displayed in the top-right header.
-
The configuration for first page header is not taking effects. It not works in the same way when using string-set. It was expected to have the top-right content overwrited with ' '.
-
The styling configuration made in the top-right header is not overwriting the main styles. It was expected to have the font-size decreased from 12 to 9, and the font color changed from black to red.
-
The custom styling in page { @top-rigth } only takes effect if no previous styles are declared in the CSS.
Files: