Page title in CSS content

Question

I want to include the page title in the footer of every printed page, but I can't figure out how to do it. Basically, I'm expecting to have to do something like this:

@page {
  @bottom-right {
    content: attr(title);
  }
}

But of course that doesn't work. AFAICS, I either need to set an attribute on @page that I can reference using attr, or I need to use some other method to refer to specific content (i.e. title in my page). I am using the same CSS on multiple pages with different titles, so I can't just hard code it.

Is the title hard coded or is it given through a variable like: ` $varTitle ` ? — misterManSam, Nov 13 '14 at 08:08
@misterManSam It is populated from a variable on the server side (using a django template). — aquavitae, Nov 13 '14 at 08:09
Ohhhh, you want every page. Do it [like this answer here](http://stackoverflow.com/a/4121962/2930477). Place the variable in your footer, hide it with `display: none` and show it in the print stylesheet with `display: block`. Not perfect with browser support maybe. — misterManSam, Nov 13 '14 at 08:14

score 1 · Answer 1 · answered Nov 13 '14 at 08:02

1

Since the attr() Function only works on the selected element it is not possible to get the title of the page to be used in the footer.

If you create your pages dynamically put the title directly in the footer, otherwise use javascript

answered Nov 13 '14 at 08:02

Jens W

188
6

Thanks. I realise that `attr` won't work, but how do I put it in the footer? I suspect I'm missing something really basic here but I don't know what... – aquavitae Nov 13 '14 at 08:05
As far as i know you can't do this kind of DOM Manipulation with css. Do you have a javascript library included in you project. – Jens W Nov 13 '14 at 08:10
No, for various reasons I'm not using any JS on this project. My fallback would be to write the css directly in a ` – aquavitae Nov 13 '14 at 08:15
Read the comments of misterManSam there is everything you need. But it seems that there is no 100% solution for printing footers on every page. – Jens W Nov 13 '14 at 08:42

score 0 · Answer 2 · answered Aug 31 '15 at 18:02

0

How about something like this:

<div id="myTitle"></div>


<script type="text/javascript">
  document.getElementById("myTltle").innerHTML="The Page Title is:  "+document.title;
</script>

answered Aug 31 '15 at 18:02

Jim VanPetten

413
3
11

Page title in CSS content

2 Answers2