Label sheet
Fill a sheet of off-the-shelf label stock. You learn matching the margins to the stock, laying the cells out with a grid table, and per-cell padding and vertical alignment.
What this teaches
Building it in the editor
- Start from the specification of the label stock you use. Its top and bottom margins and cell size are fixed, so those are the numbers to match.
- Enter those numbers as the page margins. The unit is px at 96dpi, so convert from mm by multiplying by 96 ÷ 25.4.
- Add a grid table with as many rows and columns as the sheet has cells. Set the row height to the label height and each cell becomes a label.
- Give the cells generous padding. Labels are trimmed at the edge, so text sitting near it gets cut.
- Centre the vertical alignment so one-line and two-line labels do not make the eye jump.
- Grid lines are usually not printed — turn them off, and switch them on only while checking the layout.
Building it with the schema and API
- page.margin takes t, r, b and l in px. Node coordinates start inside that margin.
- The grid rowHeight is the label height. Content larger than that will stretch it, so size the type and padding together.
- cells[].padY and padX give per-cell padding. -1 means "inherit from the table" — 0 is a real value meaning "no padding".
- Clear the table stroke to remove the lines. To clear one cell only, set cells[].border to "none".
The finished document
The JSON below is exactly the document those two routes produce. Our tests validate it and check that it renders without warnings, so you can paste it and use it as is.
{
"v": 1,
"unit": "px",
"page": {
"size": "a4",
"orientation": "portrait",
"margin": {
"t": 49,
"r": 26,
"b": 49,
"l": 26
},
"header": "",
"footer": ""
},
"fonts": [],
"styles": [
{
"id": "s_tbl",
"fontFamily": "Liberation Sans",
"fontSize": 11,
"fontWeight": 400,
"italic": false,
"color": "#111111",
"bg": "transparent",
"align": "left",
"valign": "middle",
"lineHeight": 1.35,
"border": "none",
"radius": 0,
"opacity": 1
}
],
"nodes": [
{
"id": "n_sheet",
"parent": "",
"order": 0,
"type": "table",
"x": 0,
"y": 0,
"w": 697,
"h": 800,
"show": "",
"styleId": "s_tbl",
"props": {
"text": "",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 10,
"padX": 12,
"align": "",
"valign": "middle",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 160,
"max": 0,
"columns": [
{
"header": "",
"cell": "",
"width": 232,
"align": "left"
},
{
"header": "",
"cell": "",
"width": 232,
"align": "left"
},
{
"header": "",
"cell": "",
"width": 233,
"align": "left"
}
],
"rows": 5,
"cells": [
{
"r": 0,
"c": 0,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "left",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 0,
"c": 1,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "center",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 0,
"c": 2,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "left",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 1,
"c": 0,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "left",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 1,
"c": 1,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "center",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
},
{
"r": 1,
"c": 2,
"span": 1,
"rowspan": 1,
"text": "{{ data.name }}\n{{ data.line1 }}",
"align": "left",
"valign": "",
"wrap": "",
"pad": -1,
"padY": 14,
"padX": -1,
"src": "",
"fit": "",
"bg": "",
"head": false,
"border": ""
}
],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Label sheet"
}
]
}The request body. Put the document above into template and the data below into data.
{
"template": "(the document above)",
"data": {
"name": "brewmypdf",
"line1": "118 Seongsui-ro, Seongdong-gu, Seoul"
}
}