Possibilities in Layouting and Printing Documents

Introduction

This document lists some important possibilities when creating layouts for printing documents. It compares different software to give an overview, what is possible and how it can be achieved.

Possibilities

TL;DR

Overprint and Knockout

To overprint means that all elements overlap and their color adds up. To knockout is the opposite, a foreground color removes every other color behind it.

The behavior can be proofed in Adobe Acrobat using the Output Preview.

InDesign

The settings are in the Attributes palette.

Per default, the text always overfills to prevent white lines ("Blitzer").

PrinceXML / DocRaptor

Per default, colors always knock out. To overprint colors, there is an extra setting.

www.princexml.com/doc/graphics/#spot-colors

element {
    color: prince-overprint(#c0ffee);
}

or

@prince-color "MyColor" {
    alternate-color: #c0ffee;
}

element {
    color: prince-color("MyColor", 50%, overprint);
}

PDFreactor

For PDFreactor you first need to enable overprinting in the configuration. Only then the PDFreactor CSS properties have an effect. PDFreactor supports OPM 0 and OPM 1.

PDFreactor 11.2.1 Manual (see 5.1.18 Overprinting)

element {
    -ro-pdf-overprint-content: mode1;
}

The properties PDFreactor uses are -ro-pdf-overprint-content and -ro-pdf-overprint see the documentation for details PDFreactor 11.2.1 Manual.

AHFormatter

The Antennahouse Formatter allows specifying very precisely, which color, section or stroke should be overprinted.

element {
    -ah-overprint: all;
}

More information can be found under https://www.antenna.co.jp/AHF/help/en/ahf-ext.html#axf.overprint.

Spot colors

Spot colors differ from the "normal" color modes like CMYK or RGB. They allow to not-rasterize colored elements when printing. Well-known spot color systems are Pantone and HKS.

The behaviour can be proofed in Adobe Acrobat using the Output Preview.

InDesign

When adding a new color, the color mode needs to be Spot instead of Process.

PrinceXML / DocRaptor

Spot colors only differ in their naming. They will result in a separate color channel automatically. The alternate color—which is responsible for the color output—needs to be set manually.

www.princexml.com/doc/graphics/#spot-colors

@prince-color "PANTONE 802 C" {
    alternate-color: #8ddb47;
}

element {
    color: prince-color("PANTONE 802 C");
}

PDFreactor

A spot color can be used via the CSS functions -ro-spot and -ro-separation. The functions takes two or three parameters: The spot color name, the color tint (which is optional and defaults to 1.0, which represents maximum "opacity") and the fallback color.

PDFreactor 11.2.1 Manual (4.8.6 Spot Colors)

element {
   color: -ro-separation("Pantone 4735 C", 1, cmyk(0%, 16%, 28%, 28%));
}

or

element {
    color: -ro-spot("Pantone 4735 C", 1, cmyk(0%, 16%, 28%, 28%));
}

Note: PDFreactor defines the spot color with a color definition in CMYK or RGB. This may cause a PDF validation error when using other sources with the same spot color. For example InDesign defines the color definition in LAB.

AH Formatter

AH Formatter V7.0 - XSL/CSS Extensions (antennahouse.com)

element {
   color: rgb-icc(141, 219, 71, #Separation, "PANTONE 802 C", 1.0);
}

or

element {
   color: rgb-icc(#Separation, "Pantone 4735 C", 1.0, 0, 16, 28, 28);
}

Maybe interesting: if you buy the AH Formatter PANTONE® Option, it converts more than 1,000 PANTONE® Colors to RGB or CMYK values automatically.

Hint

Also, there is the bitandblack-colorpalette library for CSS and JS, holding all PANTONE, HKS and RAL colors in HEX values.

For PHP there is the bitandblack/colors library, that also holds PANTONE, HKS and RAL colors. In addition, it can convert them to a lot of color modes.

Bleed

InDesign

Elements can be placed reaching outside the page section. When creating a PDF, a bleed section needs to be enabled.

PrinceXML / DocRaptor

The page needs to be defined with the bleed property, for example:

@page {
    bleed: 3mm;
}

Elements can be placed reaching outside the page section. For example:

img {
    margin-left: -3mm;
    width: calc(100% + 3mm);
}

Image formats