Web Monospace

 (owickstrom.github.io)
1 điểm bởi GN⁺ 2024-08-28 | 1 bình luận | Chia sẻ qua WhatsApp

Giới thiệu

Phông chữ monospace được nhiều người yêu thích. Chúng có độ dễ đọc cao, tính nhất quán tốt và thẩm mỹ đẹp. Trang này sử dụng lưới monospace để căn chỉnh văn bản và sơ đồ. Nó được tạo từ một tài liệu Markdown đơn giản và được hiển thị bằng CSS cùng một chút Javascript. Thiết kế responsive được áp dụng, thu nhỏ theo đơn vị kích thước ký tự. Mục tiêu là để các phần tử tiêu chuẩn hoạt động đúng cách. Trang được render bằng semantic HTML theo phong cách thập niên 70.

Những điều cơ bản

  • Tài liệu có dùng thêm một vài lớp, nhưng phần lớn là markup.
  • Có đoạn văn thông thường và đường kẻ ngang làm ví dụ.
  • Có thể ẩn nội dung bằng phần tử <details>.

Danh sách

  • Danh sách gạch đầu dòng thông thường:

    • Chuối
    • Thuyền giấy
    • Dưa leo
    • Tên lửa

  • Danh sách có thứ tự:

    • Mục tiêu
    • Động lực
      • Nội tại
      • Ngoại tại
    • Hiệu ứng bậc hai

  • Trực quan hóa cây:

    • /dev/nvme0n1p2
      • usr
        • local
        • share
        • libexec
        • includes
        • bin
        • src
        • lib64
        • lib
      • games
        • solitaire
        • snake
        • tic-tac-toe
      • media
      • run
      • tmp

Bảng

  • Có thể dùng bảng thông thường tự động khớp với lưới monospace.
  • Ví dụ:
    • Tên: Boboli Obelisk, kích thước: 1.41m × 1.41m × 4.87m, vị trí: 43°45’50.78”N 11°15’3.34”E
    • Tên: Pyramid of Khafre, kích thước: 215.25m × 215.25m × 136.4m, vị trí: 29°58’34”N 31°07’51”E

Biểu mẫu

  • Ví dụ về nút và ô nhập:
    • Nút: RESET, SAVE
    • Ô nhập: tên, họ, tuổi

Lưới

  • Có thể chia đều không gian ngang bằng cách thêm lớp lưới vào container.
  • Có thể lấp đầy phần không gian còn lại bằng cách đặt flex-grow: 1; cho một ô cụ thể.

Hình ASCII

  • Có thể dùng thẻ <pre> để vẽ hình bằng các ký tự dựng hộp.

  • Ví dụ:

    ╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

  • Có thể nhấn mạnh bằng cách thêm thẻ <figure> và <figcaption>.

  • Ví dụ truyền thông điệp:

    ┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │
    │ msg 1   │         │
    └────────►│         │
              │ msg 2   │
              └────────►│
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

  • Ví dụ biểu đồ:

               Things I Have
                       │
                 ████ Usable
15 │
                 ░░░░ Broken
12 │       ░
9 │  ░     ░
6 │  █     ░     ░
3 │  █     █     █
0 └───▀─────────▀─────────▀──────────▀─────────────
   Socks   Jeans   Shirts  USB Drives

Phương tiện

  • Hỗ trợ các đối tượng media như hình ảnh và video.
  • Ví dụ:
    • Căn phòng trong một lâu đài Pháp (2024)
    • Trung tâm của web (1914), Wikimedia

Thảo luận

  • Dự án được tạo ra để phát triển kỹ thuật CSS và tận hưởng việc thiết kế.
  • Sẽ rất tuyệt nếu bạn sử dụng hoặc gửi phản hồi.
  • Có thể xem toàn bộ mã nguồn trên GitHub: github.com/owickstrom/the-monospace-web
  • Gửi lời cảm ơn đến U.S. Graphics Company.

Tóm tắt của GN⁺

  • Dự án này là một thử nghiệm thiết kế web sử dụng phông chữ monospace.
  • Nó kết hợp thiết kế responsive với semantic HTML để tạo ra một trang web theo phong cách thập niên 70.
  • Có thể giúp các nhà phát triển cải thiện kỹ năng CSS và thiết kế.
  • Một dự án có tính năng tương tự là "CSS Zen Garden".

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-08-28
Ý kiến trên Hacker News

  • Một người dùng cho biết họ đang duy trì danh sách các trang web monospace, hiện có khoảng 50 trang

    • Nếu bỏ phông chữ tỷ lệ, khả năng đọc sẽ giảm
    • Việc chỉnh khoảng cách chữ của phông chữ tỷ lệ tạo ra khác biệt lớn trong việc nhận biết hình dạng của các nhóm ký tự
    • Văn bản monospace vẫn ổn khi được cấu trúc và tô sáng trong trình soạn thảo mã
    • Đặc biệt đẹp khi dùng cùng bảng Unicode và ASCII art

  • Một người dùng đang tìm một hướng dẫn chơi game được viết bằng phông chữ monospace mà họ từng thấy vài năm trước

    • Văn bản được căn chỉnh hoàn hảo chỉ bằng cách chọn từ ngữ
    • Họ hỏi liệu có ai biết liên kết đến nội dung đó không

  • Một người dùng nhắc đến triết lý "indie web"

    • Loại bỏ thuật toán và đón nhận những yếu tố từng làm cho web thời kỳ đầu trở nên hấp dẫn
    • Bao gồm RSS, blog tùy chỉnh, diễn đàn, web ring và các yếu tố tương tự
    • Bản thân họ cũng đã bắt đầu và cảm thấy rất thích

  • Một người dùng nói rằng bản thân phông chữ monospace thì ổn, nhưng vấn đề là việc xuống dòng cưỡng bức

    • Nó tạo ra những bức tường chữ với cỡ chữ nhỏ, và chế độ đọc không hoạt động
    • Khi nghiêng ngang màn hình, có thể sẽ xuất hiện thanh cuộn
    • Họ cũng có cùng phàn nàn với các mailing list kỹ thuật

  • Một người dùng đang cân nhắc đổi phông chữ trên website cá nhân sang monospace

    • Họ muốn được gợi ý các phông monospace có khả năng đọc tốt với văn bản dài
    • Nếu có trên Google Fonts thì càng tốt

  • Một người dùng nói rằng monospace đẹp và có tính thích ứng, nhưng không phù hợp cho văn bản thân bài

    • Họ đã thử đọc văn bản thân bài monospace trên nhiều trang, nhưng vẫn thấy phông chữ tỷ lệ tốt hơn

  • Một người dùng nhắc rằng tài liệu C64 nổi tiếng "VIC article" vẫn được cung cấp ở dạng monospace

    • Vấn đề chính là việc in ấn
    • Các sơ đồ sử dụng không gian hai chiều cần tham chiếu cố định
    • Bài viết này là tài liệu tham khảo kỹ thuật quan trọng nhất của C64
    • 99% hiệu ứng demo kỹ thuật có thể được phân tích thành các thủ thuật cơ bản được tìm thấy ở đây

  • Một người dùng nói rằng web đang quay trở lại hình dạng ban đầu của nó

    • Các cộng đồng vệ tinh của web thời kỳ đầu đang ngày càng nhiều hơn
    • Việc ghé thăm những phần khác nhau của web ngày càng trở nên thú vị hơn

  • Một người dùng nghĩ rằng lớp CSS tree ul-list nên trở thành một phần của tiêu chuẩn HTML

    • Đây là thứ rất hữu ích

  • Một người dùng nhắc rằng OpenBSD đã đặt phông chữ console thành "Spleen" từ vài năm trước