readable.css

 (readable-css.freedomtowrite.org)
2 điểm bởi GN⁺ 8 giờ trước | 1 bình luận | Chia sẻ qua WhatsApp
  • readable.css không phải là một design system cho toàn bộ website, mà là một framework CSS bổ sung các kiểu mặc định hợp lý và dễ nhìn cho HTML ngữ nghĩa
  • Nguyên tắc cốt lõi là tính nhất quán; màu sắc, kiểu chữ, độ dày đường viền và chiều cao dòng được áp dụng đồng bộ trên toàn bộ website
  • Cung cấp chế độ sáng/tối, thiết kế responsive, nhịp dọc, cùng các kiểu cho header, footer, điều hướng, bảng, nút và biểu mẫu
  • Không bao gồm hoạt ảnh cầu kỳ, phông chữ tùy chỉnh, utility class, hay các thành phần ghi đè cài đặt trình duyệt của người dùng
  • Dựa trên HTML ngữ nghĩa để diễn giải ý đồ, hỗ trợ Firefox 84+, Chromium 88+, Edge 88+, Safari 10+ và không hỗ trợ IE

Tính năng chính và phạm vi thiết kế

  • readable.css không phải là framework để xây dựng design system cho toàn bộ website, mà là framework CSS giúp HTML cơ bản trở nên hợp lý và dễ nhìn
  • Hỗ trợ chế độ sáng/tối theo cách thủ công hoặc qua prefers-color-scheme, đồng thời cung cấp thiết kế responsive và nhịp dọc
  • Tạo kiểu cho header, footer, thanh điều hướng, hình ảnh, trích dẫn, aside, bảng, nút và biểu mẫu
  • Căn đều hai lề văn bản bị tắt theo mặc định, và hỗ trợ các phông chữ native như serif, sans-serif, monospace
  • Cố ý loại trừ hoạt ảnh cầu kỳ, phông chữ tùy chỉnh, utility class và các thành phần ghi đè cài đặt trình duyệt của người dùng

Cách dùng và phạm vi hỗ trợ

  • Có thể tải tệp CSS mới nhất từ trang phát hành rồi thêm vào website 
    <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
  • readable.css diễn giải ý đồ của website dựa trên cách sử dụng HTML ngữ nghĩa, vì vậy để tận dụng đúng stylesheet này cần viết HTML ngữ nghĩa một cách chính xác
  • Có thể xem hướng dẫn sử dụng và cách viết HTML phù hợp với readable.css trong wiki
  • Hỗ trợ Firefox 84+, Chromium 88+, Edge 88+, Safari 10+ và không hỗ trợ IE
  • Yếu tố giới hạn ở Chromium, Firefox và Edge là hỗ trợ :not() và :is(), còn ở Safari là hỗ trợ biến CSS
  • Mã nguồn có trên Codeberg, tài liệu có tại Docs
  • readable.css và mã website được cấp phép theo 0BSD, có thể dùng cho bất kỳ mục đích nào mà không cần ghi công bắt buộc
  • Freedom to Write là một phong trào xây dựng và hỗ trợ các giải pháp phần mềm tự do, mã nguồn mở cho ngành viết lách

Bài viết liên quan

1 bình luận

 
GN⁺ 8 giờ trước
Ý kiến trên Lobste.rs

  • Tôi thích việc nó không đụng vào font-size mặc định. Người dùng có thể và nên đặt kích thước ưa thích trong user agent như trình duyệt, và website phải tôn trọng thiết lập đó
    Tôi ghét kiểu cố định 12px vì quá nhỏ, và cũng không muốn chữ bỗng dưng to ra trên viewport rộng khi tôi đã chỉnh sẵn ở mức dễ đọc. Chuyện này quá phổ biến và gây hại lớn cho khả năng truy cập

    • Ngay cả khi đề xuất tuân theo các tiêu chuẩn như Accept-Language trong dự án công việc, tôi vẫn thường bị bác với lý lẽ rằng người dùng không biết cấu hình ứng dụng cho đúng nên chúng ta phải làm thay họ
      Chắc với cỡ chữ cũng sẽ nghe lập luận tương tự

  • Tôi luôn tìm các framework như PicoCSS hay MVP, và cái này gây chú ý vì có vẻ được làm ra để dùng như điểm khởi đầu
    Nó trông như một nền tảng tốt để xây tiếp lên, nhưng tôi cũng muốn nghe ý kiến từ những người rành thiết kế hơn

  • Cách đổi biến CSS bằng html[data-font-family="serif"] không hữu ích lắm. Thà cứ để dùng <html style="font-family:serif"> thì ở cả template lẫn script phía client đều gần như dễ như nhau, mà còn ngắn hơn và ít phức tạp hơn
    Cách hiện tại có thể khiến người ta lầm tưởng rằng có thể viết kiểu <html data-font-family="some-webfont, serif">, nhưng thực tế lại không hoạt động. Dùng monospace làm phông chữ cho toàn bộ tài liệu cũng là một lựa chọn phong cách không hợp với tính dễ đọc, và cũng không hợp với cái tên “readable.css”. Dù vậy, tôi thích sự tiết chế khi chỉ giới hạn trong một họ phông chữ generic đơn lẻ
    --line-width và --line-height cũng là các tên dễ gây nhầm. Một “line” là đường kẻ giữa các phần tử, còn cái kia là dòng văn bản
    Phần theme màu thì mớ kết hợp giữa (prefers-color-scheme) và (prefers-contrast), [data-theme], [data-high-contrast] đang bị rối, và một số giá trị cùng tương tác của chúng chưa được tài liệu hóa. Tổ hợp @media (prefers-contrast: more) and (prefers-color-scheme: dark) rõ ràng bị hỏng khi không có override <html data-*>, vì nó cho #fff nền với #000 chữ. Cũng cần khai báo color-scheme: dark và color-scheme: light
    Đến a { color: inherit; } là tôi hết muốn xem tiếp. Chưa cần bàn đến tuyên bố về vertical rhythm, chỉ riêng việc cho màu liên kết kế thừa và còn bỏ gạch chân trong điều hướng là đã khiến nhiều người dùng không nhận ra có link ở đó. Link nên để màu xanh hoặc ít nhất là màu nhấn có độ bão hòa, và phải giữ gạch chân. Vì tên là readable.css nên càng thất vọng hơn

    • Tính dễ đọc là lĩnh vực đã được nghiên cứu hàng chục năm và được hiểu khá rõ, nhưng ngạc nhiên là vẫn có nhiều người không biết. Những thứ hay bị xử lý sai nhất là độ dài dòng và chọn phông chữ, ngoài ra còn có cỡ chữ, giãn dòng, độ tương phản và nhiều yếu tố khác
      Độ dài dòng có một khoảng tối thiểu và tối đa để đa số mọi người đọc thoải mái, khoảng 50–70 ký tự mỗi dòng. Chuỗi thảo luận Stack Exchange này có vài câu trả lời khá tốt, và vì nó cũng gần với khả năng truy cập nên W3C WCAG trong mục visual presentation cũng nói “chiều rộng không quá 80 ký tự hoặc glyph (với CJK là không quá 40)”
      Về phông chữ, nhìn chung sans-serif là dễ đọc nhất trên phạm vi màn hình rộng nhất, còn trên các màn hình hiện đại độ phân giải cao thì serif cũng thường được đánh giá gần tương đương. Phông chữ monospace làm giảm tính dễ đọc với đa số người dùng, nên hiếm khi là lựa chọn tốt cho nội dung chính. Ngoại lệ có thể là người quen dùng terminal hoặc trình soạn thảo mã, hoặc đôi khi là người dùng mắc chứng khó đọc thấy monospace dễ đọc hơn. Nếu còn phân vân thì tuy không thú vị nhưng Arial là lựa chọn an toàn nhất, và có thể xem chuỗi Stack Exchange về phông chữ monospaced
      Ngoài ra còn có trang typography của chính phủ Mỹ, mục typography của BBC GEL, mục typography của Google Material Design, Butterick's Practical Typography nếu muốn đào sâu, và The Elements of Typographic Style Applied to the Web cũng đáng tham khảo

  • Thành thật mà nói thì cỡ chữ mặc định quá nhỏ và khó đọc. Tôi không hiểu vì sao lại chọn kích thước như vậy, và với tôi nó không tốt cho cả khả năng truy cập lẫn tính dễ đọc

    • Điều này bắt nguồn từ hai vấn đề của nền tảng web. Việc bám theo phông chữ và kích thước do trình duyệt cung cấp là tốt ở chỗ tôn trọng sở thích người dùng đã nêu rõ, nhưng trên thực tế số người chủ động thiết lập sở thích như vậy là rất ít, và trong nhiều cấu hình mặc định, các hãng trình duyệt về mặt lịch sử đã không thay đổi giá trị mặc định cũ, nên kết quả là cỡ chữ nhỏ đến sát ngưỡng thấp của mức dễ đọc
      Tệ hơn nữa là font-size không có ý nghĩa tuyệt đối ổn định giữa các phông chữ. font-size: 16px cũng có thể trông rất khác tùy phông. Trong Safari, sans mặc định và sans-serif mặc định trông khác nhau như thế này: https://github.com/user-attachments/assets/…. Ngay trong bình luận này bạn cũng có thể thấy cỡ chữ của monospace không khớp với phần còn lại
      Cuối cùng thì đây là thứ khó sửa cho thật đúng, kiểu gì cũng sẽ có chỗ bị vỡ, và rốt cuộc chỉ còn là vấn đề webmaster thích kiểu đánh đổi nào hơn. Cá nhân tôi, nếu có thể dùng chế độ đọc thì tôi không còn quá quan tâm đến thiết kế website nữa. Tuy vậy, với sự mơ hồ của font-size thì giờ đã có một giải pháp khá ổn: https://matklad.github.io/2025/07/16/font-size-adjust.html
    • Tôi dùng một màn hình 140ppi kỳ quặc, ở mức scale 125% tưởng như nên dùng thì lại nhìn không đẹp nên tôi để 100% rồi chỉnh mức zoom mặc định để đọc được
      Chữ trên site này nhỏ đến mức tôi còn tự hỏi có phải nó đã lách qua mức zoom đó không. Thế là tôi lại phải tăng thêm một nấc cài đặt cỡ chữ tối thiểu của Firefox