เว็บแบบโมโนสเปซ

• เป็นหน้าเว็บเชิงทดลองที่จัดวางองค์ประกอบเว็บให้พอดีกับ กริดระดับตัวอักษร เพื่อแสดงข้อความ ตาราง ไดอะแกรม และมีเดียในสุนทรียะแบบเทอร์มินัลยุค 1970
• แปลง เอกสาร Markdown ง่าย ๆ ด้วย Pandoc แล้วใช้ CSS กับ JavaScript เพียงเล็กน้อยเพื่อเรนเดอร์ HTML เชิงความหมายลงบนกริดโมโนสเปซ
• การทำงานแบบ responsive ไม่ได้ย่อด้วยพิกเซล แต่ย่อตาม หน่วยขนาดตัวอักษร และตารางจะปรับอัตโนมัติให้เข้ากับกริด แต่จำกัดให้มีคอลัมน์ที่ยืดได้เพียงหนึ่งคอลัมน์
• รองรับ องค์ประกอบมาตรฐาน เช่น ย่อหน้าทั่วไป เส้นคั่น, <details>, รายการ, รายการแบบต้นไม้, ตาราง, ฟอร์ม, คอนเทนเนอร์ grid, ภาพ ASCII ที่อิง <pre>, รูปภาพ และวิดีโอ
• ซอร์สโค้ดทั้งหมดเปิดเผยบน GitHub จึงสามารถ fork หรือคัดลอกส่วนที่ต้องการไปใช้ได้ตามเงื่อนไขไลเซนส์

---

หน้าเว็บที่สร้างจากกริดตัวอักษร

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

องค์ประกอบที่รองรับและวิธีจัดวาง

• มาร์กอัปพื้นฐานรวมถึงย่อหน้าทั่วไป เส้นคั่นแนวนอน และองค์ประกอบ <details>
• รายการรองรับทั้งรายการแบบ bullet ทั่วไปและรายการแบบมีลำดับ และสามารถแสดง โครงสร้างแบบต้นไม้ ที่ดูเหมือนระบบไฟล์ได้ด้วยรายการแบบไม่เรียงลำดับที่ใส่คลาส tree
• ตารางจะปรับอัตโนมัติให้เข้ากับกริดโมโนสเปซและทำงานแบบ responsive
  • อย่างไรก็ตาม คอลัมน์ที่ยืดได้จะถูกจำกัดไว้เพียง หนึ่งคอลัมน์
• ฟอร์มก็อยู่ในขอบเขตที่รองรับ และถูกจัดวางบนกริดตัวอักษรเดียวกันร่วมกับองค์ประกอบมาตรฐานอื่น ๆ
• เมื่อเพิ่มคลาส grid ให้คอนเทนเนอร์ เซลล์ต่าง ๆ จะแบ่งพื้นที่แนวนอนเท่า ๆ กัน
  • เนื่องจากยังคงคุณสมบัติแบบโมโนสเปซ ความกว้างรวมจึงอาจไม่เป็น 100% เสมอไป
  • หากต้องการให้เซลล์ใดเซลล์หนึ่งเติมพื้นที่ที่เหลือ ให้ตั้งค่า flex-grow: 1; ให้เซลล์นั้น
• สามารถใช้แท็ก <pre> และ box-drawing characters เพื่อวาด ภาพสไตล์ ASCII ได้
  • สามารถห่อด้วย <figure> และ <figcaption> เพื่อทำให้เด่นขึ้น
  • ตัวอย่างที่รวมไว้มีไดอะแกรมการส่งข้อความและกราฟแท่ง
• รองรับ วัตถุมีเดีย เช่น รูปภาพและวิดีโอด้วย
  • จะขยายจนถึงความกว้างของหน้า และมีการเพิ่ม padding ด้านล่างเพื่อรักษากริดโมโนสเปซ
• ซอร์สโค้ดทั้งหมดเปิดเผยที่ github.com/owickstrom/the-monospace-web
• แหล่งแรงบันดาลใจด้านดีไซน์คือ U.S. Graphics Company

[GN⁺]

ความคิดเห็นจาก Hacker News

• กำลังรวบรวมรายชื่อหน้าเว็บที่ใช้ฟอนต์ความกว้างคงที่อยู่: https://wonger.dev/posts/monospace-dump#web ตอนนี้มีราว ๆ 50 เว็บแล้ว
  การจัดระยะห่าง ทำได้ยาก และถ้าเลิกใช้ฟอนต์ความกว้างแปรผัน ก็จะเสียความอ่านง่ายไปพอสมควร
  ผมคิดว่าเคอร์นิงของฟอนต์ความกว้างแปรผันสร้างความแตกต่างมากต่อการที่สายตารับรู้รูปร่างของกลุ่มตัวอักษร
  ข้อความความกว้างคงที่นั้นใช้ได้ดีในที่ที่มีโครงสร้างและมีการไฮไลต์อย่างตัวแก้ไขโค้ด แต่สำหรับบทความยาว ๆ ควรหลีกเลี่ยง
  ถึงอย่างนั้น โดยเฉพาะในตาราง Unicode และ ASCII art มันก็สวยจริง ๆ

  • ในฟอนต์ความกว้างแปรผัน เคอร์นิง สร้างความแตกต่างมหาศาล เคอร์นิงที่ดีช่วยให้สมองประมวลผลรูปร่างของคำได้เร็วกว่ามาก
  • ASCII art เจ๋งมากจริง ๆ ตอนเรียนพิมพ์ดีด ถ้าทำงานประจำวันเสร็จแล้ว ก็สามารถทำ ASCII art ตามรายการคำสั่งได้โดยไม่รู้ภาพสุดท้ายล่วงหน้า
    เช่น 15 space, 1 V, 3 U, 1 V, 15 space, 5 U, 12 space, 2 x, 5 U, 2 x อะไรทำนองนั้น และพอทำครบสัก 250 บรรทัด ก็จะปรากฏเป็นภาพ Jordan กำลังดังค์ให้พิมพ์ออกมาได้
  • หนึ่งในตัวอย่างตอนนี้กลายเป็น โดเมนที่ประกาศขาย แล้ว แต่ยังมีอยู่ใน WBM: https://web.archive.org/web/20230216225350/https://kary.us/n...
  • ข้อความ ความกว้างคงที่ ที่มีแค่สีและการจัดรูปแบบเล็กน้อย ให้ความรู้สึกเหมือนยอมทิ้งมิติด้านประสาทสัมผัสหรือพื้นที่ไปอย่างหนึ่ง ค่อนข้างเป็นความสมถะที่ไร้ความหมาย
  • น่าจะเพิ่มอันนี้เข้าไปในรายการได้อีกอัน :) https://jarek.lupin.ski/tape-deck/

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

  • ของที่คล้ายกันก็มี http://tom7.org/bovex/ เป็น เอนจินเลย์เอาต์ ที่พยายามสร้างเอฟเฟกต์คล้ายกันโดยเปลี่ยนไปใช้ LLM เป็นอินพุต
  • สิ่งนั้นเรียกว่า bricktext เมื่อก่อนจะเห็นเป็นครั้งคราวในที่อย่าง usenet หรือ GameFAQs
    [0] http://www.catb.org/esr/jargon/html/B/bricktext.html
    น่าประหลาดใจอยู่เหมือนกันที่แนวคิดนี้หายไปจากผลค้นหา Google อย่างหมดจด
  • Laravel ก็ทำอะไรคล้าย ๆ กัน ในคอมเมนต์หลายบรรทัด แต่ละบรรทัดจะ สั้นกว่าบรรทัดก่อนหน้า 3 ตัวอักษรพอดี
    https://github.com/laravel/laravel/blob/11.x/config/database...
  • มีความทรงจำเลือน ๆ ว่าเคยเห็นแบบนั้นในไกด์ของ GameFAQs น่าจะเป็นเกม Final Fantasy สักภาค แต่จำได้แค่นั้น
  • ผมก็อยากฝากคำถามไว้ในเธรดนี้ด้วย
    หลายปีมานี้อยากทำส่วนขยาย Visual Studio Code ที่จัดคอมเมนต์ให้ชิดขอบทั้งสองข้างระหว่างพิมพ์ รวมถึงการใส่ยัติภังค์ และอนุญาตให้เพิ่มช่องว่างได้เมื่อจำเป็น
    นอกจากลองค้นหาอัลกอริทึมและไลบรารีที่เกี่ยวข้องบ้างแล้วก็ยังไม่ได้เริ่ม เพราะมันดูค่อนข้างซับซ้อน
    เคยลองใช้พวก fmt หรือ par แต่สุดท้ายก็ยอมรับว่าถ้าไม่ทำเองด้วยมือก็คงต้องเลิกหวังคอมเมนต์ที่จัดเรียงสวย ๆ และการเปลี่ยนเล็ก ๆ เพียงอย่างเดียวก็มักทำให้ต้องจัดหลายบรรทัดใหม่ เสียเวลามาก
    ถ้าเป็นไปได้ไม่อยากตัดตัวระบุชื่อยาว ๆ กลางบรรทัด และยังต้องรองรับรายการซ้อน ตาราง บล็อกโค้ด ASCII art ในคอมเมนต์ การแยกแยะยัติภังค์ในคำกับยัติภังค์ที่เกิดจากการตัดคำ รวมถึงคอมเมนต์ที่มีโครงสร้างอย่างคอมเมนต์เอกสาร XML หรือแท็ก Javadoc
    พอเห็น Badness 0 ของ Tom7 ก็เคยคิดว่าจะลองโยนให้ LLM ทำ แต่ถ้าต้องทำงานแบบเรียลไทม์และต้องไม่มีคอมเมนต์หลอน ๆ ก็ยังคิดว่ายังไม่ใช่ทางที่ใช้ได้จริง
    มีฟีเจอร์แบบนี้อยู่แล้วไหม หรือมีฐานอะไรที่จะช่วยให้การทำส่วนขยายไม่กลายเป็นงานยาวหนึ่งปีหรือเปล่า?

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

  • เว็บไซต์นี้ไม่เป็นแบบนั้น เป็นแบบ responsive เต็มที่
  • เคยพยายามอ่าน RFC บนมือถือ แล้วต้องเลื่อนไปซ้ายขวาตลอดเพื่อดูแค่ย่อหน้าง่าย ๆ ย่อหน้าเดียว ไม่อย่างนั้นก็ต้องย่อจนตัวอักษรอ่านไม่ออก
  • สงสัยว่าแถบเลื่อนมีปัญหาตรงไหนกันแน่

• วิดีโอที่ดูวันนี้เรียกสิ่งนี้ว่า อินดี้เว็บ บอกว่าเป็นปรัชญาที่ต่อต้านอัลกอริทึมและพยายามรับเอาสิ่งที่เคยทำให้เว็บในอดีตยอดเยี่ยมกลับมา
  เช่น RSS, บล็อกส่วนตัว, ฟอรัม, webring
  ผมก็เริ่มทำเองอันหนึ่งแล้ว รู้สึกดีทีเดียว

  • บางครั้งก็เรียกว่า small web ด้วย ดู The small web is beautiful ของ Ben Hoyt: https://benhoyt.com/writings/the-small-web-is-beautiful

• ที่อ่านง่าย มีความหมายเชิง semantic และรองรับ responsive นั้นเป็นเรื่องดี แต่โดยพื้นฐานแล้ว ฟอนต์ความกว้างคงที่ ไม่ค่อยเหมาะกับข้อความเนื้อหาเท่าไร
  ผมเคยอ่านบทความบล็อกบนหลายเว็บไซต์ที่ใช้ฟอนต์ความกว้างคงที่เป็นเนื้อหา และก็พอใช้ได้ แต่ตามเกณฑ์ของผม ฟอนต์ความกว้างแปรผันน่าจะเป็นแนวทางที่ถูกต้องกว่า

  • ผมคิดว่าตัวเองชอบฟอนต์ความกว้างคงที่มากกว่า อย่างน้อยชุดสี พื้นหลังสีดำกับตัวอักษรสีขาว ก็ดีกว่าแน่นอน
    ผมว่ามันดีกว่าหน้าเว็บ “สวยงาม” ที่พยายามให้ความรู้สึกเหมือนนิตยสารพิมพ์สมัยก่อนมาก
  • เห็นด้วย ตอนเขียนเอกสาร Markdown ผมก็เริ่มรู้สึกรำคาญเรื่องนี้เหมือนกัน แต่ใน Markdown หลายครั้งการเลี่ยงฟอนต์ความกว้างคงที่ก็ไม่ค่อยเป็นไปได้จริง
  • ถามเพราะสงสัยนะ คุณชอบฟอนต์แบบไหนสำหรับข้อความเนื้อหา?
    ในบล็อกของผมใช้ฟอนต์ความกว้างคงที่ เพราะสายตาไม่ค่อยดีและใช้การตั้งค่าขยาย แต่ผมคิดว่า accessibility สำคัญ เลยสงสัยเสมอว่าตัวเลือกไหนจะอ่านง่ายกว่าสำหรับทุกคน

• เรื่องอื่นไม่รู้ แต่ CSS class tree ul-list ผมว่าดีจนควรเข้าไปอยู่ในสเปก HTML เป็นแท็กได้เลย เป็น คอมโพเนนต์ที่มีประโยชน์ มากจริง ๆ

• ระยะห่างบรรทัดแคบเกินไป ส่งผลเสียต่อความอ่านง่าย ย่อหน้ายาว ๆ ของเนื้อหาที่อัดแน่นแบบนี้อ่านยาก
  แต่ตารางและกราฟิกตัวอักษรต้องการระยะบรรทัดที่แคบแบบนี้
  ปัญหาคือการใช้กริดตัวอักษรเดียวกันทั้งกับกราฟิกและข้อความ
  น่าจะบรรเทาได้ถ้าใช้ฟอนต์ที่มี x-height ต่ำเป็นพิเศษ ทำให้เหลือพื้นที่ว่างด้านบนและด้านล่างของตัวอักษรมากขึ้น

  • ตอนแรกผมนึกว่าหมายถึงความกว้างของบรรทัดเลยสับสน ความกว้างบรรทัดอยู่ในช่วงที่ยอมรับกันทั่วไปคือประมาณ 70 ตัวอักษร
    แต่เรื่อง ความสูงบรรทัด เห็นด้วย ขนาดฟอนต์ 16px กับ 19.2px เท่ากับแค่ 1.2 เท่า จึงอึดอัดเกินไป ถ้าทำเป็น 24px จะดีขึ้นมาก
    อย่างไรก็ตาม ในสายตาผม ความสูงบรรทัดที่มากขึ้นดูไม่กระทบตารางหรือกราฟิกตัวอักษร ถ้าใส่การปรับแบบนี้ สไตล์ฟอนต์ความกว้างคงที่ก็ยังอยู่รอดได้ค่อนข้างดี
    แก้ไข: เหมือนจะเข้าใจประเด็นแล้ว มันทำลายแนวคิดกริดคงที่ของผู้เขียน ลองใส่ line-height: 24px ให้ element p แล้วเปิด “debug mode” ของผู้เขียนเพื่อดูกริดก็จะตรวจสอบได้
  • สำหรับการอ่าน ผมทนฟอนต์ความกว้างคงที่ไม่ไหวจริง ๆ เลยทำ bookmarklet ขึ้นมา เว็บไซต์นี้ทำงานได้ดีแค่เปลี่ยนแท็กข้อความทั่วไปเป็น sans-serif แต่ reading mode ทั้งหมดกลับทำให้ค่าฟอนต์ที่ชอบพังไปหมด
    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/
  • เทียบกับความอัดแน่นของคอมเมนต์ HN ที่นี่แล้วเป็นยังไง?
  • ปัญหาคือ ความสูงบรรทัด ที่แน่นเกินไป หรือเป็นข้อเท็จจริงที่ว่าฟอนต์ความกว้างคงที่อ่านยากกว่าฟอนต์ความกว้างแปรผันกันแน่
    เพราะคำที่ใช้ฟอนต์ความกว้างคงที่จะมี “รูปร่าง” คล้ายกันมากกว่าคำที่ใช้ฟอนต์ความกว้างแปรผัน
  • เห็นปุ๊บก็รู้สึกต่อต้านทันที

• OpenBSD เริ่มตั้งค่าฟอนต์คอนโซลเป็น Spleen มาตั้งแต่ไม่กี่ปีก่อน
  น่าเสียดายที่ไม่มีเวอร์ชัน TrueType
  https://github.com/fcambus/spleen

  • ใช้ไฟล์ OTF แทนไม่ได้เหรอ? ใน README บอกว่ามี ไฟล์ OTF อยู่ใน release tarball

• เอกสาร C64 ที่ยังมีชื่อเสียงในปัจจุบัน หรือที่เรียกว่า VIC article ถูกนำเสนอด้วยฟอนต์ความกว้างคงที่
  https://www.cebix.net/VIC-Article.txt
  ปัญหาหลักคือการแสดงผล
  บทความนี้ใช้ไดอะแกรมที่ต้องมีจุดอ้างอิงคงที่ในพื้นที่สองมิติ ดังนั้นฟอนต์ความกว้างคงที่จึงสำคัญมากในที่นี้
  บทความนี้เป็นหนึ่งในเอกสารอ้างอิงทางเทคนิคที่สำคัญที่สุดของ C64 และเอฟเฟกต์ technical demo 99% สามารถแยกย่อยออกมาเป็นทริกพื้นฐานที่อยู่ในนี้ได้

• กำลังคิดว่าจะเปลี่ยนฟอนต์เว็บไซต์ส่วนตัวเป็นฟอนต์ความกว้างคงที่
  มีใครรู้จักฟอนต์ความกว้างคงที่ที่ อ่านบทความยาว ๆ ได้ดี เป็นพิเศษไหม?
  ถ้ามีใน Google Fonts ก็ยิ่งดี

  • สำหรับการแสดงย่อหน้า ผมชอบ Drafting Mono: https://indestructibletype.com/Drafting/
    ไม่มีใน Google Fonts แต่ใช้ฟรี หรือเวอร์ชัน variable font ก็ราคาถูกมาก
  • IBM Plex Mono ค่อนข้างดีและไลเซนส์ก็สมเหตุสมผล มีใน Google Fonts และ repo อยู่ที่นี่: https://github.com/IBM/plex
  • นอกประเด็นนิดหนึ่ง แต่อยากให้ลองพิจารณาใช้ https://fontsource.org/ แทน Google Fonts ใช้ง่ายพอ ๆ กัน และอย่างน้อยก็ไม่มีการติดตามจาก Google