i want to have a frontcover that has the title of the book & the author name on top of it like:



i'm doing that with basic css using tailwind css that i found here:

@import url('https://fonts.googleapis.com/css?family=Nova+Flat');

.frontcover {
  @apply relative text-white text-center;

  & > h1 {
    @apply text-5xl font-bold font-nova absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
  }

  & > span {
    @apply text-3xl font-semibold font-nova absolute bottom-10 left-1/2 -translate-x-1/2 -translate-y-1/2;
  }
}

this works perfectly on web.

but it gives a weird output using princexml.

i read prince docs & it supports `translate` so idk what's causing the error. the image looks cut. there is no title & author on top of it. the book width looks smaller.



my full reproducible code is available here → https://github.com/deadcoder0904/princexml-playground (you can see the pdf to see the output)

what's the issue & how do i solve it? does prince allow to have text on top of image or is it just not possible?

Prince does not support nested CSS rules, so the "& > h1" etc. will not work.

@mikeday this is the tailwind css file which is processed using postcss. the generated output looks like:

.frontcover{
  position: relative;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.frontcover > h1{
  position: absolute;
  top: 50%;
  left: 50%;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  font-family: Nova Flat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
}

.frontcover > span{
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  font-family: Nova Flat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
}

I see, perhaps you could dumb it down for me and attach the final HTML and CSS that is passed to Prince? As I don't have all the dependencies installed.

the `src` folder on here without the `styles/` folder is all you need → https://github.com/deadcoder0904/princexml-playground/tree/main/src

it has `index.html`, `index.css`, `cover.png`, & `index.pdf`. i've also attached them below.

the instructions to download are on the README.md if you scroll down just in case you wanna see the output on the web (the first screenshot of the post is how it looks) → https://github.com/deadcoder0904/princexml-playground/

1. cover.png‎ 430.9 kB
2. index.css‎ 12.0 kB
3. index.html‎ 0.6 kB
4. index.pdf‎ 610.7 kB

Thanks, the style sheet has a @media print section containing this rule:

  .frontcover {
    page: cover;
    content: url('./cover.png');
    page-break-after: always;
  }

The use of the "content" property will replace all the other element content, including the text.

so what's the solution? also, the cover image is not fully shown like the 1st image.

is it possible to add text on top of cover image?

i did try replacing it with `background` & it kinda works but it isn't full screen.

.frontcover {
    page: cover;
    background: url('./cover.png');
    page-break-after: always;

    & > h1 {
      @apply text-white;
    }

    & > span {
      @apply text-white;
    }
  }

also, the text isn't white. see the attached cover.

how do i make the cover full & text white?

1. cover-pichi.png‎ 488.6 kB

Here's an example of a book cover which seems close to what you are trying to achieve:

https://css4.pub/2017/gogol/cloak.pdf

You can generate it with:

prince https://css4.pub/2017/gogol/cloak.html -o cloak.pdf

Here's the CSS code for the cover:

@page cover {
  margin: 0;
  background: url(gogol.jpg);
  background-size: cover;
}

section.cover {
  page: cover;
  color: red;
}

And the HTML:

<section class=cover>
<header>
<h1>THE CLOAK</h1>
<div class=byline>NIKOLAY V. GOGOL</div>
</header>
</section>

Edited 1 Nov 2022 by howcome

here's the relevant code of the above stylesheet:

<style>
  @page cover {
    margin: 0;
    background: url(gogol.jpg);
    background-size: cover;
  }

  section.cover {
    page: cover;
    color: red;
  }

  h1 {
    string-set: title content();
    text-align: center;
  }

  div.byline {
    string-set: author content();
    text-align: center;
    margin: 1em;
    text-indent: 0;
  }

	div.byline:before { content: "BY " }

  .cover header {
    column-span: all;
    width: 100%;
    font: bold 30pt Cormorant Garamond, serif;
    position: absolute;
    bottom: 0;
  }

  .cover header {
    font-weight: 900;
  }
</style>

<section class="cover">
  <header>
    <h1>THE CLOAK</h1>
    <div class="byline">NIKOLAY V. GOGOL</div>
  </header>
</section>

i used it with tailwind & was able to generate a great cover image. took a long time though as it gave weird outputs as it doesn't gel that well with plain ol' css. for web & for print, it does have it's differences.

anyways here's the commit that did the trick for me → https://github.com/deadcoder0904/princexml-playground/commit/b84717e8ddb0ea72761efa15f6c8658cfbaeea73