---
title: "Hi-res print files | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/print-files/"
---

# Hi-res print files

> The `rendering` section of the **clientConfig.json** configuration file contains parameters for both proof images and print files (so-called _hi-res outputs_). This topic dwells on the parameters of print files. For details about configuring proof images, refer to the [Proof Images](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/proof-images.md) topic.

## Rendering parameters

<pre className="language-json"><code>{`{
    "rendering": {
        "`}<a href="#hiResOutputDpi" title="Hi-res output resolution in DPI.">hiResOutputDpi</a>{`": 300,
        "`}<a href="#hiResOutputFileFormat" title="The type of the hi-res output.">hiResOutputFileFormat</a>{`": "pdf",
        "`}<a href="#hiResOutputColorSpace" title="The color space of the hi-res output.">hiResOutputColorSpace</a>{`": "cmyk",
        "`}<a href="#hiResOutputRgbColorProfileName" title="The name of an RGB color profile.">hiResOutputRgbColorProfileName</a>{`": "",
        "`}<a href="#hiResOutputCmykColorProfileName" title="The name of an CMYK color profile.">hiResOutputCmykColorProfileName</a>{`": "",
        "`}<a href="#hiResOutputGrayscaleColorProfileName" title="The name of a color profile for grayscale outputs.">hiResOutputGrayscaleColorProfileName</a>{`": "",
        "`}<a href="#hiResOutputDestinationColorProfileName" title="The name of a color profile for CMYK preview.">hiResOutputDestinationColorProfileName</a>{`": "",
        "`}<a href="#hiResOutputToSeparateFiles" title="Enables hi-res outputs in separate files.">hiResOutputToSeparateFiles</a>{`": false,
        "`}<a href="#hiResOutputChannelContainersToSeparateFiles" title="Renders channel containers to separate files.">hiResOutputChannelContainersToSeparateFiles</a>{`": false,
        "`}<a href="#hiResOutputChannelContainersRenderEmptyPage" title="Adds empty pages for product pages without channel containers.">hiResOutputChannelContainersRenderEmptyPage</a>{`": true,
        "`}<a href="#hiResOutputBackgroundColor" title="The background color for the hi-res output.">hiResOutputBackgroundColor</a>{`": "rgba(255,255,255,0)",
        "`}<a href="#hiResOutputCompression" title="The type of hi-res output compression.">hiResOutputCompression</a>{`": "jpeg",
        "`}<a href="#hiResOutputJpegCompressionQuality" title="JPEG compression quality in percent.">hiResOutputJpegCompressionQuality</a>{`": 90,
        "`}<a href="#hiResOutputFlipMode" title="Flips hi-res outputs.">hiResOutputFlipMode</a>{`": "none",
        "`}<a href="#hiResOutputRotateMode" title="Renders hi-res outputs rotated.">hiResOutputRotateMode</a>{`": "none",
        "`}<a href="#hiResOutputPdfMetadata" title="PDF metadata.">hiResOutputPdfMetadata</a>{`": {
            "author": "",
            "creator": "",
            "keywords": "",
            "subject": "",
            "title": ""
        },
        "`}<a href="#hiResOutputInStringPlaceholderHintsEnabled" title="Enables hints for unfilled in-string placeholders.">hiResOutputInStringPlaceholderHintsEnabled</a>{`": false,
        "`}<a href="#hiResOutputPdfFormat" title="Enables DeviceCMYK colors and PDF/X-4 in print files.">hiResOutputPdfFormat</a>{`": "Default"
    }
}`}</code></pre>

| Name | Description | Default value | Possible values |
| :--- | :--- | :--- | :--- |
|  **hiResOutputDpi** | image resolution in dots per inch (DPI) | `300` | integer |
|  **hiResOutputFileFormat** | the type of the hi-res output | `"PDF"` | `"PDF"`, `"JPG"`, `"PNG"`, `"TIFF"` |
|  **hiResOutputColorSpace** | the color space of the hi-res output | `"cmyk"` | `"cmyk"`, `"rgb"`, `"grayscale"` |
|  **hiResOutputToSeparateFiles** | if `true`, the hi-res output for each side of a [multipage product](#multipage-products) will be put in a separate file | `false` | boolean |
|  **hiResOutputBackgroundColor** | The background color for the hi-res output. | `"rgba(255,255,255,0)"` | color in css-compatible format |
|  **hiResOutputCompression** | the type of hi-res output compression; `"jpeg"` and `"zip"` are supported for `PDF` files only, whereas `"lzw"` is supported for `TIFF` files | `"jpeg"` | `"jpeg"`, `"zip"`, `"none"`, `"lzw"` |
|  **hiResOutputJpegCompressionQuality** | JPEG compression quality in percent; this parameter makes sense only for JPEG and PDF formats. | `90` | integer from `0` to `100` |
|  **hiResOutputRotateMode** | rotates hi-res outputs clockwise to render products with different orientation of pages | `"none"` | `"none"`, `"rotate90"`, `"rotate180"`, `"rotate270"` |
|  **hiResOutputInStringPlaceholderHintsEnabled** | Displays hints for unfilled in-string placeholders in hi-res outputs. | `false` | boolean |

Any rendering configuration parameter can also be set up via the [IRenderingProperty](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IRenderingProperty.md) interface. For example, the following snippet configures the Design Editor to render a product in CMYK PDF files.

```js
let configuration = { 
    rendering: {
        hiResOutputColorSpace: "CMYK",
        hiResOutputFileFormat: "PDF",
        hiResOutputDpi: 300
    } 
};
```

:::note
The Design Editor generates either vector PDF files or raster JPEG/PNG/TIFF images as the high-resolution output.

Since the PNG format was designed for transferring images on the Internet, it does not support the CMYK color space.

To avoid any problem with fonts and render products as close as possible to the designs, text is saved to PDF files as vector paths.
:::

## Color profiles

When rendering print files, color management is always enabled. You can define a color space and a specific color profile. Note that the color profile should correspond to the specified color space.

The Design Editor supports both the device-independent and device-dependent color spaces. Before using custom color profiles, you must copy them to the **..\\assets\\ColorProfiles\\** folder. To set up device-independent profiles, you can use the following parameters.

Name | Description | Default value | Possible values

hiResOutputColorSpace | the color space of the hi-res output | <code>"cmyk"</code> | <code>"cmyk"</code>, <code>"rgb"</code>, <code>"grayscale"</code>

hiResOutputRgbColorProfileName | the name of an RGB color profile | <code>"sRGB IEC61966-2.1"</code> | string

hiResOutputCmykColorProfileName | the name of a CMYK color profile | <code>"SWOP (Coated) 20%,<wbr/> GCR, Medium"</code> | string

hiResOutputGrayscaleColorProfileName | the name of a color profile for grayscale outputs | <code>"Dot Gain 30%"</code> | string

hiResOutputDestinationColorProfileName | the name of a color profile for the CMYK preview mode | <code>"SWOP (Coated) 20%,<wbr/> GCR, Medium"</code> | string

hiResOutputPdfFormat | If <code>"X4"</code>, enables DeviceCMYK and does not embed any color profile into the resulting PDF file in the PDF/X-4 standard. By default, print files are generated in PDF 1.4. | <code>"Default"</code>, <code>"X4"</code>

At runtime, you can specify device-independent profiles in the `hiResOutputRgbColorProfileName`, `hiResOutputGrayscaleColorProfileName`, and `hiResOutputCmykColorProfileFileName` parameters of the `rendering` config, for example:

```js
let configuration = {
    rendering: {
        hiResOutputColorSpace: "rgb",
        hiResOutputRgbColorProfileName: "Adobe RGB (1998)",
        proofImageFileFormat: "png",
        proofImageRgbColorProfileName: "Adobe RGB (1998)"
    }
};
```

:::important
To define an ICCBased profile in **clientConfig.json**, use its full name. For example, if you want to use the `CoatedFOGRA39.icc` color profile, define it in `hiResOutputCmykColorProfileName` as `"Coated FOGRA39 (ISO 12647-2:2004)"`, not `CoatedFOGRA39.icc` or `CoatedFOGRA39`.
:::

You can also specify color profiles for each output color space (grayscale, RGB, and CMYK) for all products in **~/Configuration/Aurigma.DesignAtoms.config**, using the `RgbColorProfileFileName`, `CmykColorProfileFileName`, and `GrayscaleColorProfileFileName` parameters, as follows:

```xml title="Defaul  color profiles"
<Aurigma.DesignAtoms>
    <add key="ColorProfilesDirectory" value="..\assets\ColorProfiles" />
    <add key="GrayscaleColorProfileFileName" value="grayscaleColorProfile.icc" />
    <add key="RgbColorProfileFileName" value="rgbColorProfile.icc" />
    <add key="CmykColorProfileFileName" value="cmykColorProfile.icc" />
</Aurigma.DesignAtoms>
```

:::important
To define an ICCBased profile in **Aurigma.DesignAtoms.config**, use its file name. For example, if you want to use the `CoatedFOGRA39.icc` color profile, define it in `CmykColorProfileFileName` as `CoatedFOGRA39.icc`.
:::

By default, ICCBased profiles specified with these four settings are used as destinations depending on the color space passed in the `hiResOutputColorSpace` parameter. For example, if you render the products to a CMYK hi-res output, the profile configured in `CmykColorProfileFileName` will be picked as the destination profile.

If a graphic object has its own embedded profile, it will be used as the source profile. If it does not have an embedded color profile, then a profile configured in **Aurigma.DesignAtoms.config** will be used as the source profile depending on the color space of the graphics objects. If the color profiles are not configured in **Aurigma.DesignAtoms.config** or specified files are missing, then the following standard profiles are applied:

-   SWOP (Coated) 20%, GCR, Medium profile for CMYK
-   sRGB IEC61966-2.1 profile for RGB
-   Dot Gain 30% profile for Grayscale

To render high resolution outputs in a device-dependent color space, set either `hiResOutputPdfFormat` to `"X4"` or the `PdfRenderDeviceProfileEnabled` parameter to `True` in **Aurigma.DesignAtoms.config**.

```xml
<Aurigma.DesignAtoms>
    <add key="PdfRenderDeviceProfileEnabled" value="True" />
</Aurigma.DesignAtoms>
```

In this case, hi-res outputs will not contain any associated color transformation data, and the PDF file will be generated in the PDF/X-4 standard.

You can find more details in the [Color Management](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/color-management.md) topic.

## Multipage products

When rendering multipage products, you can get a single hi-res output file containing all pages or multiple files, one per each page in the product. This behavior is configured via the two parameters, `hiResOutputToSeparateFiles` and `hiResOutputFileFormat`. The `hiResOutputToSeparateFiles` parameter specifies if an output file should be created for each page of a product. The `hiResOutputFileFormat` parameter is involved because the only hi-res output format in Design Editor which can contain multiple pages is PDF.

Name | Description | Default value | Possible properties

hiResOutputToSeparateFiles | if <code>true</code>, the hi-res output for each side of a multipage product will be put in a separate file | <code>false</code> | boolean

hiResOutputFileFormat | the type of the hi-res output | <code>"PDF"</code> | <code>"PDF"</code>, <code>"JPG"</code>, <code>"PNG"</code>, <code>"TIFF"</code>

To create a single hi-res output file containing all product pages, set the output type to `PDF` and disable rendering to separate files. In this case, the output file will be named **result.pdf**.

You can make this configuration default for all products through the **clientConfig.json** file.

```json title="Changing global settings"
{
    "rendering": {
        "hiResOutputToSeparateFiles": false,
        "hiResOutputFileFormat": "PDF"
    }
}
```

To change these parameters on a product level without changing global settings in **clientConfig.json**, pass the [IRenderingProperty](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IRenderingProperty.md) configuration when loading the editor.

```js title="Product level"
let configuration = {
    rendering: {
        hiResOutputToSeparateFiles: false,
        hiResOutputFileFormat: "PDF"
    }
};
```

To create multiple hi-res output files, one for each page, you can enable rendering to separate files of any of the supported file formats.

## Flipping hi-res outputs

You can flip hi-res outputs by using the `hiResOutputFlipMode` parameter.

Name | Description | Default value | Possible values

hiResOutputFlipMode | the flip mode for hi-res outputs | <code>"none"</code> | <code>"none"</code>, <code>"vertical"</code>, <code>"horizontal"</code>, <code>"both"</code>

To set it globally for any product, change **clientConfig.json**.

```json
{
    "rendering": {
        "hiResOutputFlipMode": "horizontal"
    }
}
```

To flip only one surface, use [`IPrintAreaDefinition`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IPrintAreaDefinition.md).

```js
let productDefinition = {
    surfaces: [{
        printAreas: [{
            designFile: "BusinessCard",
            hiResOutput: { flipMode: "both" }
        }]
    }]
}
```

## Setting up PDF metadata

If you choose the PDF type of hi-res outputs, you can specify PDF metadata.

Name | Description | Default value | Possible properties

hiResOutputPdfMetadata | PDF metadata of hi-res outputs | <code>null</code> | <code>"author"</code>, <code>"creator"</code>, <code>"keywords"</code>,
  <code>"subject"</code>, <code>"title"</code>

To set up metadata globally for any product, pass the following configuration to the [loadEditor](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/functions/IframeApi.loadEditor.md) method or update **clientConfig.json** with this configuration.

```js
let configuration = {
    rendering: {
        hiResOutputPdfMetadata: {
            title: "The red postcard",
            keywords: "red,flower,postcard"
        }
    }
};
```

Also, you can specify PDF metadata at runtime by using the [setPdfMetadata](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/RuntimeConfiguration.RuntimeConfiguration.md#setpdfmetadata) method. For such an example, refer to the topic describing [Tags](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/tags.md).

## PDF page boxes

When you choose the PDF type of hi-res outputs, you can also specify page boxes to crop resulting PDF files. The Design Editor supports `CropBox`, `TrimBox`, and `BleedBox`. To specify one of these page boxes, you need to set the `pdfBox` property to either `"Crop"`, `"Trim"`, or `"Bleed"` when [defining safety lines](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/bleeds-and-safety-zone.md#pdf-page-boxes). Margins of safety lines are applied to the corresponding PDF page boxes. For example, you can define `CropBox` with left/right margins of 8 points and top/bottom margins of 10 points as follows:

```js
let productDefinition = {
    surfaces: [{
        designFile: "invitation",
        safetyLines: [
            {
                margin: { horizontal: 8, vertical: 10 },
                color: "rgba(10,200,10,0.7)",
                pdfBox: "Crop"
            }
        ]
    }]
};
```

## Channel containers

You can design print embellishments in the editor through [channel containers](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/post-press-finishing-layers.md). The Design Editor allows you to render these channel containers and the base design to the same PDF output file or to separate PDF files.

Name | Description | Default value | Possible properties

hiResOutputChannelContainersToSeparateFiles | enables rendering spot colors and textures to separate PDF files | <code>false</code> | boolean

hiResOutputChannelContainersRenderEmptyPage | to maintain the same number of pages in output files of the base design and channel containers, this parameter allows you to add empty pages to PDF with spot colors and textures if the corresponding pages of the base design do not have channel containers | <code>true</code> | boolean

You can specify how to render channel containers in **clientConfig.json** or through the `IConfiguration` interface, for example:

```js title="Channel Containers"
let configuration = {
    rendering: {
        hiResOutputFileFormat: "PDF",
        hiResOutputChannelContainersToSeparateFiles: true,
        hiResOutputChannelContainersRenderEmptyPage: true
    }
};
```