เว็บ Monospace

 (owickstrom.github.io)
1 คะแนน โดย GN⁺ 2024-08-28 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

เกริ่นนำ

ฟอนต์ monospace เป็นที่ชื่นชอบของผู้คนมากมาย เพราะอ่านง่าย มีความสม่ำเสมอ และมีสุนทรียภาพที่โดดเด่น หน้านี้ใช้กริด monospace เพื่อจัดแนวข้อความและไดอะแกรม สร้างจากเอกสาร Markdown แบบเรียบง่าย และเรนเดอร์ด้วย CSS และ Javascript เล็กน้อย ใช้ดีไซน์แบบ responsive ที่ย่อขนาดตามหน่วยขนาดตัวอักษร ตั้งเป้าให้ element มาตรฐานต่าง ๆ ทำงานได้อย่างถูกต้อง และเรนเดอร์ด้วย semantic HTML ในสไตล์ยุค 70

พื้นฐาน

  • เอกสารนี้มีการใช้คลาสเพิ่มเติมอยู่บ้าง แต่โดยหลักแล้วเป็นมาร์กอัป
  • มีตัวอย่างย่อหน้าทั่วไปและเส้นคั่นแนวนอน
  • สามารถซ่อนเนื้อหาได้ด้วย element <details>

รายการ

  • รายการแบบ bullet ทั่วไป:

    • กล้วย
    • เรือกระดาษ
    • แตงกวา
    • จรวด

  • รายการแบบมีลำดับ:

    • เป้าหมาย
    • แรงจูงใจ
      • ภายใน
      • ภายนอก
    • ผลกระทบลำดับรอง

  • การแสดงผลแบบ tree:

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

ตาราง

  • สามารถใช้ตารางทั่วไปที่ปรับเข้ากับกริด monospace ได้โดยอัตโนมัติ
  • ตัวอย่าง:
    • ชื่อ: Boboli Obelisk, ขนาด: 1.41m × 1.41m × 4.87m, ตำแหน่ง: 43°45’50.78”N 11°15’3.34”E
    • ชื่อ: Pyramid of Khafre, ขนาด: 215.25m × 215.25m × 136.4m, ตำแหน่ง: 29°58’34”N 31°07’51”E

ฟอร์ม

  • ตัวอย่างปุ่มและช่องกรอกข้อมูล:
    • ปุ่ม: RESET, SAVE
    • ช่องกรอกข้อมูล: ชื่อ, นามสกุล, อายุ

กริด

  • สามารถแบ่งพื้นที่แนวนอนให้เท่า ๆ กันได้ด้วยการเพิ่มคลาสกริดให้กับคอนเทนเนอร์
  • สามารถตั้งค่า flex-grow: 1; ให้กับเซลล์บางช่องเพื่อเติมพื้นที่ที่เหลือ

ภาพ ASCII

  • สามารถใช้แท็ก <pre> เพื่อวาดภาพด้วยอักขระวาดกรอบ

  • ตัวอย่าง:

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

  • สามารถเน้นเพิ่มเติมได้ด้วยการเพิ่มแท็ก <figure> และ <figcaption>

  • ตัวอย่างการส่งข้อความ:

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

  • ตัวอย่างแผนภูมิ:

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

สื่อ

  • รองรับวัตถุสื่ออย่างรูปภาพและวิดีโอ
  • ตัวอย่าง:
    • ห้องในปราสาทฝรั่งเศส (2024)
    • ศูนย์กลางของเว็บ (1914), Wikimedia

การสนทนา

  • สร้างขึ้นเพื่อพัฒนาทักษะ CSS และสนุกกับงานออกแบบ
  • หากได้นำไปใช้หรือส่งข้อเสนอแนะมาก็จะยินดีมาก
  • สามารถดูซอร์สโค้ดทั้งหมดได้บน GitHub: github.com/owickstrom/the-monospace-web
  • ขอขอบคุณ U.S. Graphics Company

สรุปโดย GN⁺

  • โปรเจกต์นี้เป็นการทดลองออกแบบเว็บโดยใช้ฟอนต์ monospace
  • ผสานดีไซน์แบบ responsive เข้ากับ semantic HTML เพื่อสร้างหน้าเว็บสไตล์ยุค 70
  • อาจช่วยให้นักพัฒนาพัฒนาทักษะด้าน CSS และการออกแบบได้
  • โปรเจกต์ที่มีแนวคิดคล้ายกันคือ "CSS Zen Garden"

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-08-28
ความเห็นจาก Hacker News

  • ผู้ใช้คนหนึ่งเก็บรายชื่อหน้าเว็บแบบ monospace ไว้ และตอนนี้มีอยู่ราว 50 หน้า

    • ถ้าเลิกใช้ฟอนต์สัดส่วน การอ่านข้อความจะยากขึ้น
    • การปรับระยะห่างตัวอักษรของฟอนต์สัดส่วนสร้างความแตกต่างอย่างมากต่อการรับรู้รูปร่างของกลุ่มตัวอักษร
    • ข้อความ monospace ก็ใช้ได้ดีเมื่ออยู่ในตัวแก้ไขโค้ดที่มีโครงสร้างและการไฮไลต์
    • ดูสวยเป็นพิเศษเมื่อใช้ร่วมกับแผนภูมิ Unicode และ ASCII art

  • ผู้ใช้คนหนึ่งกำลังตามหาคู่มือเกมวิดีโอที่เขียนด้วยฟอนต์ monospace ซึ่งเคยเจอเมื่อหลายปีก่อน

    • เป็นข้อความที่จัดแนวได้อย่างสมบูรณ์แบบด้วยการเลือกใช้คำเพียงอย่างเดียว
    • เขาถามว่ามีใครรู้ลิงก์ของสิ่งนี้หรือไม่

  • ผู้ใช้คนหนึ่งพูดถึงแนวคิด "indie web"

    • ตัดอัลกอริทึมออกไป และโอบรับสิ่งที่ทำให้เว็บยุคก่อนน่าใช้งาน
    • รวมถึง RSS, บล็อกแบบปรับแต่งเอง, ฟอรัม, เว็บริง และอื่น ๆ
    • เขาเองก็เริ่มทำแล้ว และรู้สึกว่าดีมาก

  • ผู้ใช้คนหนึ่งบอกว่าตัวฟอนต์ monospace เองไม่ใช่ปัญหา แต่การตัดบรรทัดแบบบังคับต่างหากที่เป็นปัญหา

    • ฟอนต์เล็กทำให้เกิดกำแพงข้อความ และโหมดผู้อ่านก็ใช้ไม่ได้
    • ถ้าเอียงหน้าจอแนวนอนก็มีโอกาสเกิดแถบเลื่อน
    • เขามีข้อบ่นเดียวกันนี้กับเมลลิงลิสต์สายเทคนิค

  • ผู้ใช้คนหนึ่งกำลังคิดจะเปลี่ยนฟอนต์บนเว็บไซต์ส่วนตัวเป็น monospace

    • อยากได้คำแนะนำฟอนต์ monospace ที่อ่านข้อความยาว ๆ ได้ดี
    • ถ้าอยู่ใน Google Fonts จะยิ่งดีเป็นพิเศษ

  • ผู้ใช้คนหนึ่งบอกว่า monospace ดูสวยและ responsive แต่ไม่เหมาะกับข้อความเนื้อหา

    • เขาเคยอ่านเว็บหลายแห่งที่ใช้ monospace กับเนื้อความแล้ว แต่ยังคิดว่าฟอนต์สัดส่วนดีกว่า

  • ผู้ใช้คนหนึ่งกล่าวถึง "VIC article" ซึ่งเป็นทรัพยากรชื่อดังของ C64 ว่ายังเผยแพร่ในรูปแบบ monospace อยู่

    • ปัญหาหลักคือการพิมพ์
    • แผนภาพใช้พื้นที่สองมิติที่ต้องอาศัยการอ้างอิงแบบคงที่
    • บทความนี้เป็นเอกสารอ้างอิงทางเทคนิคที่สำคัญที่สุดชิ้นหนึ่งของ C64
    • เอฟเฟกต์เดโมเชิงเทคนิค 99% สามารถแยกย่อยได้เป็นกลเม็ดพื้นฐานที่พบในนี้

  • ผู้ใช้คนหนึ่งบอกว่าเว็บกำลังกลับไปเป็นเหมือนเดิมอีกครั้ง

    • ชุมชนย่อยแบบดาวเทียมของเว็บยุคแรกเริ่มมีมากขึ้นเรื่อย ๆ
    • การเข้าไปเยี่ยมชมส่วนต่าง ๆ ของเว็บก็น่าสนใจมากขึ้นเรื่อย ๆ

  • ผู้ใช้คนหนึ่งคิดว่า CSS class สำหรับ tree ul-list ควรเป็นส่วนหนึ่งของมาตรฐาน HTML

    • มันมีประโยชน์มาก

  • ผู้ใช้คนหนึ่งกล่าวว่า OpenBSD ตั้งค่าฟอนต์คอนโซลเป็น "Spleen" มาหลายปีแล้ว

    • น่าเสียดายที่ไม่มีเวอร์ชัน TrueType
    • ให้ลิงก์ Spleen GitHub