Kiểu chữ

Đầu vào là một yêu cầu viết bằng lời thường — “trang khoá học có phần nội dung khoá học liệt kê các mô-đun” — và đầu ra là, với mỗi dòng chữ mà yêu cầu đó ngụ ý, một mã tình huống, một phần tử và một className. Yêu cầu không bao giờ nói ra một cỡ chữ, và không được phép ước lượng một cỡ chữ: cỡ chữ, độ đậm và tông màu suy ra từ thứ dòng chữ đó sở hữu.

Luật

Một dòng chữ phát biểu thứ nó sở hữu. Chọn cỡ chữ, độ đậm và tông màu từ quyền sở hữu đó, không bao giờ từ việc muốn nó trông nổi đến đâu.

Chỉ có hai dữ kiện quyết định: cấp độ dàn ý — dòng này có phải một bậc trong dàn ý tài liệu không — và quyền sở hữu nội dung — dòng này gọi tên một đối tượng, phát biểu một dữ kiện, bổ nghĩa cho một dòng khác, chia một luồng kết quả, hay là chữ mà một thành phần điều khiển đã tự sở hữu.

Sở thích thị giác, hình dáng con số, độ dài nhãn, rê chuột, khoảng trống còn lại, điểm ngắt và hình học của ảnh chụp màn hình không chọn gì cả.

Đây là luật bắt buộc. Mọi dòng chữ hiển thị ra đều rơi vào đúng một mã dưới đây. Không có dòng nào ngắn đến mức được miễn: một chú thích mười hai ký tự dưới một con số là TYPOGRAPHY-9, đúng cùng một lý do mà tên tuyến trang ở đầu trang là TYPOGRAPHY-1. Câu “có mỗi một chữ thôi mà” là chỗ luật này bị bỏ qua nhiều nhất — vì một chữ chính là chỗ người ta với tay lấy cỡ chữ nào trông vừa mắt.

Mã tình huống

Mỗi tình huống mô-đun này chi phối đều mang một mã, TYPOGRAPHY-<số thứ tự>. Mã gọi tên TÌNH HUỐNG; cột phần tử và cột className gọi tên thứ mà tình huống đó phát ra. Chúng không giống nhau, và có một mã không phát ra gì cả.

TYPOGRAPHY-11 LÀ MỘT TÌNH HUỐNG, KHÔNG PHẢI MỘT CÔNG THỨC. Nhãn nút, nhãn nhỏ trạng thái, chữ của liên kết, văn bản gợi ý của trường nhập liệu và nhãn trạng thái đều mang kiểu chữ do chính thành phần điều khiển đã quyết. Viết đè một cỡ chữ lên chữ đó từ bên ngoài là giành một quyền sở hữu mà nơi gọi không có, và cái sai đó tàng hình cho tới ngày thành phần điều khiển đổi rồi một nơi sử dụng lệch khỏi tất cả những nơi còn lại. Mã này tồn tại vì “thành phần điều khiển đã quyết rồi” là một trường hợp người đọc phải nhận ra, trích dẫn được và bị bắt lỗi được — một tình huống không có tên là một tình huống không ai chứng minh được là đã làm sai.

TYPOGRAPHY-12 LÀ MỘT CÁI SÀN, KHÔNG PHẢI LỐI THOÁT. Nó là câu trả lời đọc được khi yêu cầu thật sự không nêu chủ sở hữu nào, để một bảng tra công khai không bao giờ trả về một lời từ chối. Nó không phải giấy phép bỏ qua câu hỏi quyền sở hữu khi câu trả lời đã có sẵn trong yêu cầu.

Dàn ý dừng ở bốn. Không có bậc tiêu đề thứ năm, và thêm nó vào là đổi luật chứ không phải đi đường tắt: một cấu trúc nội dung cần độ sâu năm là một cấu trúc nội dung phải phẳng lại. Một cái thang đóng buộc người ta phải quyết định quyền sở hữu; một cái thang mở mời người ta bịa thêm một bậc, tức là để con mắt quay lại quyết định thông qua phép tính.

Đọc một yêu cầu

1. Liệt kê những dòng chữ mà yêu cầu nói ra. “Trang khoá học có phần nội dung khoá học liệt kê các mô-đun, mỗi mô-đun hiện tiêu đề và số bài” nói ra bốn loại dòng: tên trang, tên phần nội dung, tiêu đề từng mô-đun, và dòng đếm số bài.
2. Không bịa ra dòng chữ mà yêu cầu không hề nhắc. Câu khẩu hiệu, đường dẫn phân cấp hay chú thích chân trang không nằm trong yêu cầu đó. Giải cái được nói ra; phần còn lại giải khi nó xuất hiện.
3. Giải từ ngoài vào trong — tên trang trước, rồi tên các phần nội dung, rồi tới những dòng bên trong từng phần. Một dòng không bao giờ thừa hưởng mã của dòng trên nó; quyền sở hữu được quyết từng dòng một.
4. Với mỗi dòng, hỏi câu hỏi dàn ý trước. Dòng này có phải một bậc trong dàn ý tài liệu không, và bậc mấy? Nếu có, riêng độ sâu đã quyết xong TYPOGRAPHY-1 tới TYPOGRAPHY-4.
5. Nếu nó không nằm trong dàn ý, hỏi câu hỏi quyền sở hữu nằm trong phần của từng mã còn lại. Mã đầu tiên có tình huống khớp chính là đáp án.
6. Nếu hai mã liền kề cùng khớp, chọn mã giành ÍT quyền sở hữu hơn — phần tử ngang hàng trước chủ đạo, nội dung hỗ trợ trước phần nội dung, chữ giao diện trước văn bản đọc liên tục. Chỉ hỏi một câu phân định khi bên yêu cầu nói rõ họ cần quyền lớn hơn.
7. Một vùng trộn nhiều quyền sở hữu là chuyện bình thường. Một thẻ chứa tên đối tượng, một dòng bổ nghĩa và một dòng mô tả thì giải ra ba mã, chứ không phải một mã lấy trung bình. Một dòng, một quyền sở hữu.

TYPOGRAPHY-1 — tên gốc của trang

Tình huống. Dòng này trả lời câu “tôi đang ở đâu?”. Nó là gốc của dàn ý tài liệu và mỗi tuyến trang chỉ có một dòng như vậy.

Dấu hiệu nhận biết

• Nếu xoá dòng này, người dùng không còn biết trang đang nói về cái gì.
• Nó thường trùng hoặc gần trùng với đường dẫn phân cấp cuối, với thẻ tab tiêu đề, với tên tuyến trang.
• Mọi thứ khác trên trang đều nằm dưới nó về mặt dàn ý, kể cả những thứ trông to hơn.
• Trên một tuyến trang chi tiết, tên của chính đối tượng đó là tên trang.

Tự hỏi. Dòng này có phải là gốc dàn ý của tuyến trang hiện tại không?

Ranh giới

• TYPOGRAPHY-2: h2 gọi tên một phần của trang; h1 gọi tên cả trang. Nếu còn một dòng nào khác bao trùm nó thì nó không phải TYPOGRAPHY-1.
• TYPOGRAPHY-5: tiêu đề đối tượng không vào dàn ý. Cùng một chuỗi là TYPOGRAPHY-1 trên tuyến trang chi tiết của chính đối tượng đó, nhưng là TYPOGRAPHY-6 khi nằm trong danh sách ở tuyến trang chỉ mục. Tuyến trang quyết định, không phải chuỗi.

Tình huống nghiệp vụ hay gặp. Tên trang bảng điều khiển · tên trang báo cáo · tên khoá học trên tuyến trang chi tiết khoá học · tên hồ sơ trên tuyến trang hồ sơ công khai · tên đơn hàng trên tuyến trang đơn hàng · tên bài viết trên tuyến trang bài viết · tiêu đề trang cài đặt.

TYPOGRAPHY-2 — bậc dàn ý đầu tiên dưới trang

Tình huống. Một phần của trang có mục đích riêng, có nội dung riêng, và phải xuất hiện trong dàn ý để người dùng trình đọc màn hình nhảy tới được.

Dấu hiệu nhận biết

• Người ta gọi nó bằng tên khi nói chuyện: “phần đánh giá”, “phần hoạt động gần đây”.
• Nó có thể rỗng riêng, lỗi riêng, tải riêng.
• Nó là con trực tiếp của trang về mặt dàn ý, không phải con của một phần nội dung khác.

Tự hỏi. Phần này có phải một mục cấp một của trang mà người dùng cần nhảy thẳng tới không?

Ranh giới

• TYPOGRAPHY-1: xem trên.
• TYPOGRAPHY-3: h3 nằm bên trong một h2. Nếu không có h2 nào bao nó trong cùng cây thì nó chưa phải h3.
• TYPOGRAPHY-5: cùng công thức text-base nhưng khác độ đậm chữ và khác phần tử. h2 là font-semibold và vào dàn ý; tiêu đề đối tượng là font-medium và không vào dàn ý. Đây là cặp bị nhầm nhiều nhất ở nửa trên của thang.

Tình huống nghiệp vụ hay gặp. Tổng quan · Hoạt động gần đây · Nội dung khoá học · Đánh giá học viên · Thanh toán · Bảo mật · Thành viên nhóm · Tệp đính kèm · Câu hỏi thường gặp.

TYPOGRAPHY-3 — phần con cục bộ

Tình huống. Một nhóm nhỏ bên trong một phần nội dung, đủ độc lập để cần một cái tên, nhưng không đủ lớn để là một mục cấp một của trang.

Dấu hiệu nhận biết

• Luôn có một h2 ở trên nó trong cùng cây.
• Nó gom vài dòng lại thành một chủ đề nhỏ.
• Bỏ nó đi thì phần nội dung vẫn còn nội dung, chỉ mất một cái tên nhóm.

Tự hỏi. Nhóm này có nằm trong một phần nội dung đã được đặt tên, và tự nó có cần một cái tên không?

Ranh giới

• TYPOGRAPHY-2: đếm bậc, đừng đếm kích thước vùng. Một h3 trong một phần nội dung nhỏ vẫn là h3.
• TYPOGRAPHY-6: cùng text-sm nhưng khác độ đậm và khác phần tử. h3 là font-medium và vào dàn ý; tiêu đề ngang hàng là font-medium và không vào dàn ý. Nếu cái tên đó là tên của một đối tượng dữ liệu — một khoá học, một tệp, một người — thì nó là TYPOGRAPHY-6, không phải h3.

Tình huống nghiệp vụ hay gặp. Thông tin cá nhân / Thông tin liên hệ trong trang hồ sơ · Cấp độ / Chủ đề / Thời lượng trong một thanh bộ lọc · Địa chỉ giao hàng / Địa chỉ thanh toán trong một phần nội dung thanh toán · Điều kiện tiên quyết trong một phần nội dung giới thiệu.

TYPOGRAPHY-4 — bậc dàn ý cuối cùng

Tình huống. Bậc dàn ý thứ tư, và là bậc cuối. Ở độ sâu này cái tên đã gần như một cái nhãn: nó vẫn phải có mặt trong dàn ý, nhưng nó không được giành lấy sự chú ý của mắt nữa.

Dấu hiệu nhận biết

• Có đủ một chuỗi h1 → h2 → h3 ở trên nó.
• Nó đặt tên cho một tiêu chí, một mục con của mục con.
• Người dùng bàn phím vẫn cần nhảy tới nó.

Tự hỏi. Dòng này có thật sự cần nằm trong dàn ý không, hay nó chỉ là chữ bổ nghĩa?

Ranh giới

• TYPOGRAPHY-9: đây là ranh giới nguy hiểm nhất trong mô-đun. Cả hai đều text-xs và đều giảm nhấn. Khác nhau ở hai chỗ, và cả hai đều bắt buộc: TYPOGRAPHY-4 là font-medium và là một h4 thật trong dàn ý; TYPOGRAPHY-9 là font-normal và không phải phần tử tiêu đề. Nếu dòng đó không cần xuất hiện trong danh sách tiêu đề của trang thì nó không phải h4.
• Bậc thứ năm: không tồn tại. Cần độ sâu năm nghĩa là cấu trúc nội dung phải phẳng lại. Đây là yêu cầu duy nhất mà mô-đun trả lời bằng một câu hỏi thay vì một class CSS.

Tình huống nghiệp vụ hay gặp. Tên tiêu chí chấm điểm dưới một nhóm tiêu chí · tên bước nhỏ trong một quy trình đã có ba bậc · tên trường trong một nhóm trường lồng sâu · tên mục con của một điều khoản.

TYPOGRAPHY-5 — đối tượng trội duy nhất

Tình huống. Một vùng lớn tồn tại để nói về một đối tượng, và đối tượng đó có một cái tên ngắn. Cái tên ấy dẫn dắt cả vùng nhưng không vào dàn ý tài liệu, vì nó là dữ liệu chứ không phải cấu trúc.

Dấu hiệu nhận biết

• Trong vùng đó chỉ có một tiêu đề như vậy, không có cái thứ hai ngang hàng.
• Chuỗi ngắn, và ngắn một cách ổn định — không phải “hiện tại đang ngắn”.
• Mọi dòng còn lại trong vùng đều đang mô tả đối tượng này.

Tự hỏi. Vùng này có đúng một đối tượng, và tên nó có ngắn một cách ổn định không? Thiếu một trong hai dữ kiện là rơi xuống TYPOGRAPHY-6.

Ranh giới

• TYPOGRAPHY-2: tiêu đề đối tượng không vào dàn ý. Đừng biến nó thành h2 chỉ vì nó là dòng to nhất trong vùng.
• TYPOGRAPHY-6: cần cả hai dữ kiện duy-nhất và ngắn. Lặp lại, gọn, dài, hoặc dễ dài sau dịch → luôn là TYPOGRAPHY-6. Mặc định an toàn là TYPOGRAPHY-6.

Tình huống nghiệp vụ hay gặp. Tên khoá học trong một thẻ giới thiệu lớn · tên gói dịch vụ trong một khung so sánh một gói · tên tệp trong một khung xem trước · tên đối tượng trong một khung bên chi tiết · tên chiến dịch trong một khối tóm tắt.

TYPOGRAPHY-6 — tiêu đề của phần tử ngang hàng

Tình huống. Cái tên của một đối tượng nằm giữa nhiều đối tượng cùng loại, hoặc một cái tên có thể dài ra. Nhịp quét mắt phải đều nhau giữa các dòng, nên không dòng nào được to hơn dòng nào.

Dấu hiệu nhận biết

• Nó đến từ một vòng lặp, hoặc sẽ đến từ một vòng lặp trong tương lai gần.
• Có thể dài, có thể xuống dòng, có thể dài thêm sau khi dịch.
• Vùng chứa nó là một danh sách, một lưới, một bảng.

Tự hỏi. Cái tên này có phải một trong nhiều cái tên ngang hàng, hoặc có rủi ro dài ra không?

Ranh giới

• TYPOGRAPHY-5: xem trên. Bố cục rộng ra không thăng cấp phần tử ngang hàng thành chủ đạo.
• TYPOGRAPHY-3: tiêu đề ngang hàng gọi tên một đối tượng dữ liệu; h3 gọi tên một mục cấu trúc. Cùng text-sm font-medium nhưng khác phần tử và khác dàn ý.
• TYPOGRAPHY-7: tiêu đề gọi tên (font-medium), văn bản phát biểu (font-normal). Nếu dòng đó là một câu thì nó không phải tiêu đề.

Tình huống nghiệp vụ hay gặp. Tiêu đề của từng bài trong danh sách bài học · tên tệp trong danh sách tệp · tiêu đề bài viết trong luồng tin · tên thành viên trong danh sách thành viên · tên mô-đun trong lưới mô-đun · tiêu đề thông báo trong danh sách thông báo · tên đơn hàng trong lịch sử đơn hàng.

TYPOGRAPHY-7 — chữ giao diện thường

Tình huống. Một dòng phát biểu một dữ kiện: mô tả ngắn, siêu dữ liệu, một giá trị, một trạng thái bằng chữ. Người dùng quét nó chứ không đọc nó.

Dấu hiệu nhận biết

• Đứng một mình nó vẫn có nghĩa — nó không cần một dòng khác ở trên để tồn tại.
• Nó là dữ liệu hoặc mô tả dữ liệu, không phải tên của dữ liệu.
• Người dùng liếc qua và lấy thông tin, không dừng lại đọc từng câu.

Tự hỏi. Dòng này có tự đứng được như một dữ kiện, và công việc của người đọc là quét chứ không phải đọc liên tục, đúng không?

Ranh giới

• TYPOGRAPHY-6: xem trên.
• TYPOGRAPHY-8: khác nhau ở công việc của người đọc, không ở độ dài. Ba câu trong một thẻ để liếc vẫn là TYPOGRAPHY-7; một đoạn trong bài viết để đọc là TYPOGRAPHY-8.
• TYPOGRAPHY-9: TYPOGRAPHY-9 mất nghĩa khi tách khỏi dòng nó bổ nghĩa; TYPOGRAPHY-7 thì không. Đây là phép thử duy nhất cần dùng.

Tình huống nghiệp vụ hay gặp. Mô tả ngắn của một phần tử · 28/42 bài đã xong trong một tóm tắt · địa chỉ thư điện tử trong một dòng thông tin · trạng thái bằng chữ trong một dòng chi tiết · số lượng trong một dòng tóm tắt giỏ hàng · tên người tạo trong một dòng siêu dữ liệu có nghĩa độc lập.

TYPOGRAPHY-8 — văn bản để đọc liên tục

Tình huống. Nhiều câu, nhiều đoạn, và công việc của người dùng là đọc từ đầu đến cuối. Chữ lớn hơn và dòng thưa hơn không phải vì đoạn văn quan trọng hơn, mà vì mắt phải chạy hết từng dòng.

Dấu hiệu nhận biết

• Có từ vài đoạn trở lên, hoặc là nội dung bài viết / tài liệu / giải thích dài.
• Người dùng dừng lại ở đây, không lướt qua.
• Xoá một đoạn thì mất nghĩa, không phải mất một dữ kiện rời.

Tự hỏi. Người đọc có phải đọc liên tục qua nhiều câu để hiểu không?

Ranh giới

• TYPOGRAPHY-7: xem trên. Độ dài không phải tiêu chí — công việc đọc mới là tiêu chí.
• TYPOGRAPHY-5: cùng text-base nhưng khác độ đậm. font-medium là tên, font-normal là nội dung. Một đoạn văn không bao giờ được font-medium để “nhấn mạnh”.

Tình huống nghiệp vụ hay gặp. Thân bài viết · nội dung bài học dạng chữ · phần giải thích khái niệm nhiều đoạn · điều khoản dịch vụ · changelog viết thành văn · phần mô tả dài của một khoá học.

TYPOGRAPHY-9 — chữ chỉ bổ nghĩa

Tình huống. Dòng này chỉ tồn tại nhờ một dòng khác hoặc một bề mặt khác. Tách nó ra khỏi dòng chính thì nó không còn nói được gì.

Dấu hiệu nhận biết

• Luôn có một dòng chính ở ngay trên hoặc ngay cạnh.
• Đọc riêng nó thì câu hỏi “cái gì?” không có câu trả lời.
• Nó là thời điểm, đơn vị, tên định danh, nguồn gốc, chú thích, đếm phụ.

Tự hỏi. Nếu xoá dòng ở trên, dòng này còn nói được gì không? Nếu không — TYPOGRAPHY-9.

Ranh giới

• TYPOGRAPHY-7: xem trên.
• TYPOGRAPHY-4: cùng text-xs và cùng giảm nhấn. Khác ở độ đậm và ở phần tử: h4 là font-medium và nằm trong dàn ý; nội dung hỗ trợ là font-normal và không phải tiêu đề.
• TYPOGRAPHY-10: nội dung hỗ trợ gắn vào một dòng; dấu phân chia chia một luồng và không thuộc về dòng nào.

Cặp không tách rời. text-xs và text-muted-foreground đi cùng nhau. Không có nội dung hỗ trợ màu tiền cảnh, và không có text-xs không giảm nhấn — trừ đúng TYPOGRAPHY-4.

Tình huống nghiệp vụ hay gặp. Cập nhật 12 phút trước dưới một tiêu đề · tên định danh dưới tên hiển thị · đơn vị dưới một con số · PDF · 2,4 MB dưới tên tệp · Bao gồm VAT dưới giá · nguồn của một trích dẫn · chú thích dưới một biểu đồ · dòng gợi ý dưới một trường nhập liệu.

TYPOGRAPHY-10 — dấu chia luồng kết quả

Tình huống. Một luồng kết quả liên tục cần mốc để quét — Hôm nay, Hôm qua, Tháng 8 — nhưng những mốc đó không tạo thêm phần nội dung trong tài liệu. Chúng chia thời gian, không chia cấu trúc.

Dấu hiệu nhận biết

• Sinh ra từ dữ liệu, không từ thiết kế trang: có bao nhiêu ngày thì có bấy nhiêu dấu.
• Không có mục lục nào nên liệt kê chúng.
• Bỏ hết dấu đi thì danh sách vẫn đúng, chỉ khó quét hơn.

Tự hỏi. Dấu này có tạo thêm một mục trong dàn ý tài liệu không? Nếu không — TYPOGRAPHY-10.

Ranh giới

• TYPOGRAPHY-2 / TYPOGRAPHY-3: đây là chỗ hay sai nhất. Dấu trông như tiêu đề nên bị viết thành h3, và dàn ý của trang lập tức đầy những Hôm qua, Tháng 7. Dấu không bao giờ là phần tử tiêu đề.
• TYPOGRAPHY-9: xem trên.

Tình huống nghiệp vụ hay gặp. Hôm nay / Hôm qua trong luồng tin hoạt động · nhóm theo tháng trong lịch sử giao dịch · chữ cái đầu trong danh bạ đã sắp xếp · Tuần này trong danh sách nhiệm vụ · nhãn nhóm trong một danh sách kết quả tìm kiếm đã gom.

TYPOGRAPHY-11 — chữ mà thành phần điều khiển đã sở hữu

Tình huống. Chuỗi nằm bên trong một thành phần điều khiển: nhãn nút, chữ trong nhãn nhỏ trạng thái, chữ của liên kết, văn bản gợi ý của trường nhập liệu, chữ trong nhãn trạng thái. Thành phần điều khiển đó đã quyết định kiểu chữ của chính nó rồi.

Dấu hiệu nhận biết

• Chuỗi nằm trong button, a, input, hoặc một phần tử có vai trò điều khiển / trạng thái.
• Đổi chữ đó thì hành vi đổi, không chỉ nội dung đổi.
• Cùng một thành phần điều khiển đó xuất hiện ở nhiều nơi khác và phải trông giống hệt nhau.

Tự hỏi. Chuỗi này có nằm bên trong một thành phần điều khiển đã tự đặt kiểu chữ của nó không?

Ranh giới

• Mọi mã khác: TYPOGRAPHY-11 thắng tất cả. Kể cả khi chuỗi đọc y hệt chữ TYPOGRAPHY-7, ở trong thành phần điều khiển là ở trong thành phần điều khiển.
• TYPOGRAPHY-9: một dòng gợi ý nằm bên ngoài trường nhập liệu là TYPOGRAPHY-9. Văn bản gợi ý nằm bên trong trường nhập liệu là TYPOGRAPHY-11.

Không khai báo class CSS chữ. Đây là mã không phát ra công thức nào. Viết đè một cỡ chữ lên nhãn nút là giành một quyền sở hữu mà nơi gọi không có, và cái sai đó tàng hình cho tới ngày thành phần điều khiển đổi rồi một nơi sử dụng lệch khỏi tất cả các nơi sử dụng còn lại.

Tình huống nghiệp vụ hay gặp. Nhãn nút · chữ trong nhãn nhỏ trạng thái · chữ trong nhãn trạng thái đếm · nhãn thẻ tab · văn bản gợi ý · chữ của liên kết điều hướng · nhãn của nút chuyển · chữ trong mục trong trình đơn.

TYPOGRAPHY-12 — chưa nêu chủ sở hữu

Tình huống. Yêu cầu thật sự không nêu cấp độ dàn ý và không nêu chủ sở hữu nội dung, và cũng không có ngữ nghĩa tiêu đề hay nội dung hỗ trợ nào suy ra được. Cần một câu trả lời đọc được thay vì một lời từ chối.

Dấu hiệu nhận biết

• Yêu cầu chỉ nói về hình thức: “cho nó nổi hơn”, “chỗ này to lên chút”.
• Không xác định được dòng này thuộc về ai, và cũng không có dòng nào quanh nó để so.

Tự hỏi. Đã thật sự không suy ra được chủ sở hữu, hay chỉ là chưa chịu hỏi?

Ranh giới

• Mọi mã khác: TYPOGRAPHY-12 là sàn, không phải lối thoát. Nếu yêu cầu có nêu chủ sở hữu ở đâu đó thì dùng mã đúng, đừng rơi xuống đây cho nhanh.

Không tự thăng cấp bằng con số. Một giá trị số không tự trở thành dòng dẫn dắt chỉ vì nó là số. Muốn nó dẫn dắt thì phải có một quyết định nội dung nói rằng nó dẫn dắt.

Tình huống nghiệp vụ hay gặp. Yêu cầu “làm 4,9/5 nổi hơn” mà không nói vùng đó dẫn bằng gì · một dòng chữ dán vào mà chưa gắn với cấu trúc nào · nội dung tạm trong lúc chờ quyết định nội dung.

Đầu vào

outline và owner là bắt buộc. relationship, repetition và rủi ro độ dài là bắt buộc bất cứ khi nào chính chúng là thứ phân định hai mã liền kề.

Quy tắc

1. Cấp độ dàn ý quyết định cả phần tử ngữ nghĩa lẫn cấp bậc hiển thị. Một h2 mang dáng phần thân, hay một div mang dáng tiêu đề, đều là vi phạm ở cả hai chiều.
2. Chỉ có bốn bậc tiêu đề. Cần bậc năm thì phẳng lại cấu trúc nội dung.
3. Một vùng có giới hạn chỉ có một dòng chữ dẫn dắt.
4. TYPOGRAPHY-5 cần đủ hai dữ kiện: đối tượng duy nhất và tiêu đề ngắn ổn định. Thiếu một là rơi xuống TYPOGRAPHY-6.
5. Tiêu đề lặp lại, gọn, dài hoặc có thể bản địa hoá luôn dùng công thức cho phần tử ngang hàng.
6. text-xs luôn là nội dung hỗ trợ và luôn giảm nhấn — trừ đúng TYPOGRAPHY-4, vốn là font-medium và là một tiêu đề thật trong dàn ý.
7. Con số, rê chuột, độ dài nhãn, khoảng trống còn lại và điểm ngắt không tạo cấp bậc.
8. Đang tải, rỗng, lỗi, dịch, thiết bị di động và chủ đề không đổi mã đã tính.
9. Không dùng đường viền, màu nền hay nhãn trạng thái để làm chữ quan trọng hơn. Những thứ đó nói về bề mặt, không nói về cấp bậc.
10. Chữ do thành phần điều khiển sở hữu không nhận kiểu chữ ghi đè từ bên ngoài.
11. Không ráp một công thức cỡ chữ / độ đậm / sắc thái không có trong bảng. Vốn từ là đóng.
12. Nếu còn hai mã liền kề cùng hợp lý, chọn mã giành ít quyền sở hữu hơn: phần tử ngang hàng trước chủ đạo, nội dung hỗ trợ trước phần nội dung, chữ giao diện trước văn bản đọc liên tục. Chỉ hỏi khi yêu cầu bắt buộc quyền lớn hơn.

Ngoài ra: một mã tình huống ứng với đúng một công thức, không công thức nào phục vụ hai mã, và mọi dòng chữ hiển thị ra đều rơi vào đúng một mã. Không dòng chữ nào nằm ngoài phạm vi.

Ngoại lệ

Ngoại lệ là một phần của luật, không phải chỗ để lách. Mỗi ngoại lệ dưới đây đều đóng và nêu rõ mã nó áp dụng vào.

• Chữ do thành phần điều khiển sở hữu. TYPOGRAPHY-11 thắng mọi mã khác. Nếu chuỗi nằm trong một nút, một nhãn nhỏ trạng thái, một liên kết, một trường nhập liệu hay một thành phần trạng thái thì công thức của thành phần điều khiển được giữ và không phát ra class chữ tự do nào, kể cả khi chuỗi đọc y hệt chữ TYPOGRAPHY-7.
• Tên trang cũng là tên đối tượng. Trên tuyến trang chi tiết, tên đối tượng là tên trang và nhận TYPOGRAPHY-1. Cùng chuỗi đó nằm trong danh sách ở tuyến trang chỉ mục là TYPOGRAPHY-6. Tuyến trang quyết định, không phải chuỗi.
• Xin cấp tiêu đề thứ năm. Không phát ra gì cả. Hỏi tác giả phẳng lại dàn ý. Đây là yêu cầu duy nhất mô-đun trả lời bằng một câu hỏi thay vì một class.
• Giá trị số chưa có chủ sở hữu. Số không tự thăng cấp. Phát ra TYPOGRAPHY-12, và chỉ hỏi dòng nào đang dẫn dắt vùng này khi bên yêu cầu thật sự muốn thăng cấp nó.
• Tính đồng nhất trạng thái. Khung chờ, rỗng và lỗi của cùng một nội dung giữ nguyên mã. Khung chờ đổi cấp bậc là nói dối về quyền sở hữu trong lúc chờ.
• Văn bản dài chưa có chính sách truy cập đầy đủ. Cắt bớt hay xuống dòng không phải quyết định kiểu chữ. Giữ nguyên mã đã tính và hỏi giá trị đầy đủ có buộc phải với tới được không.
• Hai mã liền kề cùng khớp. Chọn mã giành ít quyền sở hữu hơn: phần tử ngang hàng trước chủ đạo, nội dung hỗ trợ trước phần nội dung, chữ giao diện trước văn bản đọc liên tục. Chỉ hỏi một câu phân định khi bên yêu cầu nói rõ họ cần quyền lớn hơn.

Đầu ra

Mỗi dòng chữ một khối, từ ngoài vào trong:

line: <dòng chữ đang được phân loại>
outline: <none | 1 | 2 | 3 | 4>
owner: <page | section | dominant-object | repeated-peer | ui-copy | reading-prose | control | partition>
relationship: <independent | qualifies-primary | partitions-results>
situation: <TYPOGRAPHY-1 … TYPOGRAPHY-12>
element: <h1 | h2 | h3 | h4 | div | p | none — the control's own>
className: <đúng công thức đóng, hoặc none>
reason: <sự thật nghiệp vụ loại trừ mã liền kề>

Ví dụ đã giải

Yêu cầu. “Trang chi tiết của khoá System Design Mastery, có phần Nội dung khoá học liệt kê các mô-đun; mỗi mô-đun hiện tiêu đề, một dòng ghi số bài và thời lượng, và một nút Tiếp tục.”

Yêu cầu này nói ra năm loại dòng: tên trang, tên phần nội dung, tiêu đề từng mô-đun, dòng đếm số bài dưới tiêu đề, và nhãn nút. Nó không nói tới văn bản đọc liên tục, không nói tới dấu chia theo ngày, không nói tới bậc dàn ý thứ tư, nên không giải những thứ đó.

line: System Design Mastery
outline: 1
owner: page
relationship: independent
situation: TYPOGRAPHY-1
element: h1
className: text-xl font-semibold tracking-tight
reason: đây là tuyến trang chi tiết của chính đối tượng đó nên không còn cái tên nào bao trùm nó, điều này loại trừ TYPOGRAPHY-6

line: Nội dung khoá học
outline: 2
owner: section
relationship: independent
situation: TYPOGRAPHY-2
element: h2
className: text-base font-semibold
reason: thiết kế trang sinh ra phần này và người dùng phải nhảy thẳng tới được, điều này loại trừ TYPOGRAPHY-10

line: <tiêu đề mô-đun>
outline: none
owner: repeated-peer
relationship: independent
situation: TYPOGRAPHY-6
element: div
className: text-sm font-medium text-foreground
reason: tiêu đề đến từ một hàng trong nhiều hàng và có thể dài ra sau khi dịch, điều này loại trừ TYPOGRAPHY-5

line: <số bài · thời lượng>
outline: none
owner: ui-copy
relationship: qualifies-primary
situation: TYPOGRAPHY-9
element: p
className: text-xs leading-4 font-normal text-muted-foreground
reason: tách khỏi tiêu đề mô-đun thì dòng này không trả lời được gì, điều này loại trừ TYPOGRAPHY-7

line: Tiếp tục
outline: none
owner: control
relationship: independent
situation: TYPOGRAPHY-11
element: none — the control's own
className: none
reason: chuỗi nằm trong nút và thành phần điều khiển đã tự quyết kiểu chữ, điều này loại trừ TYPOGRAPHY-7

Khi yêu cầu bổ sung một phần mô tả dài nhiều đoạn để đọc từ đầu đến cuối, thân mô tả đó là TYPOGRAPHY-8. Khi nó thêm mốc Tháng này phía trên một luồng đánh giá đã gom nhóm, mốc đó là TYPOGRAPHY-10. Nếu nó chỉ nói rằng điểm đánh giá cần “nổi hơn” mà không nói vùng đó dẫn bằng gì, đáp án là TYPOGRAPHY-12.

Phạm vi

Mô-đun này phát biểu một luật đúng với mọi front end. Nó không gọi tên sản phẩm nào, thư viện thành phần nào, khoá registry nào hay repository nào. Mọi ví dụ đều là mã đánh dấu thường với className thường. Chỗ nào công thức dùng text-foreground hoặc text-muted-foreground thì đó là hai tông nội dung mà mọi chủ đề đều phải định nghĩa; giao diện nào viết chúng thành bậc bảng màu cụ thể thì thay đúng hai cái tên, luật không đổi.