ฟอนต์พิกเซล 5x5 สำหรับหน้าจอขนาดเล็ก

• ฟอนต์แบบ monospaced ขนาดจิ๋วที่ออกแบบให้ใส่อักขระทุกตัวไว้ใน สี่เหลี่ยม 5 พิกเซล และวาดได้อย่างปลอดภัยบน กริด 6x6 เหมาะกับหน้าจอขนาดเล็กและสภาพแวดล้อมที่มีหน่วยความจำจำกัด
• ขนาด 5x5 ช่วยแก้ปัญหาการแสดง E, M, W ที่ทำได้ไม่ดีใน 4x4 และยังทำให้อักษร ตัวพิมพ์เล็ก ส่วนใหญ่เล็กกว่าตัวพิมพ์ใหญ่ 1 พิกเซล เพื่อให้ แยกแยะด้วยสายตา ได้ชัดเจน
• ฟอนต์ทั้งชุดมีขนาดเพียง 350 ไบต์ จึงเหมาะมากกับไมโครคอนโทรลเลอร์ 8 บิตอย่าง AVR128DA28 และให้ ประสิทธิภาพต่อพิกเซล สูงบนจอเล็กอย่าง 160x128 หรือ 128x64 OLED
• เมื่อนำไปเทียบกับ ฟอนต์เวกเตอร์ ที่เรนเดอร์ด้วยขนาดใกล้เคียงกัน ผลลัพธ์ของฟอนต์ทำมือขนาด 350 ไบต์กลับดีกว่า แม้ฝั่งเวกเตอร์จะใช้งาน anti-aliasing พร้อมโค้ดและข้อมูลฟอนต์ที่ใหญ่กว่ามาก
• ยังมีการทดลองกับขนาดที่เล็กลงอย่าง 3x5, 3x4, 3x3, 2x3, 3x2, 2x2 ด้วย โดย 3x5 ยังอ่านได้ค่อนข้างดี, 3x2 ดีกว่า 2x3 แต่ 2x2 นั้นแทบจะพังลงไปจนใกล้เคียง รหัสลับ มากกว่าจะเป็นฟอนต์

---

ฟอนต์พิกเซล 5x5

• ออกแบบให้อักขระทุกตัวอยู่ภายใน สี่เหลี่ยม 5 พิกเซล และวาดได้อย่างปลอดภัยบน กริด 6x6
  • พื้นฐานมาจาก 5x6 font-inline.h ของ lcamtuf และฟอนต์นี้ก็ได้รับอิทธิพลจากฟอนต์ 8x8 ของ ZX Spectrum
  • 5x5 ถูกกำหนดให้เป็นขนาดเล็กที่สุดที่ยังไม่ทำลายความอ่านง่าย
• 2x2 ใช้งานไม่ได้ และ 3x3 แม้จะทำได้ในทางเทคนิคแต่ก็อ่านยาก ส่วน 4x4 ไม่เพียงพอสำหรับการวาด E, M, W ให้ดี
  • ปัญหานี้ถูกแก้ได้ใน 5x5
• 5x5 ทำให้อักษร ตัวพิมพ์เล็ก ส่วนใหญ่มีขนาดเล็กกว่าตัวพิมพ์ใหญ่ 1 พิกเซล จึงแยกกันได้ทางสายตา
• ยังสามารถทำแบบ 4x5 และ 3x5 ที่แคบกว่าได้ แต่ต้องแลกกับความแยกแยะของ M, 0 ที่มีจุด, และ U/V/Y
• การทำให้อักขระทุกตัวมีความกว้างคงที่ช่วยให้เขียนโปรแกรมได้ง่ายขึ้น
  • ความยาวสตริงบนหน้าจอคำนวณได้เป็น 6 เท่า ของจำนวนอักขระเสมอ
  • ไม่ต้องกังวลว่า "8978" จะยาวกว่า "1111" จนทำให้เลย์เอาต์ล้น
• ขนาดรวมของฟอนต์มีเพียง 350 ไบต์ จึงเหมาะกับ ไมโครคอนโทรลเลอร์ 8 บิต อย่าง AVR128DA28
  • ในเนื้อหาระบุว่า AVR128DA28 มี RAM 16kB
  • ชิปแบบนี้ราคาถูก ใช้พลังงานต่ำ และทนทาน แต่มีทรัพยากรสำหรับงานกราฟิกไม่มาก
• แม้จอ 384x288 จะมีพิกเซลประมาณ 110,000 พิกเซล แต่ก็ใหญ่เกินกว่าจะเก็บไว้ในหน่วยความจำของ AVR ได้
  • ดังนั้นจอเล็กกว่าอย่าง 160x128 หรือ 128x64 OLED จึงใช้งานได้จริงและราคาย่อมเยากว่า
  • บนจอแบบนี้ ฟอนต์ที่วาดด้วยมือและ ใช้พิกเซลอย่างคุ้มค่า จะได้เปรียบ
• มีการเปรียบเทียบกับ ฟอนต์เวกเตอร์ ที่เรนเดอร์ในขนาดใกล้เคียงกันด้วย
  • ฟอนต์เวกเตอร์ดังกล่าวจริง ๆ แล้วมีความสูง 6 พิกเซล แต่ตัวอักษรแคบกว่า
  • แม้จะใช้ anti-aliasing, โค้ดหลายเมกะไบต์ และข้อมูลฟอนต์ 1MB ผลลัพธ์ก็ยังด้อยกว่าฟอนต์ทำมือขนาด 350 ไบต์

หน้าจอจริงและการทดลองขนาดที่เล็กลง

• พิกเซลจริงไม่ได้เป็นสี่เหลี่ยมจัตุรัสสมบูรณ์แบบ จึงทำให้ภาพบนหน้าจอไม่เหมือนกับภาพเรนเดอร์ด้านบนเสียทีเดียว
  • เอฟเฟกต์ เงาตกกระทบหลอก ที่เกิดจากซับพิกเซลถูกมองว่าเป็นข้อดี
  • บนจอขาวดำจะไม่มีเอฟเฟกต์นี้ แต่ก็ยังดูนุ่มนวลกว่าที่คาดไว้
• ระยะห่างระหว่างพิกเซลช่วยให้ e และ g ดูสมจริงขึ้น
  • จากผลนี้จึงมีการสำรวจต่อถึงความเป็นไปได้ของฟอนต์ที่เล็กกว่าเดิม
• 3x5 ไม่ใช่ความละเอียดต่ำสุดแบบไม่ต้องประนีประนอม แต่ยังอ่านได้ค่อนข้างดี
  • ที่ขนาดนี้มี glyph ทั้งหมด 32,768 แบบ และในนั้น 27,904 แบบ แยกจากกันได้
  • M, W, Q เสียเปรียบ แต่ O กับ 0 ยังแยกจากกันได้
  • อาจเป็นตัวเลือกเมื่อจำเป็นต้องใส่จำนวนคอลัมน์บนหน้าจอเพิ่มขึ้น 50%
• 3x4 ยังพออ่านได้ แต่ข้อจำกัดมากขึ้น
  • มี glyph 4,096 แบบ และในนั้น 3,392 แบบ แยกจากกันได้
  • ที่ขนาดนี้ไม่สามารถแยกตัวพิมพ์ใหญ่กับตัวพิมพ์เล็กได้ จึงเลือกสไตล์เดียวที่เหมาะที่สุดกับพื้นที่จำกัด
  • การแสดงตัวเลขก็แย่ลง แต่ยังพอใช้งานได้
• ใน 3x3 การสูญเสียด้านตัวเลขหนักที่สุด
  • มี glyph 512 แบบ และในนั้น 400 แบบ แยกจากกันได้
  • ตัวอักษรยังพอมองออกได้โดยไม่ซ้ำกัน
  • เมื่อแสดงบนฮาร์ดแวร์จริง ฟอนต์นี้ดีขึ้นอย่างมาก
• 2x3 เริ่มเข้าใกล้ระดับที่ฝืนเกินไป
  • มี glyph 64 แบบ และในนั้น 44 แบบ แยกจากกันได้
  • ตัวอักษรส่วนใหญ่ดูออกได้ยากและมีความซ้ำกันมาก
  • บรรทัดล่างสุดคือ "Hello World"
• 3x2 ซึ่งสลับอัตราส่วนกว้างยาวกลับกัน ดีกว่า 2x3 อย่างมาก
  • ขนาดนี้ก็ยังมี glyph 64 แบบ และในนั้น 44 แบบ แยกจากกันได้
  • เพราะตัวอักษรที่ต้องการรายละเอียดแนวนอน เช่น M, W, N, Q, G, P มีมากกว่าตัวที่ต้องการรายละเอียดแนวตั้งอย่าง E, F
  • บรรทัดล่างสุดคือ "you can probably read this" ซึ่งพออ่านได้ถ้าหรี่ตาหรือย่อภาพลง
• 2x2 คงไว้เพียงเพื่อใช้เป็นตัวเปรียบเทียบด้านความสมบูรณ์
  • ตามทฤษฎีแล้วภาพ 2x2 ที่เป็นไปได้มี 16 แบบ แต่หนึ่งแบบเป็นช่องว่าง และอีกห้าแบบเป็นเพียงการเลื่อนคัดลอก glyph อื่น จึงเหลือใช้งานจริง 10 แบบ
  • แม้จะพอแทนตัวเลขครบชุดได้ แต่ไม่ได้คล้ายรูปเดิมมากพอ จนใกล้เคียง รหัสลับ มากกว่าจะเป็นฟอนต์

[tangokorea]

ขอบคุณสำหรับข้อมูลดีๆ ครับ ชักอยากได้ขึ้นมาทันทีเลย

[tangokorea]

จะยัดภาษาเกาหลีลงไปตรงนี้ยังไงดี TT บรึ้ก

[GN⁺]

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

• ถ้าใช้ subpixel rendering แม้แต่ 1x5 ก็ยังพอเป็นไปได้ https://www.msarnoff.org/millitext/

  • พอลองดูด้วยตาตัวเองบน 1920x1200 HP Z24n G2 ของฉันและ 1920x1080 6-bit panel ของโน้ตบุ๊ก วิธีนี้ได้ผลดีกว่าที่คิดมาก จนน่าตกใจจริงๆ
    [2x5-HP-Z24n-G2] https://i.imgur.com/yLyrpfg.jpeg
    [1x5-HP-Z24n-G2] https://i.imgur.com/Z7kH005.jpeg
    [2x5-Innolux-N156HCA-GA3] https://i.imgur.com/F4Ypxwj.jpeg
    [1x5-Innolux-N156HCA-GA3] https://i.imgur.com/etkot5o.jpeg
    [1] https://jp.ext.hp.com/monitors/business/z_z24n_g2/
    [2] https://www.panelook.com/N156HCA-GA3__15.6__overview_33518.html
  • ฉันลองขยายภาพที่สร้างขึ้นบนมือถือดูแล้ว และก็ตกใจที่ ตัวอักษรอ่านออกได้จริงๆ https://storage.j0.hn/subpixelfont.png
    แถมยังได้รู้ไปพร้อมกันว่าหน้าจอฉันสกปรกมาก
  • ถ้าจะให้ยังอ่านง่าย สุดท้ายก็น่าจะต้องอย่างน้อย 2x5
  • แต่ก็มีเงื่อนไขว่าต้องดูหน้าจอในระยะใกล้มากจริงๆ

• 5x5 ค่อนข้างดี และ 3x5 ก็ไม่เลว แต่ทั้งคู่ยังไม่มีชุด ASCII ครบทั้งหมด
  ขนาดจริงเองก็มีภาพลวงตาอยู่เล็กน้อย เพราะถ้ารวมระยะห่างระหว่างตัวอักษรเข้าไปด้วย ก็แทบจะต้องใช้กริด 6x6 หรือ 4x6 อยู่ดี
  เพราะงั้นฉันเลยชอบ Spleen จาก https://github.com/fcambus/spleen มากพอสมควร
  มันมีฟอนต์ 5x8 ที่รองรับ ASCII ครบ และ glyph ส่วนใหญ่จริงๆ แล้วเป็นรูปแบบ 4x8 พร้อมระยะห่างแนวนอนรวมอยู่แล้ว
  ในโปรเจกต์ของฉัน ฉันแก้ให้ทุก glyph เป็น 4x8 ทั้งหมด และสุดท้ายก็เรนเดอร์ออกมาดูดีบนกริด 5x9 โดยยังรับประกันระยะห่างแนวนอนและแนวตั้ง 1 พิกเซลระหว่างตัวอักษรทุกตัวได้เสมอ

  • ในบรรดาโปรแกรมประมวลผลคำสำหรับ Apple II ช่วงต้นทศวรรษ 1980 ก็เคยมีของที่ใช้ ฟอนต์ 5x5 ในโหมดกราฟิกบนหน้าจอ 40 คอลัมน์ปกติ เพื่อทำให้ได้ 60 คอลัมน์จริงๆ และนั่นก็เป็นจุดขายด้วย
    ถ้าจะแก้ด้วยฮาร์ดแวร์ ก็แค่ซื้อ 80 column card มาใช้ข้อความ 80 คอลัมน์แบบจริงจังได้เลย เพียงแต่จอภาพต้องรองรับด้วย

• ฟอนต์จิ๋วมากๆ ส่วนใหญ่ ถ้าดูที่สเกล 1:1 แล้วพอจะให้อ่านผ่านๆ ได้ มักแย่มากจริงๆ
  ก่อนหน้านี้ตอนทำเกมม็อด ฉันต้องการฟอนต์ที่เล็กและแน่นมาก เลยลองใช้ทั้ง 3x3, 3x5, กระทั่ง 2x5 มาเยอะ แต่ทุกแบบอ่านยากมาก
  สุดท้ายฉันไปเจอ Gremlin-3x6 ของ zephram ซึ่งแม้จะสูงกว่าอีก 1 พิกเซล แต่แนวนอนก็ยังคอมแพ็กต์มาก
  ที่สำคัญคือตัวอักษรละตินมาตรฐานยังแยกความต่างกันได้ดี และอ่านได้พอสมควรโดยไม่ต้องขยายใหญ่มาก
  น่าเสียดายที่พอ zephram ลบบัญชี FontStruct ฟอนต์ทั้งหมดก็หายไปด้วย แต่ฉันเก็บสำเนาและ สัญญาอนุญาต CC0 เอาไว้ในที่เก็บม็อดของฉัน และดูการเรนเดอร์จริงได้จากภาพหน้าจอ
  [0] - https://fontstruct.com/fontstructions/show/1488093
  [1] - https://codeberg.org/janAkali/isaac-extended-icons-mod/src/branch/master/assets/fonts
  [2] - https://codeberg.org/janAkali/isaac-extended-icons-mod/media/branch/master/assets/screenshots/screenshot.png

  • ตอนนี้ [0] ขึ้น 404

• ฝั่ง อักษร CJK ก็เคยมีการถกเถียงคล้ายๆ กัน
  https://chinese.stackexchange.com/questions/16669/lowest-pixel-resolution-needed-to-support-chinese

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

  • ถ้าเป็นฉัน ฉันจะทำตัว t พิมพ์เล็กประมาณนี้
    x
    xxx
    x
    xx
  • ส่วนตัว l พิมพ์เล็ก ฉันก็คิดว่าน่าจะออกมาประมาณนี้มากกว่า
    xx
    x
    x
    x
    xx

• มีคนบอกว่า 4x4 ไม่พอสำหรับวาด E, M, W ให้ดี แต่จริงๆ แล้ว แม้แต่ 5x5 ก็ยังไม่พอจะวาด e ให้ดี
  ถ้าอยากให้ตัวพิมพ์เล็กเตี้ยกว่าตัวพิมพ์ใหญ่ อย่างน้อยต้องมีพิกเซลแนวตั้ง 6 จุด และถ้าจะใส่ descender ให้เหมาะสมด้วย อย่างน้อยต้องมี 7 จุด
  ถ้าจะเอาแบบเคร่งจริงๆ ให้ g กับ y พาดอยู่บน baseline พร้อมแยก descender แนวนอนได้ชัด 8 จุดจะดีกว่า แต่ในที่นี้ก็น่าจะพอประนีประนอมได้
  และในทางปฏิบัติ ถ้าจะให้มีช่องว่างที่มองเห็นได้ใต้ตัวอักษรและด้านข้าง สุดท้ายก็มักต้องใช้ขั้นต่ำ 8x6 พิกเซล ต่อตัวอักษร

  • ถ้าสามารถทำฟอนต์ให้เล็กได้ขนาดนั้น คุณสมบัติแรกที่ฉันน่าจะยอมทิ้งคือกฎที่ว่า ตัวพิมพ์เล็กต้องเตี้ยกว่าตัวพิมพ์ใหญ่
  • e ฝั่ง real pixels ในตัวอย่างกลับดูดีกว่าในสายตาฉัน
    สำหรับฉันมันอ่านออกเพราะพื้นที่ว่างด้านบนถูกเติมไปพอสมควร และถ้าอยู่ในประโยคยาวๆ ก็น่าจะเดาได้จากบริบท
    แน่นอนว่ามันไม่ได้สมบูรณ์แบบ และในตัวอย่างพิกเซลสะอาดๆ ที่ขยายด้านบน ความแปลกตาก็เห็นชัดกว่าอยู่แล้ว

• ถ้าไม่ใช้พิกเซลแค่สองสถานะ on/off แต่ใช้ grayscale หลายระดับ ก็จะทำข้อความที่ยังอ่านได้ในขนาดเล็กกว่านี้ได้
  แต่จุดสำคัญตรงนี้คือเป็น text ไม่ใช่ letters
  ถึงตัวอักษรแต่ละตัวจะเบลอเกินไป มนุษย์ก็ยังอ่านได้ด้วยการอนุมานจากบริบท
  วิธีนี้ถึงขั้นไม่จำเป็นต้องใช้ฟอนต์ที่ออกแบบมาเป็นพิเศษเลยด้วยซ้ำ
  ตัวอย่าง: https://imgur.com/a/text-80-characters-per-line-240-pixels-wide-AlYrnSS
  ที่นี่แม้จะนับระยะห่างระหว่างตัวอักษรรวมด้วยแล้ว ค่าเฉลี่ยก็ยังมีความกว้างเพียงประมาณ 3 พิกเซล ต่อตัวอักษร

• ระบบปฏิบัติการ LAP6 ของ LINC minicomputer มี ฟอนต์ 4x5 อยู่ในนั้น แต่ไม่มีตัวพิมพ์เล็ก

• มันทำให้ฉันนึกถึงความพยายามในอดีตที่จะทำ 80 คอลัมน์ด้วยซอฟต์แวร์บน C64
  แนวคิดคือใช้กริดพิกเซล 3x7 แต่กันไว้หนึ่งแถวกับหนึ่งคอลัมน์สำหรับระยะห่าง และมันก็ถูกใช้ในผลิตภัณฑ์เชิงพาณิชย์บางตัวจริงๆ
  https://www.pagetable.com/?p=901
  การทำชุดอักขระ 4×8 ให้ทั้งอ่านง่ายและดูดีไม่ใช่เรื่องง่าย และยังต้องมีระยะห่าง 1 พิกเซลระหว่างตัวอักษรด้วย ทำให้ความกว้างใช้งานจริงของตัวอักษรเหลือแค่ 3 พิกเซล
  เพราะงั้นตัวอย่าง M หรือ N เลยยากเป็นพิเศษ

• มีคนบอกว่าถ้ายอมทิ้ง M, dotted zero และยอมให้ U/V/Y แยกกันได้ไม่ชัด ก็พอจะทำ 4x5 หรือ 3x5 ได้ แต่ฉันมองว่า 3x5 ก็ใช้งานได้จริงพอแล้ว
  https://robey.lag.net/2010/01/23/tiny-monospace-font.html