Folding Lines and Spines

In this topic we are talking about folding lines and spines. Folding lines are the lines which the result product is folded along. They are visible at the design time but not printed on the hi-res output. Folding lines are extremely useful in such products as leaflets and booklets which are fulfilled on a single page and then folded. The lines allow users to make designs optimized for folds, for example, they may prevent from mistakenly inserting an image at a crease where it is not supposed to be.

Spines are used on book cover designs to highlight the area where the book spine is located. Spines, like folding lines, are displayed only at the design time and not printed on the hi-res output.

Folding Lines

Any folding line is an object implementing the IFoldingLine interface, which provides the following properties:

Name Description Default value Possible values
isVertical defines whether the folding line is vertical. If true, then the line is vertical, otherwise it is horizontal. true boolean
margin margin defines absolute or relative location of the folding line on the product in points or percent. For vertical lines it defines the x-axis offset from the left edge. For horizontal lines it defines the y-axis offset from the top edge of the product. To set relative offset in percent, add the percent sign to the number. See the picture for details. "50%" string
bleed bleed sets offset in points for the folding line depending on its orientation. It is a top/bottom offset for the vertical line and a left/right offset for the horizontal line. See the picture for details. 0 float
pen pen object configures the outline of the folding line. The parameters are: width is line width, dashStep is line dash step in pixels, color is line main color, and altColor is line alt color {width:1, dashStep:5, color:"black", altColor:"transparent"} object

You can specify several folding lines for each page of a product, or for all pages of a product. To set up default folding lines, that will be displayed on all pages of a product use the ISurfacesFromFolder interface.

The following snippet adds a folding line and a safety line to the first (and the only) page of the invitation:

JavaScript
productDefinition = { 
    surfaces: [ { 
        foldingLines: [ { isVertical: false, bleed: 10, pen: {color: "green"} } ], 
        printAreas: [ { 
            designFile: "invitation",
            safetyLines: [ { name: "bleed", margin: 10, color: "rgba(255,0,0,255)", altColor:"rgba(255,255,255,0)" } ]
        } ] 
    } ] 
};

In the snippet above we use the bleed property to combine folding lines with safety lines. The image below shows the result invitation and illustrates bleed and margin values:

Horizontal folding line.

For a vertical folding line bleed and margin are as follows:

Horizontal folding line.

The following snippet sets up a vertical folding line and a safety line shown on the image above:

JavaScript
productDefinition = { 
    surfaces: [ { 
        foldingLines: [ { bleed: 10, pen: {color: "green"} } ], 
        printAreas: [ { 
            designFile: "invitationVertical",
            safetyLines: [ { name: "bleed", margin: 10, color: "rgba(255,0,0,255)", altColor:"rgba(255,255,255,0)" } ]
        } ] 
    } ] 
};

Spines

Spines are configured a similar way to folding lines; any spine object should implement the ISpine interface. There are several parameters in addition to the ones we have already discussed above.

Name Description Default value Possible values
width spine width in points 10 float
margin margin defines absolute or relative location of the spine on the product in points or percent. For the vertical spine it defines the x-axis offset from the left edge to the center of the spine. For horizontal lines it defines the y-axis offset from the top edge to the center of the spine. To set relative offset in percent, add the percent sign to the number. See the picture for details. "50%" string
fill color spine fill color "darkGray" string

You can also specify several spines for each page of a product, or for all pages of a product. To set up default spines, that will be displayed on all pages of a product use the ISurfacesFromFolder interface.

The following snippet adds a spine and a safety line to the first (and the only) side of a book cover:

JavaScript
productDefinition = { 
    surfaces: [ { 
        spines: [ { width:20, bleed: 10, pen: {color: "green"}, fillColor: "lightGreen" } ], 
        printAreas: [ { 
            designFile: "bookVertical",
            safetyLines: [ { name: "bleed", margin: 10, color: "rgba(255,0,0,255)", altColor:"rgba(255,255,255,0)" } ]
        } ] 
    } ] 
};

In the snippet above we use the bleed property to combine a spine with a safety line. The image below shows the result book cover and illustrates bleed and margin values:

Vertical spine.

For a horizontal spine bleed and margin are as follows:

Horizontal spine.

The following snippet sets up a vertical spine and a safety line shown on the image above:

JavaScript
productDefinition = { 
    surfaces: [ { 
        spines: [ { isVertical: false, width: 20, bleed: 10, pen: {color: "green"}, fillColor: "lightGreen" } ], 
        printAreas: [ { 
            designFile: "book",
            safetyLines: [ { name: "bleed", margin: 10, color: "rgba(255,0,0,255)", altColor:"rgba(255,255,255,0)" } ]
        } ] 
    } ] 
};

See Also

Manual

IFrame API Reference