Chuyển tới nội dung chính

{/* Trang này được tạo tự động từ SKILL.md của kỹ năng bởi website/scripts/generate-skill-docs.py. Chỉnh sửa nguồn SKILL.md, không phải trang này. */}

Lấy cớ

Sử dụng khi xây dựng các bản demo trình duyệt sáng tạo với @chenlou/pretext — Bố cục văn bản không có DOM cho nghệ thuật ASCII, dòng kiểu chữ xung quanh chướng ngại vật, trò chơi văn bản dưới dạng hình học, kiểu chữ động và nghệ thuật tạo hình dựa trên văn bản. Theo mặc định, tạo các bản trình diễn HTML một tệp.

Siêu dữ liệu kỹ năng​

NguồnĐi kèm (được cài đặt theo mặc định)
Đường dẫn

skills/creative/pretext ` | | Phiên bản |

1.0.0 ` | | Tác giả | Đại lý Hermes | | Giấy phép | MIT | | Nền tảng | Linux, macOS, Windows | | Thẻ |

creative-coding

, `typography

, `pretext

, `ascii-art

, `canvas

, `generative

, `text-layout

, kinetic-typography | | Kỹ năng liên quan | XPROTECTX15XPROTECTX, XPROTECTX16XPROTECTX, XPROTECTX17XPROTECTX, XPROTECTX18XPROTECTX |

Tham khảo: đầy đủ SKILL.md​

thông tin

Sau đây là định nghĩa kỹ năng đầy đủ mà Hermes tải khi kỹ năng này được kích hoạt. Đây là những gì tác nhân coi là hướng dẫn khi kỹ năng được kích hoạt.

Trình diễn sáng tạo lý do

Tổng quan`XPROTECTX19XPROTECTX là thư viện TypeScript không phụ thuộc 15KB của Cheng Lou (React core, ReasonML, Midjourney) để bố cục và đo lường văn bản nhiều dòng không có DOM. Nó thực hiện một điều: cho​

(text, font, width)

, trả về ngắt dòng, độ rộng trên mỗi dòng, vị trí trên mỗi biểu đồ và tổng chiều cao - tất cả đều thông qua phép đo canvas, không chỉnh lại.

Nghe có vẻ giống như hệ thống ống nước. Không phải vậy. Bởi vì nó nhanh và hình học, nó là một sáng tạo nguyên thủy: bạn có thể chỉnh lại các đoạn văn xung quanh một sprite đang chuyển động ở tốc độ 60 khung hình/giây, xây dựng các trò chơi có cấp độ hình học được tạo thành từ các từ thực, điều khiển biểu tượng ASCII thông qua văn xuôi, chia nhỏ văn bản thành các hạt với vị trí bắt đầu chính xác trên mỗi biểu đồ hoặc đóng gói giao diện người dùng nhiều dòng được thu nhỏ mà không có bất kỳ lỗi getBoundingCLIentRect nào.

Kỹ năng này tồn tại để Hermes có thể tạo các bản demo thú vị với nó - những loại mà mọi người đăng lên X. Xem pretext.cool và chenglou.me/pretext để biết kho nội dung demo cộng đồng.

Khi nào nên sử dụng​

Sử dụng khi người dùng yêu cầu:

  • Một "bản demo cái cớ" / "thứ cái cớ thú vị" / "text-as-X"
  • Văn bản chảy xung quanh một hình dạng chuyển động (các phần anh hùng, bố cục biên tập, các trang dạng dài hoạt hình)
  • Hiệu ứng nghệ thuật ASCII sử dụng từ thật hoặc văn xuôi, không phải các trình quét đơn cách
  • Trò chơi trong đó sân chơi / chướng ngại vật / viên gạch được làm bằng văn bản (Tetris-from-letters, Breakout-of-prose)
  • Kiểu chữ động học với vật lý trên mỗi glyph (vỡ, phân tán, đàn, dòng chảy)
  • Nghệ thuật tạo hình kiểu chữ, đặc biệt với các chữ viết không phải tiếng Latinh hoặc chữ viết hỗn hợp
  • Giao diện người dùng "thu nhỏ" nhiều dòng (chiều rộng vùng chứa nhỏ nhất vẫn vừa với văn bản)
  • Bất kỳ điều gì yêu cầu biết ngắt dòng trước khi hiển thị

Không sử dụng cho:

  • Các trang SVG/HTML tĩnh trong đó CSS đã giải quyết được bố cục - chỉ cần sử dụng CSS
  • Trình soạn thảo văn bản đa dạng thức, công cụ định dạng nội tuyến chung (lý do thu hẹp có chủ ý)
  • Hình ảnh → văn bản (sử dụng kỹ năng ascii-art / `ascii-video

)

  • Nghệ thuật sáng tạo canvas thuần túy không có vai trò văn bản - sử dụng `p5js

Tiêu chuẩn sáng tạo​

Đây là nghệ thuật thị giác được hiển thị trong trình duyệt. Lấy cớ trả về số; bạn vẽ thứ đó.

  • Không gửi bản demo "hello world". Mẫu hello-orb-flow.html là điểm bắt đầu. Mỗi bản demo được phân phối phải thêm màu sắc, chuyển động, bố cục có chủ ý và một chi tiết hình ảnh mà người dùng không yêu cầu nhưng sẽ đánh giá cao.
  • Nền tối, lõi ấm, bảng màu cân nhắc. Màu hổ phách trên nền đen (CRT / terminal) cổ điển hoạt động được, nhưng màu trắng lạnh trên than (biên tập) và phấn màu không bão hòa (risograph) cũng vậy. Chọn một và cam kết.
  • Phông chữ tỷ lệ là điểm chính. Toàn bộ cảm giác của Pretext là "không đơn cách" — hãy dựa vào đó. Sử dụng Iowan Old Style, Inter, JetBrains Mono, Helvetica Neue hoặc phông chữ có thể thay đổi. Không bao giờ mặc định sans.
  • Nguồn/văn bản thực, không phải lorem ipsum. Văn bản phải có ý nghĩa gì đó. Tuyên ngôn ngắn, thơ, mã nguồn thực, văn bản được tìm thấy, README của riêng thư viện - không bao giờ là `lorem ipsum

.

  • Lớp sơn đầu tiên xuất sắc. Không có trạng thái tải, không có khung trống. Bản demo phải trông có thể chuyển được ngay khi mở ra.

ngăn xếp​

Một tệp HTML độc lập cho mỗi bản demo. Không có bước xây dựng.| Lớp | Công cụ | Mục đích | |-------|------|---------| | Cốt lõi |

@chenglou/pretext qua esm.sh ` CDN | Đo văn bản + bố cục dòng | | Kết xuất | HTML5 Canvas 2D | Kết xuất Glyph, bố cục trên mỗi khung hình | | Phân đoạn |

Intl.Segmenter ` (tích hợp sẵn) | Tách biểu đồ cho biểu tượng cảm xúc / CJK / dấu kết hợp | | Tương tác | Sự kiện DOM thô | Chuột / cảm ứng / bánh xe — không có khung |

<script type="module"
 import {
  prepare, layout,                   // use-case 1: simple height
  prepareWithSegments, layoutWithLines,  // use-case 2a: fixed-width lines
  layoutNextLineRange, materializeLineRange, // use-case 2b: streaming / variable width
  measureLineStats, walkLineRanges,  // stats without string allocation
} from "https://esm.sh/@chenglou/pretext@0.0.6";
</script

`
``Ghim phiên bản. 

@0.0.6
` tại thời điểm viết bài - hãy kiểm tra [npm](https://www.npmjs.com/package/@chenglou/pretext) để biết thông tin mới nhất nếu hành vi demo bị tắt.

## Hai trường hợp sử dụng

Hầu hết mọi thứ đều giảm xuống một trong hai hình dạng này. Học cả hai.

### Ca sử dụng 1 — đo lường, sau đó kết xuất bằng CSS/DOM

`js
const prepared = prepare(text, "16px Inter");
const { height, lineCount } = layout(prepared, 320, 20);

`
``Bạn vẫn để trình duyệt vẽ chữ. Lý do chỉ cho bạn biết hộp sẽ cao bao nhiêu ở một chiều rộng nhất định, **không** đọc DOM. Sử dụng cho:

- Danh sách ảo hóa nơi các hàng chứa văn bản gói
- Xây dựng với chiều cao thẻ chính xác
- "Nhãn này có vừa không?" kiểm tra thời gian phát triển
- Ngăn chặn sự thay đổi bố cục khi tải văn bản từ xa`**Giữ 
`font
` và 
`letterSpacing
` đồng bộ chính xác với CSS của bạn.** Định dạng canvas 
`ctx.font
` (ví dụ: 

"16px Inter"

, 

"500 17px 'JetBrains Mono'"

) phải khớp với CSS được hiển thị hoặc độ lệch số đo.

### Trường hợp sử dụng 2 — đo *và* tự hiển thị

``` js
const prepared = prepareWithSegments(text, FONT);
const { lines } = layoutWithLines(prepared, 320, 26);
for (let i = 0; i < lines.length; i++) {
  ctx.fillText(lines[i].text, 0, i * 26);
}

`
``Đây là nơi hoạt động sáng tạo tồn tại. Bạn sở hữu bản vẽ, vì vậy bạn có thể:

- Kết xuất sang canvas, SVG, WebGL hoặc bất kỳ hệ tọa độ nào
- Thay thế các biến đổi trên mỗi glyph (xoay, jitter, tỷ lệ, độ mờ)
- Sử dụng siêu dữ liệu dòng (chiều rộng, vị trí đồ thị) làm hình học

Đối với luồng **có chiều rộng trên mỗi dòng** (văn bản xung quanh hình, văn bản ở dạng dải bánh rán, văn bản ở cột không phải hình chữ nhật):

``` js
let Cursor = { segmentIndex: 0, graphemeIndex: 0 };
let y = 0;
while (true) {
  const lineWidth = widthAtY(y);  // your function: how wide is the corridor at this y?
  const range = layoutNextLineRange(prepared, Cursor, lineWidth);
  if (!range) break;
  const line = materializeLineRange(prepared, range);
  ctx.fillText(line.text, leftEdgeAtY(y), y);
  Cursor = range.end;
  y += lineHeight;
}

`
``Đây là mẫu quan trọng nhất trong toàn bộ thư viện. Đó là thứ mở khóa "văn bản chảy xung quanh một hình vẽ được kéo" - bản demo đã lan truyền trên X.

### Người trợ giúp đáng biết
- 
`measureLineStats(prepared, maxWidth)
` → 

{ lineCount, maxLineWidth }
` — dòng rộng nhất, tức là chiều rộng bọc co nhiều dòng.

- 
`walkLineRanges(prepared, maxWidth, callback)

 - lặp lại các dòng mà không phân bổ chuỗi. Sử dụng cho số liệu thống kê/vật lý trên biểu đồ khi bạn không cần ký tự.
- 

@chenglou/pretext/rich-inline
` — cùng một hệ thống nhưng dành cho các đoạn văn trộn phông chữ / chip / đề cập. Nhập từ đường dẫn phụ.

## Mẫu công thức demo

Tập hợp cộng đồng (xem 
`references/patterns.md

) tập hợp thành một số mẫu mạnh. Chọn một và riff - đừng phát minh ra một danh mục mới trừ khi được yêu cầu.

| Mẫu | API khóa | Ý tưởng mẫu |
|---|---|---|
| **Chuyển dòng xung quanh chướng ngại vật** |

layoutNextLineRange

 + chức năng chiều rộng mỗi hàng | Đoạn biên tập bao quanh một hình con trỏ được kéo |
| **Trò chơi văn bản dưới dạng hình học** |

layoutWithLines

 + chỉnh lưu va chạm trên mỗi dòng | Đột phá nơi mỗi viên gạch là một lời đo |
| **Vỡ / hạt** |

walkLineRanges
` → mỗi đồ thị (x,y) → vật lý | Câu nổ thành chữ khi bấm vào |
| **kiểu chữ chướng ngại vật ASCII** |

layoutNextLineRange

 + nhịp vượt chướng ngại vật được đo trên mỗi hàng | Logo Bitmap ASCII, các hình thái và các đối tượng dây có thể kéo được giúp văn bản mở xung quanh hình học thực tế của chúng |
| **Bài xã luận nhiều cột** |

layoutNextLineRange
` mỗi cột + con trỏ dùng chung | Tạp chí hoạt hình lan truyền với những trích dẫn kéo |
| **Loại động học** |

layoutWithLines

 + biến đổi trên mỗi dòng theo thời gian | Star Wars bò, sóng, nảy, trục trặc |
| **Bọc co nhiều dòng** |

measureLineStats
` | Thẻ trích dẫn tự động điều chỉnh kích thước cho đến nơi chứa kín nhất của nó |

Xem 
`templates/donut-orbit.html
` và 
`templates/hello-orb-flow.html
` để biết cách khởi động tệp đơn.

## Quy trình làm việc
1. **Chọn mẫu** từ bảng trên dựa trên tóm tắt của người dùng.
2. **Bắt đầu từ một mẫu**:
   - 
`templates/hello-orb-flow.html
` — văn bản phản chiếu xung quanh một quả cầu đang chuyển động (mẫu phản xạ xung quanh chướng ngại vật)
   - 
`templates/donut-orbit.html
` — ví dụ nâng cao: đo chướng ngại vật biểu tượng ASCII, hình cầu/khối dây có thể kéo được, trường hình dạng biến hình, văn bản DOM có thể chọn và điều khiển chỉ dành cho nhà phát triển
   - 
`write_file
` sang 

.html
` mới trong 

/tmp/
` hoặc không gian làm việc của người dùng.
3. **Hoán đổi kho văn bản** lấy nội dung nào đó có chủ ý cho bản tóm tắt. Văn xuôi thật, 10-100 câu, không có lorem.
4. **Điều chỉnh tính thẩm mỹ** — phông chữ, bảng màu, bố cục, tương tác. Đây là công việc; đừng bỏ qua nó.
5. **Xác minh cục bộ**:

``` sh
   cd <dir-with-html && Python3 -m http.server 8765

   # then open http://localhost:8765/<file.html

`
6. **Kiểm tra bảng điều khiển** — lấy cớ sẽ bị loại nếu 
`prepareWithSegments
` được gọi với chuỗi phông chữ sai; 
`Intl.Segmenter
` có sẵn trong mọi trình duyệt hiện đại.
7. **Hiển thị cho người dùng đường dẫn tệp**, không chỉ mã - họ muốn mở nó.## Ghi chú về hiệu suất
- 
`prepare()
` / 
`prepareWithSegments()
` là cuộc gọi đắt giá. Thực hiện **một lần** cho mỗi cặp văn bản+phông chữ. Cache tay cầm.
- Khi thay đổi kích thước, chỉ chạy lại 
`layout()
` / 
`layoutWithLines()
` — không bao giờ chuẩn bị lại.
- Đối với hoạt ảnh trên mỗi khung hình trong đó văn bản không thay đổi nhưng hình học thì có, 
`layoutNextLineRange
` trong vòng lặp chặt chẽ đủ rẻ để thực hiện mọi khung hình ở tốc độ 60 khung hình/giây cho các đoạn văn có độ dài bình thường.
- Khi hiển thị mặt nạ ASCII trên mỗi khung, hãy giữ một vùng đệm ô (
`Uint8Array

/mảng đã nhập), lấy các khoảng chướng ngại vật đo được trên mỗi hàng từ các ô hoặc hình học được chiếu, hợp nhất các khoảng, sau đó đưa các khoảng đó vào 
`layoutNextLineRange
` trước khi vẽ văn bản.
- Giữ hoạt ảnh trực quan và hoạt ảnh bố cục được kết hợp. Nếu một hình cầu biến thành hình khối, thì cả vùng đệm ô được hiển thị và khoảng chướng ngại vật có cùng giá trị; nếu không thì bản demo trông như được vẽ thay vì được chỉnh lại về mặt vật lý.
- Để làm mờ dần, hãy ưu tiên độ mờ của lớp hơn là thay đổi cường độ glyph hoặc tỷ lệ chướng ngại vật. Đặt các họa tiết ASCII tạm thời trên khung vẽ của riêng chúng và làm mờ khung vẽ bằng độ mờ CSS/GSAP để hình học không bị co lại.
- Cài đặt Canvas 
`ctx.font
` chậm một cách đáng ngạc nhiên; đặt nó **một lần** cho mỗi khung hình nếu phông chữ không thay đổi, không phải cho mỗi lệnh gọi 
`fillText

.

## Những cạm bẫy thường gặp
1. **Chuỗi phông chữ CSS/canvas trôi.** Đã đo 
`ctx.font = "16px Inter"

, nhưng CSS cho biết 
`font-family: Inter, sans-serif; font-size: 16px

. Tốt *nếu* Tải liên. Nếu Inter 404, CSS sẽ quay trở lại sans-serif và số đo sẽ chênh lệch 5-20%. Luôn sử dụng phông chữ 
`preload
` hoặc sử dụng dòng web an toàn.
2. **Chuẩn bị lại bên trong vòng lặp hoạt ảnh.** Chỉ 
`layout*
` là rẻ. Gọi lại 
`prepare
` mọi khung hình sẽ hoạt động hoàn hảo. Giữ tay cầm đã chuẩn bị sẵn trong phạm vi mô-đun.
3. **Quên 
`Intl.Segmenter
` để phân tách biểu đồ.** Biểu tượng cảm xúc, dấu kết hợp, CJK — 

"é".split("")
` cung cấp cho bạn hai ký tự. Sử dụng 
`new Intl.Segmenter(undefined, { granularity: "grapheme" })
` khi lấy mẫu các glyph riêng lẻ có thể nhìn thấy được.
4. **chip 
`break: 'never'
` không có 
`extraWidth

.** Trong 
`rich-inline

, nếu bạn sử dụng 
`break: 'never'
` cho chip/đề cập nguyên tử, bạn cũng phải cung cấp 
`extraWidth
` cho phần đệm thuốc — nếu không thì chip chrome sẽ tràn ra ngoài hộp đựng.
5. **Sử dụng 

@chenglou/pretext
` từ 
`unpkg
` với mục nhập chỉ dành cho TypeScript.** Sử dụng 
`esm.sh

 - nó tự động biên dịch các bản xuất TS sang ESM sẵn sàng cho trình duyệt. 
`unpkg
` sẽ 404 hoặc phục vụ TS thô.
6. **Dự phòng monospace âm thầm xóa toàn bộ vấn đề.** Người dùng nhìn thấy kết quả có giao diện monospace thường có CSS ​​
`font-family
` chuyển thành 
`monospace

. Xác minh phông chữ được hiển thị thực tế thông qua DevTools.
7. **Bỏ qua các hàng và điều chỉnh độ rộng** khi chạy quanh một hình. Nếu hành lang trên hàng này quá hẹp để vừa một dòng, *bỏ qua hàng* (
`y += lineHeight; Continue;

) thay vì chuyển một maxWidth nhỏ cho 
`layoutNextLineRange

 - lý do sẽ trả về các dòng một biểu đồ trông có vẻ bị đứt quãng.
8. **Vận chuyển một bản demo lạnh.** Màu sơn đầu tiên mặc định trông giống như hướng dẫn. Thêm: họa tiết, dòng quét tinh tế, tự động chuyển động khi không hoạt động, một phản hồi tương tác được lựa chọn cẩn thận (kéo, di chuột, cuộn, nhấp chuột). Nếu không có những thứ này, "bản demo lý do thú vị" sẽ trở thành "bản trình diễn thực tập của README".

## Danh sách kiểm tra xác minh
- [ ] Demo là một tệp 

.html
` độc lập - mở bằng cách nhấp đúp hoặc 
`Python3 -m http.server

- [ ] 

@chenglou/pretext
` được nhập qua 
`esm.sh
` với phiên bản được ghim
- [ ] Corpus là văn xuôi thực sự, không phải lorem ipsum và phù hợp với ý tưởng của bản demo
- [ ] Chuỗi phông chữ được chuyển tới 
`prepare
` khớp chính xác với phông chữ CSS
- [ ] 
`prepare()
` / 
`prepareWithSegments()
` được gọi một lần, không phải trên mỗi khung
- [ ] Nền tối + bảng màu được cân nhắc — không phải khung vẽ màu trắng mặc định
- [ ] Ít nhất một phản hồi tương tác (kéo/di chuột/cuộn/nhấp) hoặc tự động chuyển động khi không hoạt động
- [ ] Đã thử nghiệm cục bộ với 
`Python3 -m http.server
` và xác nhận không có lỗi bảng điều khiển
- [ ] 60 khung hình/giây trên máy tính xách tay tầm trung (hoặc tài liệu về tình trạng xuống cấp nhẹ)
- [ ] Một chi tiết "thêm một dặm" mà người dùng không yêu cầu

## Tham khảo: Bản demo cộng đồng

Sao chép những thứ này để lấy cảm hứng/mẫu (tất cả MIT-ish, được liên kết từ [pretext.cool](https://www.pretext.cool/)):- **Pretext Breaker** — đột phá bằng gạch chữ — 
`GitHub.com/rinesh/pretext-breaker

- **Tetris × Giả vờ** — 
`GitHub.com/shinichimochizuki/tetris-pretext

- **Hoạt hình rồng** — 
`GitHub.com/qtakmalay/PreTextExperiments

- **Công cụ biên tập Somnai** — 
`GitHub.com/somnai-dreams/pretext-demos

- **Táo hư!! ASCII** — 
`GitHub.com/frmlinn/bad-Apple-pretext

- **Kéo-sprite chỉnh lại** — 
`GitHub.com/dokobot/pretext-demo

- **Đồng hồ biên tập báo thức** — 
`GitHub.com/SmisLee/alarmy-pretext-demo
``Sân chơi chính thức: [chenglou.me/pretext](https://chenglou.me/pretext/) — đàn accordion, bong bóng, bố cục động, công cụ biên tập, so sánh biện minh, xây dựng, trò chuyện đánh dấu, ghi chú phong phú.