Multi-page Demo — PDF Creator

# เอกสารหลายหน้า — Multi-page Demo

ทดสอบการขึ้นหน้าใหม่ทั้งแบบธรรมชาติ (natural) และแบบบังคับ (forced page-break)

## บทที่ 1: บทนำ (Introduction)

เอกสารนี้ทดสอบความสามารถในการสร้าง PDF หลายหน้าของ TypeScript PDF Creator โดยครอบคลุมสถานการณ์ต่าง ๆ ได้แก่ การขึ้นหน้าแบบธรรมชาติเมื่อเนื้อหาเกินขนาดหน้า และการบังคับขึ้นหน้าใหม่ด้วย `page-break-before: always`

### 1.1 การทำงานของ Page Break

ในการสร้าง PDF เนื้อหาที่ยาวเกินขนาดหน้าจะถูกจัดเรียงต่อยังหน้าถัดไปโดยอัตโนมัติ ระบบจะคำนวณพิกัด Y ของแต่ละ element และตัดสินใจว่าควรอยู่ในหน้าใด

สำหรับการบังคับขึ้นหน้า สามารถใช้ CSS property `page-break-before: always` หรือ `break-before: page` กับ element ที่ต้องการเริ่มต้นหน้าใหม่

### พื้นที่จำลองเนื้อหาขนาดใหญ่

block นี้สูง 350px เพื่อกระตุ้นให้เกิดการขึ้นหน้าโดยธรรมชาติ

(Natural Page Break Trigger)

### 1.2 เนื้อหาต่อเนื่องหลังกล่องใหญ่

เนื้อหานี้ควรปรากฏบนหน้าถัดไปหลังจากกล่องขนาดใหญ่ด้านบนดันเนื้อหาเกินขอบหน้า A4 ซึ่งมีความสูงประมาณ 841 จุด และมี margin ด้านบน-ล่าง 20mm (ประมาณ 113 จุด)

## บทที่ 2: หน้าที่ถูกบังคับขึ้นใหม่

Forced page break via page-break-before: always

หน้านี้เริ่มต้นด้วย `page-break-before: always` บน div.chapter-header ดังนั้นไม่ว่าเนื้อหาก่อนหน้าจะอยู่ที่ตำแหน่งใด หน้านี้จะเริ่มต้นหน้าใหม่เสมอ

### ส่วน A

เนื้อหาคอลัมน์ซ้าย Lorem ipsum dolor sit amet consectetur adipiscing elit

- รายการที่ 1 — สิ่งแรก
- รายการที่ 2 — สิ่งที่สอง
- รายการที่ 3 — สิ่งที่สาม

### ส่วน B

เนื้อหาคอลัมน์ขวา สามารถใช้ Flex layout เพื่อจัดวางเนื้อหาแบบ 2 คอลัมน์ได้

1. ขั้นตอนที่ 1
2. ขั้นตอนที่ 2
3. ขั้นตอนที่ 3

พื้นที่จำลองอีกชิ้น — เพื่อทดสอบการล้นไปยังหน้าที่ 3

เนื้อหานี้ควรปรากฏบนหน้าที่ 3 เนื่องจากกล่องด้านบนดันให้ล้นหน้า

## บทที่ 3: หัวข้อย่อยและรายการซ้อน

Page 3 — Nested lists and subheadings

### 3.1 หัวข้อระดับ 3

สามารถมีหัวข้อย่อยหลายระดับเพื่อจัดโครงสร้างเอกสารให้อ่านง่าย

#### 3.1.1 หัวข้อระดับ 4

นี่คือหัวข้อระดับที่ 4 ซึ่งใช้สำหรับเนื้อหาที่ต้องการความละเอียดสูง

- หัวข้อหลัก 1
  - หัวข้อย่อย 1.1
  - หัวข้อย่อย 1.2
  - หัวข้อย่อย 1.3
- หัวข้อหลัก 2
  - หัวข้อย่อย 2.1
  - หัวข้อย่อย 2.2
- หัวข้อหลัก 3 — ไม่มีหัวข้อย่อย

### 3.2 Ordered List ลำดับเลข

1. ติดตั้ง Node.js และ Bun
2. ติดตั้ง dependencies ด้วย `bun install`
3. รันคำสั่ง `bun run src/index.ts`
4. ตรวจสอบไฟล์ PDF ที่สร้างในโฟลเดอร์ output
5. ปรับแต่ง HTML/CSS ตามต้องการ

## บทที่ 4: บทสรุป

Page 4 — Summary and closing

ทดสอบการสร้าง PDF หลายหน้าเสร็จสมบูรณ์แล้ว ไฟล์ PDF นี้มีทั้งหมด 4 หน้า โดยแต่ละหน้ามี header และ footer ที่แสดงหมายเลขหน้าอัตโนมัติจาก @page rules

### สรุปคุณสมบัติที่ทดสอบ

- ✓ Natural page break — เนื้อหาล้นหน้าโดยธรรมชาติ
- ✓ Forced page break — บังคับขึ้นหน้าด้วย CSS
- ✓ Multiple pages — เอกสาร 4+ หน้า
- ✓ Header/Footer — จาก @page rules พร้อม counter(page) / counter(pages)
- ✓ Nested lists — รายการซ้อน
- ✓ Multi-column — Flex row layout