v33.4.0
Tools
PrintKit Guidelines
The basics for how to style a Carta PDF
The basics
To create the exact visuals for a new PDF, it is highly recommended to use the ink PDF Prototyper (only available in demo environments). The tool includes its own docs, instructions for use, and example PDF layouts and visuals.
Prince is what we use to create our PDFs. It converts HTML and CSS in Django templates to PDF.
- Prince files are all here: carta-web/templates/prince
- At the time of this writing, we are using Prince 10.7
Our print kit is located in carta-web/static/lib/eshares/css/print/pdf_kit.scss
- Every time you make CSS changes, you'll need to run
./manage.py collectstaticand typeyeswhen prompted - Note: Normal classes from Carta will not work
Get Started
Create a new prince file and add this to your body.prince:
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>{{ file_name }}</title><link rel="stylesheet" href="static_files/lib/eshares/css/pdf_kit.css" charset="utf-8" />{% stylesheet 'pdf_kit' %}</head><body>// your code here</body></html>
Styling
Basic styling for PDFs will create a page that looks like this:
Cover page
- Use a
class='page'for the page div - Use a
class='title'for the page title - Use a
class='subtitle'for the subtitle
<div class="page page__cover"><StaticImage style="width: 150px" src="{{ image_src }}" alt="img alt" /><h1 class="title">{{ title }}</h1><h2 class="subtitle">{{ subtitle }}</h2><h4>For the period {{ begin_date }} - {{ end_date }}</h4></div>
Other pages
For page headers and footers, see the Settings tab in the prototype tool for options.
Tables
Most tables will not need any extra classes. Use the html tags table, thead, tbody, tr, th, and td to build one
- If you need specific sizes for table cells, use the
col\_\_xclasses on the<td> - For numeric cells, add
class='text-right'on the<td>
For table titles, use a h3 along side a <table> like this:
<h3>Capital account summary</h3><table><thead><tr><th>Table header</th></tr></thead><tbody><tr><td>Table cell</td></tr></tbody></table>
Questions?
Reach out on the #ink channel on Slack if you have questions regarding PDFs :)
Table of Contents
Is this page helpful?