---
title: "Markings"
canonical: https://customerscanvas.com/docs/cc6/configuring-rulers-and-grids.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Markings

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
When you build an online print product designer for end users who are not computer-savvy, you want to keep the user interface as simple as possible and turn off all the elements that may confuse them. However, in many cases, it is important to give them some tools to place elements precisely.
 
Customer's Canvas includes three useful tools for this - rulers, grids, and snap lines.
 
![Rulers, grids, and snap lines.](https://customerscanvas.com/docs/cc6/images/Markings.png)
 
Let us see how to enable and configure them.
 
## Rulers
  
To configure rulers, open the `~\Configuration\clientConfig.json` file and make sure there is a block which looks like this:
 
```
"rulers": {
    "enabled": true,
    "unit": "inch",
    "origin": { "X": 0, "Y": 0 }
}
```
 
The properties are self-explanatory, but let us take a closer look at them.
 
### Measurement Units
 
The standard length unit in Customer's Canvas is a point, i.e. 1/72 of an inch. However, regular users are most likely more comfortable with traditional units like inches or millimeters. You can use the **unit** property to switch the units to one of the following values:
 
- `inch`
- `mm`
- `cm`
- `point`
- `custom`

If you prefer to use some other measurement unit, set this property to `custom` and specify the additional **customUnitScale** property. This property should contain a ratio allowing Customer's Canvas to convert your unit to points.
 
For example, imagine that you want to use picas as a unit of length. This is a traditional typography unit, which equals 1/72 of a foot (equivalent to 1/6 of an inch). In other words, 1 point = 1/12 pica (0.0833333 pica). Your **rulers** entry will look as follows:
 
```
"rulers": {
    "unit": "custom",
    "customUnitScale": 0.0833333
}
```
 
### A Point of Origin
 
You can specify the point of origin relative to the upper-left corner of the template using the **origin** property. It accepts the `{"X": number, "Y": number}` object specifying the offset in measurement units of the rulers.
 
### Display of Rulers
 
When the **enabled** property is `true`, rulers are visible; otherwise, Customer's Canvas hides both the horizontal and vertical rulers.
 
### Override of Rulers for a Specific Product
 
If for some reason you want to use custom settings for rulers for a specific product, you may do this using the [IConfiguration](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) interface.
 
```
let configuration = {
    canvas: {
        rulers: {
            enabled: true,
            unit: "inch",
            origin: { X: 0, Y: 0 }
        }
    }
};
```
 
If you just want to disable the rulers for a specific product, use the following configuration.
 
```
let configuration = {
    canvas: {
        rulers: {
            enabled: false
        }
    }
};
```
 
## Grids
  
Like rulers, grids are configured in `clientConfig.json`. Open this file to find the following object:
 
```
"grid": {
    "horizontalColor": "rgba(0, 255, 255, 0.2)",
    "verticalColor": "rgba(0, 255, 255, 0.2)",
    "stepX": 0.25,
    "stepY": 0.25,
    "lineWidthPx": 1,
    "enabled": true
}
```
 
### Appearance
 
This marking is disabled by default. To allow your users to enable and disable the grid in the user interface, set the [gridCheckboxEnabled](https://customerscanvas.com/docs/cc6/customerscanvas.baseeditor.configuration.ui.ibottomtoolbarconfigparsed.htm.md) property of the **Bottom Toolbar** to `true`. After that, the **Grid** command appears on the **Marking** menu.
 
To change the color of horizontal and vertical lines, you can specify a color value in the CSS format in the **horizontalColor** and **verticalColor** properties. You can also use **lineWidthPx** to set the gridline width in pixels.
 
### Cell Size
 
To control the size of the grid cells, use the **stepX** and **stepY** properties to specify the horizontal and vertical distance between grid lines in the measurement units of the rulers.
 
### Override of Grids for a Specific Product
 
If for some reason you want to use custom grid settings for a specific product, you may do this using the [IConfiguration](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) interface.
 
```
let configuration = {
    grid: {
        horizontalColor: "rgb(208, 224, 227)",
        verticalColor: "rgb(208, 224, 227)",
        stepX: 1,
        stepY: 1,
        lineWidthPx: 1,
        enabled: true
    }
};
```
 
If you just want to disable the grid for a specific product, simply use the following configuration.
 
```
let configuration = {
    grid: {
        enabled: false
    }
};
```
 
## Snap Lines
  
Customer's Canvas allows you to configure three types of snap lines that will cling to design elements, product pages, and safety lines. In the `~\Configuration\clientConfig.json` file, you can configure these types of snap lines as follows:
 
```
"canvas": {
    "snapLines": {
        "items": {
            "enabled": true,
            "color": "rgb(255,0,0)",
            "tolerance": 5,
            "priority": 2,
            "initialValue": false
        },
        "printArea": {
            "enabled": false,
            "color": "rgb(0,255,0)",
            "tolerance": 20,
            "priority": 3,
            "initialValue": false
        },
        "safetyLines": {
            "enabled": true,
            "color": "rgb(0,0,255)",
            "tolerance": 5,
            "priority": 1,
            "initialValue": true
        }
    }
}
```
 
### Appearance
 
Snap lines are enabled by default. The initial appearance on the canvas is defined by the **snapLinesVisible** property in the common config. In the advanced config, the **initialValue** defines whether safety lines of the corresponding type are displayed when the canvas opens.
 
To allow your users to enable and disable snap lines through the **Marking** menu, you can use the **snapLinesItemsCheckboxEnabled**, **snapLinesPrintAreaCheckboxEnabled**, and **snapLinesSafetyLinesCheckboxEnabled** parameters of the [BottomToolbar](https://customerscanvas.com/docs/cc6/customerscanvas.baseeditor.configuration.ui.ibottomtoolbarconfigparsed.htm.md) to toggle each type of the snap lines separately.
 
You can also use the **color** property to change the color of snap lines.
 
### Tolerance
 
To control the distance between an object and a snap line, starting from where the object clings to the line, specify the **tolerance** property. This value is measured in pixels and works independently of the current zoom level.
 
### Priority
 
In the advanced configuration, you can specify the priority of snap lines of a single type. In the case of overlapping tolerance zones, a snap line with the highest priority is displayed on the canvas. The higher this value, the higher the priority.
 
### Override of Snap Lines for a Specific Product
 
You can also define custom settings for snap lines for a specific product through the [IConfiguration](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.isnaplinesconfig.htm.md) interface.
 
## See Also
  
### Manual
 
- [Understanding Print Products](https://customerscanvas.com/docs/cc6/understanding-print-products.htm.md)
- [Customizing the User Interface](https://customerscanvas.com/docs/cc6/customizing-user-interface.htm.md)

### IFrame API Reference
 
- [IConfiguration](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iconfiguration.htm.md)