- Justif là một bản demo web so sánh trực tiếp giữa cách trình duyệt render mặc định và căn đều văn bản ở mức chất lượng xuất bản
- Có thể bật/tắt riêng xử lý gạch nối và nhô ký tự, mở rộng chiều rộng, điều chỉnh giãn cách chữ và căn khoảng cách dòng cuối
- Có thể điều chỉnh chiều rộng tối thiểu của dòng cuối và phạm vi treo dấu câu, đồng thời so sánh với kết quả áp dụng
text-wrap: pretty - Có thể thử nghiệm không chỉ tài liệu văn học và kỹ thuật tiếng Anh mà cả văn bản RTL tiếng Hebrew, tiếng Ả Rập và tiếng Nhật với các kiểu chữ serif, sans, monospace
- Đo song song với render của trình duyệt các chỉ số như số dòng, ngắt dòng bằng gạch nối, dòng tràn, dòng cuối quá ngắn, độ lệch khoảng trắng và các “dòng sông” (rivers)
Căn đều và thiết lập chi tiết
- Justif được xây dựng để thử nghiệm căn đều Knuth-Plass và nhiều tính năng microtypography trên web
- Xử lý gạch nối
- Nhô ký tự
- Mở rộng chiều rộng
- Điều chỉnh giãn cách chữ
- Căn khoảng cách dòng cuối
- Treo dấu câu chỉ có thể dùng khi bật nhô ký tự, và có thể áp dụng ở cuối dòng, đầu dòng đầu tiên hoặc trên toàn phạm vi
- Chiều rộng tối thiểu của dòng cuối có thể điều chỉnh là
0.33, còn chiều rộng phần nội dung là13em
So sánh và đo lường văn bản·kiểu chữ
- Có thể chọn văn bản để so sánh từ Alice in Wonderland, Frog Prince, Frankenstein, Ulysses, bài viết kỹ thuật, RFC 2324 và mẫu kiểu chữ
- Cũng cung cấp văn bản RTL tiếng Hebrew, tiếng Ả Rập và văn bản tiếng Nhật
- Các kiểu chữ được hỗ trợ bao gồm Junicode, EB Garamond, Alegreya, IM Fell English, Vollkorn, Amstelvar, Latin Modern, Georgia, Roboto Flex, Courier Prime, IBM Plex Mono và phông chữ hệ thống
- Khi nhấp hoặc nhấn giữ vào kết quả, render mặc định của trình duyệt sẽ hiện ra để có thể so sánh với render của Justif
- Công cụ so sánh hỗ trợ
text-wrap: pretty, làm mờ, thước đo lề và hiển thị khoảng trắng không đều - Các chỉ số đo gồm số dòng, ngắt dòng bằng gạch nối, dòng tràn, dòng cuối quá ngắn, rivers, cùng với khoảng trắng trung bình, độ lệch trung bình so với khoảng trắng tự nhiên, độ lệch chuẩn và khoảng trắng rộng nhất
1 bình luận
Ý kiến trên Lobste.rs
Dự án này được vibe coding bằng Fable https://news.ycombinator.com/item?id=48946738#49002419
Tôi không muốn đọc các bài chia sẻ trải nghiệm dùng LLM nên muốn lọc chúng ra, nhưng có vẻ chỉ cần có nghi ngờ là đã dùng công cụ hỗ trợ lập trình thì thẻ này sẽ được gắn vào bất kể nội dung bài viết
Lần này thì việc sử dụng là rõ ràng, nhưng tôi cũng từng thấy có trường hợp bài về dự án bị gắn thẻ chỉ vì họ chấp nhận người đóng góp dùng công cụ hỗ trợ lập trình
Tuy vậy, thuật ngữ vibe coding và thẻ dùng ở đây đã mất đi tính hữu ích, và cần có cách diễn đạt chính xác, hiệu quả hơn để phân biệt giữa các bài viết nói về việc dùng LLM và các sản phẩm chỉ tình cờ được tạo ra với sự hỗ trợ của LLM trong quá trình làm ra chúng
Tôm hùm 2: “Ừm... nhưng họ đã dùng AlphaFold và CRISPR, và... hồi hộp nào... Fable”
Tôm hùm 1: “Trời đất, không thể chấp nhận được! Hãy vứt bỏ tất cả vì nhân loại và quay lại vẽ protein bằng bút chì màu trên bảng trong 40 năm!”
Kết quả trông rất đẹp, thậm chí còn tốt hơn TeX không dùng gói
microtypeNhững tính năng dàn chữ như thế này nên do trình duyệt tự xử lý
Một số trình duyệt đã triển khai
text-wrap: pretty, nhưng có vẻ chỉ giới hạn trong vài dòngprettykhá tốt, nhưng có lỗi khi dùng cùngjustifyhttps://matklad.github.io/2026/02/14/justifying-text-wrap-pretty.html
text-wrap: prettythì đây là một gợi ý thuần túy, không có hành vi được định nghĩa chặt chẽChỉ nói rằng user agent nên ưu tiên bố cục đẹp hơn tốc độ và nên cân nhắc nhiều dòng khi quyết định ngắt dòng; ngoài ra thì giống
autoNó có thể tránh dòng cuối quá ngắn, khoảng trắng trông như dòng sông giữa các hàng chữ, hay các dấu gạch nối liên tiếp, nhưng cách cải thiện cụ thể thì tùy từng trình duyệt
Tôi nhớ nó được đưa vào đặc tả để tránh ràng buộc quá mức khi nhiều trình duyệt muốn triển khai theo những cách khác nhau
Hoàn cảnh này hơi giống việc Web SQL bị loại bỏ vì lộ ra rằng các triển khai rốt cuộc sẽ dùng SQLite
Tôi hy vọng một ngày nào đó các tính năng này sẽ mặc định được áp dụng trong
text-wrap: autođểtext-wrap: prettykhông còn tạo ra hiệu ứng gì nữa, và cũng mong https://bugzilla.mozilla.org/show_bug.cgi?id=630181 được triển khaiNhững kiểu gợi ý này không phải mới;
will-changecũng từng là gợi ý tối ưu hóa cho các trình duyệt thế hệ trướcĐến lúc được đặc tả, Firefox hầu như không còn cần tới nó và với một số engine thế hệ mới thì nó còn chẳng giúp ích gì, vậy mà lại bị lạm dụng rất nhiều; có lẽ thà giữ
transformZ(0)như một mẹo rõ ràng còn hơnBạn có thể bật tắt
text-wrap: prettytrong bản demo để thử cách các trình duyệt xử lý, và tôi khuyên nên xem trên nhiều trình duyệt vì cách Blink·WebKit·Gecko xử lý khác nhau đến ngạc nhiênTôi từ lâu đã nghĩ rằng treo dấu câu thường bị áp dụng quá tay
Nếu nó dễ nhận ra thì tức là đã quá đà, và đặc biệt là
“gần như lúc nào cũng nổi bật, nên đáng ra phải nhô ra ít hơn cả một nửa so với hiện tạiNgược lại, tôi lại thích việc
“ở đầu đoạn hoạt động như một kiểu thụt đầu dòng nhỏKết quả khi tắt treo dấu câu và chỉ bật phần nhô ra tinh tế hơn thì vẫn chấp nhận được, nhưng phần lớn thời gian tôi thích tắt cả hai hơn
Kiểu xử lý này phụ thuộc rất nhiều vào phông chữ
Với phông serif Equity mà tôi dùng, nếu áp dụng cho “f,” ở cuối dòng thì do kerning, dấu phẩy đã nằm dưới chữ f nên nó còn nhô ra ngoài lề tới cả phần trên của chữ f, trông rất kỳ
Nếu phông serif để phần đuôi hoặc nét thò ra ngoài độ rộng ký tự để chúng tự nhiên nhô ra, thì có lẽ đó còn là đối tượng phù hợp hơn đa số dấu câu
Với điều chỉnh khoảng cách chữ,
letter-spacingkhá nguy hiểm vì không hợp với ligatureNếu ligature được áp dụng trước thì sẽ thành “T h i s i s fi n e!”, còn nếu
letter-spacingkhác 0 làm tắt ligature thì chữ f sẽ va vào dấu chấm của iThường thì trường hợp sau sẽ xảy ra, nhưng còn tùy hệ chữ viết, phông chữ và các tính năng OpenType được bật rõ ràng, nên cũng rất dễ phát sinh ngoài ý muốn
Tôi đồng ý rằng điều chỉnh khoảng cách chữ trở nên rắc rối vì ligature, nhưng với giới hạn mặc định là ±3% thì tôi thấy nhìn vẫn ổn
Bạn có thể xem chỗ các ligature fl, fi, ffi xuất hiện liên tiếp ở cuối đoạn đầu của ví dụ “Type Specimen”, và giới hạn 3% cũng có thể cấu hình được
Tiếng Thụy Điển dùng dấu ngoặc kép phải cho cả đầu và cuối trích dẫn
Từ lâu tôi đã tự hỏi liệu có cách nào để báo cho trình duyệt biết ngôn ngữ hay locale của một đoạn văn bản cụ thể để nó tự xử lý dấu ngoặc kép, dấu thập phân, v.v. hay không
Tôi muốn chỉ ra rằng ví dụ đã dùng độ rộng dòng hẹp một cách nhân tạo để nhấn mạnh mức cải thiện
Nói chung người ta thường khuyến nghị một dòng nên rộng khoảng hai bộ chữ cái Latin viết thường, tức khoảng 60 ký tự
Sự khác biệt sẽ bớt kịch tính hơn nhiều, nhưng vẫn rõ ràng, và ngay cả ở độ rộng dòng 36em thì các chỉ số vẫn tốt hơn mặc định rất nhiều
Tôi tự hỏi liệu thẻ vibe coding có được gắn chỉ vì tác giả đã nói ở nơi khác rằng mình dùng LLM hay không
Nội dung trong liên kết không liên quan gì đến LLM hay vibe coding, nên giờ thẻ này bắt đầu cho cảm giác như một cuộc săn phù thủy
Điều đó xung đột với công dụng hiển nhiên hơn của nó, dễ gây nhầm lẫn và có thể trông quá công kích
Một thẻ có hai mục đích không phải lý tưởng, nhưng nhìn chung tôi ủng hộ cảnh báo nội dung gây khó chịu và khả năng tự do lọc bỏ những thứ mình không muốn xem
Dù là một thẻ gây nhầm lẫn, ít nhất nó cũng không làm tác giả bị bất lợi