TechQA.

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

44 views Asked by At

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?

html css princexml
Original Q&A
1

There are 1 answers

0
deadcoder0904 On BEST ANSWER

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.

Related Questions in HTML

Related Questions in CSS

Related Questions in PRINCEXML

Popular Questions

Trending Questions