Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@top-right { content: element(); } does not work well #134

Closed
bingtimren opened this issue Sep 26, 2017 · 1 comment
Closed

@top-right { content: element(); } does not work well #134

bingtimren opened this issue Sep 26, 2017 · 1 comment

Comments

@bingtimren
Copy link

bingtimren commented Sep 26, 2017 •
edited
Loading

Hi,

First, thank you for your work on this project.
I'm trying to place an element into the header or footer. So far I can place it at top-left or bottom-left. However, if I place it at top-center, top-right etc., it will still be placed at the left. You can test this with the content below.

Best regards,

Bing

<html>
<head>
<style>
/* The following fonts are installed on the server: */
.handwriting {
  font-family: 'handwriting', serif;
}
.arabic {
  font-family: 'arabic', serif;
}
.deja {
  /* Contains glyphs for many languages. */
  font-family: 'deja-sans', sans-serif;
}
/*
Also you can use the PDF built-in fonts: 
 - sans-serif
 - serif
 - monospace
*/
@page {
  @top-right {   content: element(ph); }
}
p.pageHeader{
  position: running(ph);
}
p.pageHeader::before{  content: 'Page: ' counter(page) ' / '; }
</style>
</head>
<body>
<p class="pageHeader">
    This is a test
</p>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>

</body>
</html>
@bingtimren bingtimren changed the title @top-right { content: element(ph); } does not work well @top-right { content: element(); } does not work well Sep 26, 2017
@danfickle
Copy link
Owner

Hi @bingtimren

I looked at CSS3 Paged and I'm still not sure on what the correct behavior is. However, I can tell you that the code uses a table (in auto layout mode) to layout the margin boxes. Depending on your needs here are a couple of workarounds:

  • Make the running element text-align: right
  • Give the running element a margin-left with an absolute unit such as px. You'll also have to make it display: inline-block.

The first solution is better for a single line of text, the second for multiple lines of text that need left alignment.

@leonorader leonorader mentioned this issue Apr 10, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@danfickle @bingtimren