PDF

PDF export

Watch this tutorial to learn how to export your components to PDF so you can print and prototype your designs.

New PDF export

Earlier this year we starting building a new pdf export mode which is ready to test! To test it out you can follow these steps:
    Go to your account
    Enable 'tinker mode' Test Tube
    In the component editor, click the 'New pdf export' button which magically appears
From there you'll be able to select a component and then set it up to export as you like. On the new pdf export page you'll be able to do cool new things like:
  • Export in CMYK
  • Set any page size, or choose to have the page size match the card size (this is a big deal for some printers who need exactly 1 card per page).
  • Embeds fonts
  • Have an automatically generated spot color dieline (for launch tabletop)
  • Embed a color profile
  • Convert to a PDFX standard
  • Get smaller pdfs does to more intelligent use of repeated images


Limitations of the new pdf export:

The new pdf exporter is pretty amazing and can do very cool things like embed fonts, convert to CMYK, store images efficiently and much more. However, here are some current limitations:
  • If you have complex cards with lots of images and shadow effects etc. converting to pdf is a really intensive process and the time limit for the conversion is 15 minutes. You might find you only export about 50-100 cards in this case. If you wanted a single pdf but have to export in smaller batches of components, you can use Acrobat or a free online tool like this to merge pdfs:  https://www.ilovepdf.com/merge_pdf 
  • No text-wrap: balance or pretty - We've logged a request with our provider and they said they'll eventually add support for these, but they're out for now.
  • No text-stroke - we've upgraded textshadow all-directions now so it's a great replacement.
  • Blend modes don't currently work with clippath shapes (due to the way we use multiple layers for the shapes.).
  • No conic gradients
  • The blur filter effect is not compatible with changing the opacity (opacity needs to be 1).
  • With some fonts (particularly older ones), you might notice that they are rendering a bit higher or lower (say in a custom text style icon). If this is the case, it's likely because the font tables for ascenders and descenders are not set up properly in the font file itself. On Windows and Mac, particularly older fonts can actually be set up to render the same font slightly differently (infuriating I know!). Our new exporter favours the Mac style hhea tables for font rendering (which is usually better for print layout). To fix this, you need to open your font in something like font forge, and set the win values to be the same as the hhea and typo values. See this guide!  https://www.williamrchase.com/writing/2019-11-10-font-height-differences-between-windows-and-mac 
  • Sometimes if a custom text style is very close to the edge of it's container it might try to wrap within itself, resulting in a line break - to fix this, put white-space: nowrap on your icons.
  • The new pdf exporter can't do lossy webp with alpha transparency - if you have a lossy (compressed) webp with alpha transparency it will simply not be rendered. Use uncompressed webp or a png instead if you need partial transparency.
  • PDF format can't actually support shadows, so what the exporter does is rasterise any effects (like text-shadow or box-shadow) into an actual image, so that the pdf can render it. This is pretty industry standard behaviour but there are some quirks:
    If you have text shadow on some text AND that text is bold AND you have no bold font glyph - pdf exporter will actually make it's own synthetic bold which doesn't match Chrome's and is a bit wider. So bottom line is you can't have exactly matching text if you use bold + textshadow + your font has no actual bold font glyphs. Use a font with bold glyphs instead.


Let us know what you think in the #new-pdf-exporter channel on our Discord!