Search code examples
htmlcssprincexml

insert text on top of frontcover image to a pdf book using princexml?

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

cover with title & author name on top

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.

cover image using princexml

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?

Solution

  • it was a bit tricky as it doesn't work exactly as the web.

    here's the commit that worked → https://github.com/deadcoder0904/princexml-playground/commit/b84717e8ddb0ea72761efa15f6c8658cfbaeea73

    index.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    <link rel="stylesheet" href="./index.css" />
    <title>princexml playground</title>
  </head>
  <body>
    <div class="container">
      <section class="frontcover">
        <h1>princexml playground</h1>
        <span>akshay kadam (a2k)</span>
      </section>
    </div>
  </body>
</html>

    styles/index.css

    @import 'tailwindcss/base';

/* common base styles */
@import './base.css';

/* use this to style the web */
@import './screen.css';

/* use this only for print */
@import './print.css';

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

    styles/base.css

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

.frontcover {
  @apply mx-auto text-center;

  /* colors don't work using @apply for some reason... even background below */
  color: theme('colors.white');

  & > h1 {
    @apply w-full text-7xl text-white p-4 font-bold font-nova rounded-3xl absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
    background: theme('colors.slate.700');
  }

  & > span {
    @apply w-full text-4xl text-white p-4 font-semibold font-sans rounded-3xl absolute bottom-0 left-1/2 -translate-x-1/2;
    background: theme('colors.indigo.700');
    &:before {
      content: 'by ';
    }
  }
}

    styles/print.css

    /* style the print */

@media print {
  @page {
    size: 6.6in 8.5in;
    margin: 70pt 60pt 70pt;
  }

  @page cover {
    background: url('./cover.png');
    background-size: cover;
  }

  .frontcover {
    page: cover;
    page-break-after: always;
  }
}

    styles/screen.css

    /* style the web */

@media screen {
  body {
    background: theme('colors.slate.900');
  }

  .container {
    @apply mx-auto;
  }

  .frontcover {
    @apply max-w-xl relative bg-[url('./cover.png')] bg-cover bg-no-repeat bg-center h-screen;

    & > h1 {
      @apply text-5xl;
    }

    & > span {
      @apply text-2xl bottom-20 absolute;
    }
  }
}

    the base.css contains common styles with print & web.

    print.css is responsible for the pdf cover image.

    and the screen.css is responsible for the web cover image although it can be improved.