# Bố cục, font và lề

Chọn khổ giấy, chỉnh chữ, lề và nền để tài liệu có cách trình bày như bạn muốn.

Khi chỉnh một mẫu, có những thay đổi bạn muốn áp dụng cho cả tài liệu, như đổi font chữ hoặc đặt lề chung. Cũng có những phần cần cách trình bày riêng, chẳng hạn trang bìa có nền màu, còn các trang nội dung giữ nền trắng.

Tembuilder cho phép bạn làm cả hai: đặt thiết lập chung ở **Global**, rồi chỉnh riêng lề và nền cho từng page trong **Structure**. Bài này sẽ hướng dẫn bạn chọn khổ giấy và tìm đúng nơi để chỉnh chữ, lề, nền theo ý mình.

## 1. Chọn khổ giấy

Chọn khổ giấy trong vùng xem trước, như vị trí **A4** được đánh dấu bên dưới. Khổ giấy áp dụng cho **toàn bộ template**, không đặt riêng cho từng page trong Config.

Tembuilder hỗ trợ 9 khổ giấy:

| Khổ giấy | Kích thước (rộng × cao, mm) |
| --- | --- |
| A0 | 841 × 1189 |
| A1 | 594 × 841 |
| A2 | 420 × 594 |
| A3 | 297 × 420 |
| A4 | 210 × 297 |
| A5 | 148 × 210 |
| A6 | 105 × 148 |
| US Letter | 215.9 × 279.4 |
| Legal | 215.9 × 355.6 |

<figure class="doc-sim layout-illustration" aria-label="Vùng xem trước → chọn khổ giấy">
<div class="sim-stage"><div class="sim-panel"><div class="ls-preview-bar"><div class="sim-tabs"><span>Layout</span><span class="sim-active">PDF</span></div><span class="sim-control sim-focus">A4 <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ls-paper-sizes"><div><div class="ls-sheet "><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div><small>A4 · 210 × 297 mm</small></div><div><div class="ls-sheet ls-letter"><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div><small>US Letter</small></div></div></div></div>
<figcaption>Vùng xem trước → chọn khổ giấy</figcaption>
</figure>

## 2. Đặt kiểu chữ chung ở Global

Mở **Structure → Global → Config → Typography**.

| Thiết lập | Giá trị và đơn vị |
| --- | --- |
| Font size | Cỡ chữ tính bằng **pt**, ví dụ `12`. |
| Line height | Hệ số theo cỡ chữ, ví dụ `1.4`; không nhập `px` hoặc `pt`. |
| Letter spacing | Khoảng cách ký tự tính bằng **em**, ví dụ `0.02`. |
| Text align | Left, Center, Right hoặc Justify. |
| Text color | Màu chữ dùng chung. |

Đây là các giá trị mặc định. Nếu một section đã đặt `font-size`, `color` hoặc `line-height` riêng trong CSS, thay đổi tương ứng ở Global sẽ không ghi đè phần CSS đó. Khi chỉnh Global mà một phần nội dung không đổi, hãy mở tab **CSS** của section để kiểm tra.

<figure class="doc-sim layout-illustration" aria-label="Global → Config → Typography">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Global <span>→</span> Config</div><div class="ls-editor sim-panel"><div class="ls-structure"><div class="sim-panel-title">STRUCTURE</div><div class="sim-tree-row sim-selected">⌄ Global</div><div class="sim-tree-row sim-muted">⌄ Invoice</div><div class="sim-tree-child sim-muted">Billing Parties</div></div><div class="ls-config"><div class="sim-tabs"><span>Props</span><span class="sim-active">Config</span></div><div class="ls-card"><div class="ls-card-title">Typography</div><div class="ls-setting"><span>Font size</span><span class="sim-input sim-focus">12 <small>pt</small></span></div><div class="ls-setting"><span>Line height</span><span class="sim-input">1.4</span></div><div class="ls-setting"><span>Text align</span><span class="sim-input">Left <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ls-setting"><span>Text color</span><span class="ls-color" aria-label="#111111"></span></div></div></div></div></div>
<figcaption>Global → Config → Typography</figcaption>
</figure>

## 3. Thêm và sắp xếp font

Mở **Global → Config → Fonts → Add font**, tìm font trong danh sách Google Fonts rồi thêm vào danh sách.

**Thứ tự trong danh sách là thứ tự ưu tiên sử dụng font.** Đưa font muốn dùng chính lên đầu bằng cách kéo thả hoặc dùng nút di chuyển lên/xuống. Các font phía sau được dùng thay thế khi font trước không có sẵn hoặc thiếu ký tự.

Nếu một section đặt `font-family` riêng trong CSS, section đó dùng font được chỉ định thay vì thứ tự mặc định ở Global.

<figure class="doc-sim layout-illustration" aria-label="Global → Config → Fonts → Add font">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Global <span>→</span> Config</div><div class="sim-panel"><div class="ls-fonts-head"><strong>Fonts</strong><span class="sim-control sim-focus">＋ Add font</span></div><div class="ls-font-row"><span class="ls-font-index">1</span><div><strong>Space Grotesk</strong><small>Google Fonts</small></div><span class="ls-font-sample">Aa</span></div><div class="ls-font-example">Tiếng Việt · Aa Bb Cc · 0123456789</div></div></div>
<figcaption>Global → Config → Fonts → Add font</figcaption>
</figure>

## 4. Đặt lề nội dung

Mở **Global → Config → Content margin**, bật lề rồi nhập **Top**, **Right**, **Bottom** và **Left** theo đơn vị **mm**.

Ví dụ, A4 rộng `210 mm`. Với lề trái và phải cùng `14 mm`, vùng nội dung còn `182 mm`. Đây là phần chiều rộng để bạn bố trí bảng và các section.

Dùng lề để đặt khoảng cách từ vùng nội dung đến mép giấy. Khoảng cách bên trong hoặc giữa các section được chỉnh bằng `padding` và `margin` trong CSS của section.

**Mirror margin** đổi chỗ lề trái/phải ở tờ chẵn, phù hợp khi in hai mặt để đóng quyển. Với Left `24` và Right `12`, tờ lẻ có lề trái `24 mm`; tờ chẵn có lề phải `24 mm`.

<figure class="doc-sim layout-illustration" aria-label="Lề tính bằng mm · Mirror margin đổi bên lề trái/phải ở tờ chẵn">
<div class="sim-stage"><div class="ls-path">Global <span>→</span> Config <span>→</span> Content margin</div><div class="ls-margin-scene"><div class="sim-panel ls-margin-panel"><div class="sim-panel-title">Content margin <small>mm</small></div><div class="ls-margin-diagram"><div class="ls-m-top"><small>Top</small><span class="sim-input">14</span></div><div class="ls-m-left"><small>Left</small><span class="sim-input sim-focus">24</span></div><div class="ls-m-page" aria-hidden="true">▤</div><div class="ls-m-right"><small>Right</small><span class="sim-input">12</span></div><div class="ls-m-bottom"><small>Bottom</small><span class="sim-input">20</span></div></div><div class="ls-mirror-row"><span>Mirror margin</span><span class="ls-toggle" aria-label="On"></span></div></div><div class="ls-mirror-pages"><div><span>1</span><div class="ls-margin-paper"><div class="ls-margin-area"><i></i><i></i><i></i></div></div></div><div><span>2</span><div class="ls-margin-paper ls-margin-even"><div class="ls-margin-area"><i></i><i></i><i></i></div></div></div></div></div></div>
<figcaption>Lề tính bằng mm · Mirror margin đổi bên lề trái/phải ở tờ chẵn</figcaption>
</figure>

## 5. Ghi đè lề và nền cho một page

Chọn page trong **Structure → Config** để đặt khác Global:

- **Custom margins → Content**: bật để dùng lề nội dung riêng cho page.
- **Background → Page background**: bật để dùng màu hoặc hình nền riêng.

Hai thiết lập này độc lập. Bạn có thể chỉ đổi nền trang bìa mà vẫn giữ lề chung, hoặc chỉ đổi lề cho một page chứa bảng rộng.

Tắt thiết lập riêng để page dùng lại giá trị **Global hiện tại**. Khi thiết lập riêng đang bật, thay đổi cùng mục ở Global không áp dụng cho page đó.

Header và Footer có mục lề, nền riêng trong Config khi được bật. Xem [Header và Footer](/docs/vi/editor/header-footer/) hoặc [sử dụng ảnh](/docs/vi/assets/images/) cho phần tương ứng.

<figure class="doc-sim layout-illustration" aria-label="Chọn page → Config → bật lề hoặc nền riêng">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Invoice <span>→</span> Config</div><div class="ls-page-scene"><div class="sim-panel ls-page-config"><div class="sim-tabs"><span class="sim-active">Config</span></div><div class="ls-card"><div class="ls-card-title">Custom margins</div><div class="ls-setting"><span>Content</span><span class="ls-toggle"></span></div><div class="ls-setting"><span>Left</span><span class="sim-input">24 <small>mm</small></span></div></div><div class="ls-card"><div class="ls-setting"><strong>Page background</strong><span class="ls-toggle sim-focus"></span></div><div class="ls-setting"><span>Color</span><span class="ls-color ls-color-page"></span></div></div></div><div class="ls-page-comparison"><div><small>Page 1 · Custom</small><div class="ls-sheet ls-custom-paper"><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div><div><small>Page 2 · Global</small><div class="ls-sheet "><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div></div></div></div>
<figcaption>Chọn page → Config → bật lề hoặc nền riêng</figcaption>
</figure>

## 6. Page trong Structure và tờ PDF

Một **page trong Structure** là nhóm các section, không giới hạn ở một tờ giấy. Khi nội dung dài, nhóm đó có thể tạo ra nhiều tờ PDF; cấu hình của page tiếp tục áp dụng cho các tờ được tạo từ nhóm này.

Vì vậy, muốn một trang bìa có nền hoặc lề khác phần nội dung, hãy đặt bìa thành một page riêng trong Structure. Muốn điều khiển vị trí nội dung sang tờ tiếp theo, dùng [thiết lập ngắt trang](/docs/vi/editor/pagination/).

<figure class="doc-sim layout-illustration" aria-label="Một page trong Structure có thể tạo nhiều tờ PDF">
<div class="sim-stage"><div class="sim-panel"><div class="ls-review-bar"><span class="sim-control">Layout</span><span class="sim-control sim-focus">PDF</span><small>A4 · 3 pages</small></div><div class="ls-review-pages"><div><small>Trang 1</small><div class="ls-sheet "><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div><div><small>Trang 2</small><div class="ls-sheet "><b>Tembuilder</b><strong>NỘI DUNG</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div><div><small>Trang 3</small><div class="ls-sheet "><b>Tembuilder</b><strong>NỘI DUNG</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div></div><div class="ls-review-footer">1 / 3 <span>‹ &nbsp; ›</span></div></div></div>
<figcaption>Một page trong Structure có thể tạo nhiều tờ PDF</figcaption>
</figure>