Web Monospace

 (owickstrom.github.io)
1 điểm bởi GN⁺ 2024-08-28 | 1 bình luận | Chia sẻ qua WhatsApp
  • Đây là một trang thử nghiệm sắp xếp các phần tử web theo lưới ký tự, giúp hiển thị văn bản, bảng, sơ đồ và media gần với thẩm mỹ terminal kiểu thập niên 1970
  • Tài liệu Markdown đơn giản được chuyển đổi bằng Pandoc, rồi HTML ngữ nghĩa được render lên lưới monospace bằng CSS và rất ít JavaScript
  • Cách xử lý responsive không co theo pixel mà theo đơn vị kích thước ký tự, bảng cũng tự điều chỉnh theo lưới nhưng chỉ cho phép một cột có thể giãn ra
  • Hỗ trợ các phần tử tiêu chuẩn như đoạn văn thường, đường phân cách, <details>, danh sách, danh sách dạng cây, bảng, biểu mẫu, container grid, hình ASCII dựa trên <pre>, cùng hình ảnh và video
  • Toàn bộ mã nguồn được công khai trên GitHub, nên có thể fork hoặc sao chép những phần cần thiết theo điều kiện giấy phép

Trang web được cấu thành từ lưới ký tự

  • Phông chữ monospace có thể mang lại cảm giác dễ đọc, nhất quán và đẹp hơn phông tỷ lệ cho một số người dùng
  • Trang này là một thử nghiệm kỹ thuật và sáng tạo nhằm xây dựng mọi thành phần bằng web monospace
  • Cách triển khai là chuyển tài liệu Pandoc từ Markdown, rồi dùng CSS và một ít JavaScript để đặt HTML ngữ nghĩa lên lưới ký tự
  • Bố cục responsive sẽ co lại theo đơn vị kích thước ký tự thay vì pixel để phù hợp với bề rộng màn hình
  • Mục tiêu là làm cho các phần tử HTML tiêu chuẩn hoạt động tự nhiên trong lưới monospace mà không cần thêm thao tác phức tạp

Các phần tử được hỗ trợ và cách bố trí

  • Markup cơ bản gồm đoạn văn thường, đường kẻ ngang và phần tử <details>
  • Danh sách hỗ trợ cả dạng gạch đầu dòng và danh sách có thứ tự; với danh sách không thứ tự gắn class tree, có thể biểu diễn cấu trúc cây giống hệ thống tệp
  • Bảng được tự động điều chỉnh để khớp với lưới monospace và hoạt động responsive
    • Tuy vậy, chỉ một cột được phép co giãn
  • Biểu mẫu cũng nằm trong phạm vi hỗ trợ và được bố trí trên cùng lưới ký tự với các phần tử tiêu chuẩn khác
  • Khi thêm class grid vào container, các ô sẽ chia đều không gian theo chiều ngang
    • Do giữ đặc tính monospace, tổng chiều rộng có thể không phải lúc nào cũng đạt 100%
    • Nếu muốn một ô cụ thể lấp đầy phần không gian còn lại, hãy đặt flex-grow: 1; cho ô đó
  • Có thể dùng thẻ <pre> và box-drawing characters để vẽ hình kiểu ASCII
    • Có thể bọc trong <figure> và <figcaption> để làm nổi bật hơn
    • Ví dụ bao gồm sơ đồ truyền thông điệp và biểu đồ cột
  • Cũng hỗ trợ đối tượng media như hình ảnh và video
    • Chúng có thể mở rộng tới chiều rộng của trang, và phần đệm bên dưới sẽ được thêm vào để giữ lưới monospace
  • Toàn bộ mã nguồn được công khai tại github.com/owickstrom/the-monospace-web
  • Nguồn cảm hứng thiết kế đến từ U.S. Graphics Company

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-08-28
Các ý kiến trên Hacker News

  • Tôi đang tổng hợp danh sách các trang dùng phông chữ đơn cách: https://wonger.dev/posts/monospace-dump#web. Hiện có khoảng 50 trang
    Việc xử lý khoảng cách rất khó, và nếu từ bỏ phông chữ tỉ lệ thì cũng mất đi phần nào khả năng đọc
    Tôi cho rằng kerning của phông chữ tỉ lệ tạo ra khác biệt lớn trong việc mắt nhận diện hình dạng của các cụm chữ
    Văn bản đơn cách thì ổn ở những nơi có cấu trúc và tô sáng như trình soạn thảo mã, nhưng nên tránh dùng cho bài viết dài
    Dù vậy, đặc biệt với biểu đồ Unicode và ASCII art thì nó thật sự rất đẹp

    • Trong phông chữ tỉ lệ, kerning tạo ra khác biệt rất lớn. Kerning chuẩn giúp não xử lý hình dạng từ nhanh hơn nhiều
    • ASCII art thật sự rất tuyệt. Trong lớp học đánh máy, sau khi hoàn thành bài tập trong ngày, chúng tôi có thể làm ASCII art bằng cách làm theo danh sách lệnh mà không biết ảnh cuối cùng là gì
      Ví dụ như 15 space, 1 V, 3 U, 1 V, 15 space, 5 U, 12 space, 2 x, 5 U, 2 x; sau khoảng 250 dòng thì một bức hình Jordan đang úp rổ hiện ra để có thể in ra
    • Một trong các ví dụ giờ đã thành tên miền đang rao bán. Dù vậy vẫn còn trên WBM: https://web.archive.org/web/20230216225350/https://kary.us/n...
    • Văn bản đơn cách với màu sắc và chút ít định dạng thuần túy giống như từ bỏ một chiều cảm giác hay không gian. Gần như là một kiểu khổ hạnh vô nghĩa
    • Đáng thêm một trang nữa vào danh sách :) https://jarek.lupin.ski/tape-deck/

  • Có vẻ đây là đúng luồng để hỏi câu này. Vài năm trước tôi từng thấy một bài, có lẽ là hướng dẫn chơi video game, được viết để đọc bằng phông chữ đơn cách, và toàn bộ hàng nghìn dòng đều được căn đều hai bên hoàn hảo chỉ bằng cách chọn từ
    Có ai biết đó là gì và có liên kết không?

    • Một thứ tương tự là http://tom7.org/bovex/. Đó là một layout engine cố tạo hiệu ứng tương tự bằng cách viết lại đầu vào bằng LLM
    • Cái đó được gọi là bricktext. Ngày xưa thỉnh thoảng thấy trên usenet hay GameFAQs
      [0] http://www.catb.org/esr/jargon/html/B/bricktext.html
      Khá ngạc nhiên là khái niệm này gần như biến mất hoàn toàn khỏi kết quả tìm kiếm Google
    • Laravel cũng làm thứ tương tự. Trong phần chú thích nhiều dòng, mỗi dòng ngắn hơn đúng 3 ký tự so với dòng trước
      https://github.com/laravel/laravel/blob/11.x/config/database...
    • Tôi có ký ức mơ hồ từng thấy điều đó trong hướng dẫn trên GameFAQs. Có lẽ là một game Final Fantasy nào đó, nhưng ngoài ra thì không nhớ gì thêm
    • Tôi cũng muốn ké một câu hỏi trong luồng này
      Trong nhiều năm, tôi đã muốn làm một tiện ích mở rộng Visual Studio Code có thể căn đều chú thích trong khi gõ, bao gồm cả nối từ bằng dấu gạch nối, đồng thời cho phép thêm khoảng trắng khi cần
      Ngoài việc tìm hiểu một số thuật toán và thư viện liên quan, tôi chưa bắt đầu được, vì trông nó khá phức tạp
      Tôi đã thử dùng những thứ như fmt hay par, nhưng cuối cùng đành chấp nhận rằng nếu không làm thủ công thì phải từ bỏ các chú thích được căn chỉnh đẹp; chỉ một thay đổi nhỏ thường kéo theo việc làm lại nhiều dòng, quá tốn thời gian
      Tôi không muốn ngắt định danh dài ở giữa dòng nếu có thể tránh; lại còn phải xử lý danh sách lồng nhau, bảng, khối mã, ASCII art trong chú thích, phân biệt dấu gạch nối nằm trong từ với dấu gạch nối dùng để nối từ, cũng như các chú thích có cấu trúc như chú thích tài liệu XML hay thẻ Javadoc
      Nhìn Badness 0 của Tom7, tôi cũng từng nghĩ có thể ném LLM vào, nhưng nếu cần chạy thời gian thực và không được có chú thích ảo giác thì tôi cho rằng nó vẫn chưa thực tế
      Có chức năng nào như vậy đã tồn tại chưa, hoặc có nền tảng nào giúp việc viết tiện ích mở rộng này không biến thành công việc kéo dài cả năm không?

  • Bản thân đơn cách không làm tôi khó chịu
    Điều gây khó chịu là ngắt dòng cưỡng bức
    Có những trang web gọi là “retro” nhưng thực chất dùng thẻ pre
    Trên điện thoại, nó thành một bức tường chữ cỡ nhỏ, chế độ đọc không hoạt động, và nếu xoay ngang thì có thể có thanh cuộn, cũng có thể không
    Gần như phàn nàn duy nhất của tôi về các mailing list kỹ thuật ngày nay cũng là ngắt dòng cưỡng bức và bố cục cứng nhắc

    • Trang web này thì không như vậy. Nó hoàn toàn responsive
    • Tôi từng cố đọc RFC trên điện thoại, nhưng phải liên tục cuộn ngang chỉ để xem một đoạn văn đơn giản. Hoặc phải thu nhỏ đến mức không đọc nổi chữ
    • Tôi tò mò không biết chính xác vấn đề với thanh cuộn là gì

  • Trong một video tôi xem hôm nay, họ gọi thứ này là indie web; họ nói đó là triết lý phản đối thuật toán và đón nhận những thứ từng làm nên sự tuyệt vời của web ngày xưa
    Những thứ như RSS, blog cá nhân, diễn đàn, webring
    Tôi cũng tự bắt đầu một cái và cảm giác khá hay

  • Dễ nhìn, có tính ngữ nghĩa và responsive là những điểm tốt, nhưng về cơ bản phông chữ monospace không phù hợp lắm cho văn bản nội dung.
    Tôi đã đọc các bài blog dùng thân bài monospace trên nhiều trang và cũng ổn, nhưng theo tôi thì dùng phông tỉ lệ mới là hướng đúng.

    • Có vẻ tôi thích monospace hơn. Ít nhất phối màu nền đen chữ trắng thì chắc chắn tốt hơn.
      Tôi thấy kiểu này tốt hơn nhiều so với những trang “đẹp” cố tạo cảm giác như tạp chí in ngày xưa.
    • Đồng ý. Ngay cả khi viết tài liệu Markdown, chuyện này cũng bắt đầu làm tôi khó chịu, nhưng trong Markdown thì nhiều khi việc tránh monospace là không thực tế.
    • Hỏi vì tò mò: bạn thích phông chữ nào cho văn bản nội dung?
      Blog của tôi dùng monospace vì thị lực tôi không tốt và tôi dùng thiết lập phóng to, nhưng tôi nghĩ khả năng tiếp cận rất quan trọng nên luôn thắc mắc lựa chọn nào dễ đọc hơn cho mọi người.

  • Không nói chuyện khác, riêng lớp CSS tree ul-list thì tôi thấy tốt đến mức đáng được đưa vào đặc tả HTML như một thẻ. Đây là một thành phần cực kỳ hữu ích.

  • Khoảng cách dòng quá hẹp, ảnh hưởng xấu đến khả năng đọc. Những đoạn văn dài dày đặc như thế này rất khó đọc.
    Nhưng bảng và đồ họa ký tự lại cần khoảng cách dòng hẹp như vậy.
    Vấn đề là dùng cùng một lưới ký tự cho cả đồ họa lẫn văn bản.
    Có lẽ có thể giảm bớt bằng cách dùng một phông chữ có x-height đặc biệt thấp, để chừa thêm khoảng trắng trên dưới chữ.

    • Lúc đầu tôi tưởng bạn nói về độ rộng dòng nên hơi bối rối. Độ rộng dòng nằm trong phạm vi thường được chấp nhận, khoảng 70 ký tự.
      Về chiều cao dòng thì tôi đồng ý. Cỡ chữ 16px mà line-height 19.2px thì chỉ 1,2 lần, quá bí. Tăng lên 24px sẽ cải thiện đáng kể.
      Tuy nhiên mắt tôi không thấy chiều cao dòng lớn hơn ảnh hưởng đến bảng hay đồ họa ký tự. Thêm điều chỉnh này vào thì phong cách monospace vẫn trụ khá tốt.
      Sửa: Tôi nghĩ mình hiểu ý chính rồi. Nó phá vỡ khái niệm lưới cố định của tác giả. Có thể kiểm chứng bằng cách đặt line-height: 24px cho phần tử p rồi bật “debug mode” của tác giả để xem lưới.
    • Tôi thực sự không chịu nổi monospace để đọc nên đã tạo một bookmarklet. Trang này hoạt động tốt chỉ cần đổi các thẻ văn bản thông thường sang sans-serif, trong khi mọi chế độ đọc đều làm hỏng tùy chọn phông chữ.
      javascript: (function() {
      (function() {
      const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, td, th');
      textElements.forEach((element) => {
      const textColor = getComputedStyle(element).getPropertyValue('color');
      element.style.fontFamily = 'system-ui, -apple-system, sans-serif';
      element.style.WebkitTextStroke = \0.4px ${textColor}`; }); location.hash = ""; history.replaceState("", "", location.pathname); })(); })();`
      https://caiorss.github.io/bookmarklet-maker/
    • So với độ dày đặc của bình luận HN ở đây thì thế nào?
    • Vấn đề là chiều cao dòng quá chật, hay bản thân việc phông monospace khó đọc hơn phông tỉ lệ?
      Vì các từ trong monospace có “hình dạng” giống nhau hơn so với từ trong phông tỉ lệ.
    • Vừa nhìn là tôi đã thấy phản cảm ngay.

  • OpenBSD đã bắt đầu đặt phông chữ console thành Spleen từ vài năm trước.
    Tiếc là không có bản TrueType.
    https://github.com/fcambus/spleen

    • Không thể dùng tệp OTF thay thế sao? README nói trong tarball phát hành có tệp OTF.

  • Tài liệu C64 vẫn nổi tiếng hiện nay, gọi là VIC article, được cung cấp ở dạng monospace.
    https://www.cebix.net/VIC-Article.txt
    Vấn đề chính là đầu ra.
    Bài này dùng các sơ đồ cần tham chiếu cố định trong không gian hai chiều, nên monospace ở đây rất quan trọng.
    Đây là một trong những tài liệu tham khảo kỹ thuật quan trọng nhất về C64, và 99% hiệu ứng demo kỹ thuật đều có thể được phân rã thành các thủ thuật cơ bản trong đó.

  • Tôi đang nghĩ đến việc đổi phông chữ trên website cá nhân sang monospace.
    Có ai biết phông monospace nào đặc biệt dễ đọc cho bài viết dài không?
    Nếu có trên Google Fonts thì càng tốt.

    • Tôi thích Drafting Mono để hiển thị đoạn văn: https://indestructibletype.com/Drafting/
      Không có trên Google Fonts, nhưng miễn phí, hoặc bản phông biến thiên cũng rất rẻ.
    • IBM Plex Mono khá tốt và giấy phép cũng hợp lý. Có trên Google Fonts, còn kho mã ở đây: https://github.com/IBM/plex
    • Nói hơi ngoài lề, nhưng bạn nên cân nhắc dùng https://fontsource.org/ thay cho Google Fonts. Dễ dùng tương đương, và ít nhất là không có theo dõi của Google.