Safety Lines

No one wants a part of the graphics painstakingly designed by a customer to be suddenly cut off. To warn a user that this may happen, you should display safety/bleed lines. There are two ways to do this.

The first approach is to put safety lines in a design template. The benefit here is that the lines are printed on the product. It may be extremely helpful when you cut the sheet.

However this is not always what you want. If you do not need the safety lines to be printed on the product and you want to give a user the opportunity to toggle the lines, you should specify the safety line in the product definition.

All the snippets below configures the safety line that looks as follows:

The safety lines on a business card.

Any object defining safety line should implement the ISafetyLine interface.

To define safety lines for all product surfaces use the IProductDefinition.defaultSafetyLines property:

JavaScript
productDefinition = {
    defaultSafetyLines: [{
        leftRightMargin: 5,
        topBottomMargin: 10,
        color: 'rgba(0,255,0,255)',
        altColor: 'rgba(255,255,255,0)',
        stepPx: 5,
        widthPx: 1
    }],
    surfaces: ["pocket_calendar", "pocket_calendar_back"]
};

If the IProductDefinition.defaultSafetyLines property is set up, then all product surfaces have the same safety lines by default. The default safety lines can be overriden for any surface by setting the surface's safety lines like it is described below.

The IBasePrintAreaDefinition.safetyLines property sets safety lines for a surface. To set safety lines for a surface having a design template use the IPrintAreaTemplate.safetyLines property:

JavaScript
productDefinition = {
    surfaces: [{
        designFile: "pocket_calendar", 
        safetyLines: [{
            margin: 8.5,
            color: 'rgba(0,255,0,255)',
            altColor: 'rgba(255,255,255,0)',
            stepPx: 5,
            widthPx: 1 }]
    }]
};

To set safety lines for a blank surface having no design template use the IPrintAreaDefinition.safetyLines property:

JavaScript
productDefinition = {
    surfaces: [{
        width: 200, 
        height: 150, 
        printAreas:[{
            bounds: { x:0, y:0, width: 200, height: 150}, 
            safetyLines: [{
                margin: 8.5,
                color: 'rgba(0,255,0,255)',
                altColor: 'rgba(255,255,255,0)',
                stepPx: 5,
                widthPx: 1 
            }]
        }]
    }]
};

If at least one safety line is specified for a surface, the safety lines toggle button is displayed under Markings in the user interface:

The safety lines toggle button.

This button allows a user to show/hide safety lines. You can disable it using the safetyLinesCheckboxEnabled configuration parameter in the ~\Configuration\clientConfig.json configuration file or in the IConfiguration interface.

There are several other configuration parameters related to safety lines. All of them can be set in the ~\Configuration\clientConfig.json configuration file or in the IConfiguration interface:

  • safetyLineViolationWarningEnabled enables warning displayed if an item crosses a safety line.
  • proofImageSafetyLinesEnabled draws safety lines on proof images.
  • proofImageCropSafetyLine sets the name of a safety line which proof images are cropped to; if there is no safety line with the given name, proof images are not cropped. See the Configuring High Resolution and Proof Images topic for more information.
  • alignToSafetyLineName sets the name of a safety line which design items can be aligned to; if there is no safety line with the name, then the first safety line in the array is used.

See Also

Manual

IFrame API Reference