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.
このレシピで身につくこと
エディタで作る
- 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.
スキーマと 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".
出来上がったドキュメント
下の JSON は、2 つの道筋が生むドキュメントそのものです。テストがこれを検証し、警告なしでレンダリングされることも確認しているので、そのまま貼り付けてお使いいただけます。
{
"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"
}
]
}リクエストの本文です。上のドキュメントを template に、下のデータを data に入れてください。
{
"template": "(the document above)",
"data": {
"name": "brewmypdf",
"line1": "118 Seongsui-ro, Seongdong-gu, Seoul"
}
}