Log in / Register

Forum › How do I...?

Using transform rotate to create the spine of a book cover

fmkatz
I am trying to create the spine of a book cover by using the following css:
.spine{
position: absolute;
top: 50%;
left: 50%;


background-color: black;
color: white;
width: 9.25in;
height: 0.504448in;
padding: 0;
border: 0;

margin-left: -4.625in;
margin-top: -0.252224in;
transform-origin: 50% 50%;
transform: rotate(90deg);

}


This produces what it should when viewed with Chrome, but not with the Prince pdf output (see attached, please).

Any suggestions?

Thanks


  1. HTML-CSS-RESULTS.zip‎ 3.1 MB ‎
    Works when viewed in Chrom
  2. Treasure_Island.text_pdfcover.pdf‎ 3.1 MB ‎
    Produced by Prince
hallvord
Hi,
if you use position:fixed (instead of absolute) for the spine it seems to work better. I'm not sure why the version with position:absolute does not do what you expect, though I note that the Gecko rendering engine (in Firefox) renders the original version mostly like Prince, and that Google Chrome on my computer also renders the spine slightly off-screen, with the top part disappearing so only parts of the text is visible..

Announcement: repos for tests/utils

hallvord
(Using position:fixed makes sense because this is about positioning content relative to the *viewport* or page)

Announcement: repos for tests/utils

fmkatz
position: fixed - Works beautifully.
Thanks very much.