Monaspace
(monaspace.githubnext.com)- Monaspace คือระบบฟอนต์ใหม่ที่ออกแบบมาเพื่อเพิ่ม การแสดงออกทางตัวพิมพ์ ให้มากขึ้นบนหน้าจอโค้ด โดยยังคงรักษากริดแบบความกว้างคงที่ไว้
- ฟีเจอร์หลักอย่าง Texture Healing จะปรับแก้ความไม่สมดุลของช่องว่างระหว่างคู่ตัวอักษรที่อยู่ติดกันด้วย glyph ทางเลือก เพื่อลดความต่างของความหนาแน่นในข้อความแบบ monospaced
- วิธีนี้คือการนำ contextual alternates ของ OpenType มาใช้กับฟอนต์สำหรับโค้ด ทำให้ใช้งานได้ในเอดิเตอร์ส่วนใหญ่โดยไม่ต้องมีปลั๊กอินเพิ่มเติม และยังมีการตั้งค่าสำหรับ Visual Studio Code ให้ด้วย
- Monaspace รองรับแกนความหนา 200~800, แกนเอียง 0~-11°, และแกนความกว้าง 100~125 รวมทั้งสามารถเปิดหรือปิด code ligatures แยกตามภาษาได้ผ่าน style set
- GitHub Next พัฒนาฟอนต์นี้ร่วมกับ Lettermatic ตั้งแต่ปี 2022 โดยตั้งใจจะขยายการแสดงผลโค้ดให้เป็นเครื่องมือการสื่อสารที่มีทางเลือกกว้างขึ้นสำหรับเครื่องมือพัฒนา
ระบบฟอนต์ที่ขยายขอบเขตของหน้าจอโค้ดแบบความกว้างคงที่
- Monaspace เป็น “superfamily” ของฟอนต์สำหรับโค้ด ที่มุ่งพัฒนาวิธีการแสดงโค้ดบนหน้าจอ
- โค้ดถูกแสดงด้วยฟอนต์แบบความกว้างคงที่มาตั้งแต่ยุคเริ่มต้นของ teletype และ Monaspace ต้องการคงกริดนี้ไว้พร้อมใส่ความหมายได้มากขึ้น
- เอดิเตอร์ในปัจจุบันมักส่งข้อมูลที่เกินกว่าการไฮไลต์ไวยากรณ์ด้วยสี ผ่านองค์ประกอบอินเทอร์เฟซอย่าง hover, เส้นใต้, หรือการตกแต่งกราฟิก
- Monaspace มอบ palette ที่แสดงออกได้มากขึ้น ในระดับฟอนต์ เพื่อให้โค้ดและเครื่องมือพัฒนานำไปใช้ได้
ข้อเสนอของ Copilot และตัวพิมพ์
- คำแนะนำโค้ดอย่าง Copilot สามารถมี น้ำเสียงทางตัวพิมพ์ ของตัวเองได้ผ่าน Monaspace
- ghost text อาจทำให้การพาร์สและประเมินโค้ดที่ถูกเสนอทำได้ยาก
- หากการแสดงออกของฟอนต์เองช่วยบอกได้ว่าส่วนไหนคือโค้ดที่ถูกเสนอ ก็จะทำให้แยกแยะชิ้นส่วนโค้ดที่ถูกเสนอได้ง่ายขึ้นแม้ในภายหลัง
ข้อจำกัดของฟอนต์แบบความกว้างคงที่ที่ Texture Healing ต้องการแก้ไข
- ฟอนต์แบบความกว้างคงที่ใส่ตัวอักษรทุกตัวลงในกล่องที่มีความกว้างเท่ากัน จึงทำให้ความหนาแน่นของข้อความไม่สม่ำเสมอ
- ตัวอักษรแคบอย่าง
l,iต้องใช้ serif ที่ขยายเกินจริงเพื่อเติมพื้นที่ในกล่อง แต่ถึงอย่างนั้นก็ยังเหลือช่องว่างมากเกินความจำเป็น - ตัวอักษรกว้างอย่าง
m,wถูกบีบอัดให้อยู่ในกล่องจนรูปร่างผิดเพี้ยน เส้นบางลง และพื้นที่ว่างภายในก็ถูกจำกัด - ข้อจำกัดเหล่านี้เป็นปัญหาเชิงโครงสร้างของฟอนต์แบบความกว้างคงที่ที่สืบทอดมาตั้งแต่ยุค teletype ในทศวรรษ 1960
วิธีการทำงานของ Texture Healing
- Texture Healing จะค้นหาคู่ตัวอักษรที่อยู่ติดกันซึ่งฝั่งหนึ่งมีพื้นที่ไม่พอและอีกฝั่งมีพื้นที่เหลือ แล้วสลับ glyph ใหม่
- ตัวอักษรแคบจะเปลี่ยนเป็น glyph ทางเลือกที่ยกพื้นที่ว่างบางส่วนให้ตัวข้างเคียง ส่วนตัวอักษรกว้างจะเปลี่ยนเป็น glyph ทางเลือกที่ขยายไปจนถึงขอบกล่อง
- ฟีเจอร์นี้พัฒนาด้วย contextual alternates ของ OpenType
- contextual alternates มักใช้ในอักษรอาหรับหรือฟอนต์ลายมือ ซึ่งรูปร่าง glyph จะเปลี่ยนไปตามตัวอักษรรอบข้าง
- Monaspace นำเทคนิคนี้มาใช้กับฟอนต์โค้ดแบบความกว้างคงที่
- ผลลัพธ์ที่ได้ยังคงเป็นข้อความที่ยึดตาม กริดแบบความกว้างคงที่
- วิธีเปิด Texture Healing ใน Visual Studio Code ดูได้จากเอกสาร Monaspace
แกนฟอนต์และสไตล์
- แกนความหนา ของ Monaspace มีตั้งแต่ 200 ถึง 800
- 200: Extra Light
- 300: Light
- 400: Regular
- 500: Medium
- 600: Semibold
- 700: Bold
- 800: ExtraBold
- แกนเอียง มีตั้งแต่ 0 ถึง -11°
- 0: Normal
- -5.5°: จุดกึ่งกลางที่บางตัวอักษรเริ่มเปลี่ยนจาก oblique ไปเป็นรูปแบบ italic
- -11°: Italic
- แกนความกว้าง มีตั้งแต่ 100 ถึง 125
- 100: Normal
- 112.5: Semiwide
- 125: Wide
- Monaspace มีชื่อสายฟอนต์อย่าง Neon, Argon, Xenon, Radon, และ Krypton
Code ligatures และการตั้งค่า OpenType
- Monaspace มี code ligatures สำหรับภาษาโปรแกรมหลากหลายภาษา
- ligature ถูกจัดเป็น style set ทำให้ผู้ใช้เลือกเปิดหรือปิดเฉพาะชุดที่ต้องการได้
- แต่ละ style set ถูกออกแบบโดยอิงความต้องการของภาษานั้น ๆ แบบคร่าว ๆ
ss01: มี ligature สำหรับลำดับอักขระที่พบได้บ่อยใน JavaScriptss05: มี ligature สำหรับโอเปอเรเตอร์ของ F#
- ยังมีฟีเจอร์ OpenType เพิ่มเติมด้วย
calt: ใช้เปิด Texture Healingliga: ใช้ปรับระยะของอักขระซ้ำอย่าง///,||และออกแบบไม่ให้ทำงานในลำดับที่ยาวกว่าอย่าง////
- ใน Visual Studio Code สามารถเปิดใช้งานฟีเจอร์และ style set ที่ต้องการได้ผ่าน
editor.fontLigaturesในsettings.json
การพัฒนาและการเผยแพร่
- Monaspace ถูกสร้างขึ้นโดยมีเป้าหมายเพื่อปรับปรุงการแสดงโค้ดสำหรับนักพัฒนาทุกคน
- GitHub Next เริ่มโครงการนี้ในปี 2022 และพัฒนาฟอนต์ร่วมกับ Lettermatic
- รายชื่อผู้มีส่วนร่วม เอกสาร และไฟล์ฟอนต์ ดูได้ที่ Monaspace repo
- ดาวน์โหลดได้จาก GitHub repository
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
ฟีเจอร์ Texture Healing ใช้ความสามารถของ OpenType ได้อย่างชาญฉลาดมาก ทำให้ชุดตัวอักษรฟอนต์ monospace ที่มีปัญหาดูดีขึ้นมาก โดยไม่ทำให้กริดเสียเลย
ถ้าเป็นวิธีง่าย ๆ ก็คงสร้าง ligature ให้คู่ตัวอักษรที่จัดการยากอย่าง
mi,lmแต่ที่นี่ดูเหมือนจะเลือก glyph ทางเลือก ที่เติมพื้นที่ในความกว้างคงที่ให้ต่างกันตามตัวอักษรรอบข้างในการใช้งานจริงค่อนข้างยาก เพราะความกว้างของตัวอักษรเปลี่ยนไปตามตัวอักษรถัดไป ทำให้ข้อความกระตุกระหว่างพิมพ์ เวลาอ่านดูดี แต่เวลาเขียนแย่มาก
Riley Cran ผู้คิดเทคนิคนี้ขึ้นเป็นส่วนหนึ่งของโปรเจกต์นี้ และทีมทั้งหมดของ https://lettermatic.com ยอดเยี่ยมมาก
เช่นในตัวอย่างพื้นฐาน
time_limitตัวmตัวที่สองมีiอยู่ทั้งสองข้าง จึงมีพื้นที่ให้ “ขยาย” มากกว่า และดูเหมือนกว้างกว่าตัวmตัวแรกอย่างชัดเจน ไม่แน่ใจว่านี่ดีหรือเปล่าtexture healing นี้ก็ทำลายกริดเซลล์อักขระที่สมบูรณ์แบบอยู่แล้ว ดังนั้นในบางแง่มันเหมือนมีข้อเสียของทั้งสองฝั่ง
ผมมอง ligature หรู ๆ ในทำนองคล้ายกันอยู่บ้าง ถ้าต้องการก็ใช้ตัวอักษรจริงในซอร์สโค้ดได้ และ Unicode ก็รองรับกันอย่างแพร่หลาย Raku ทำแบบนั้น แต่จะเปล่งประกายจริง ๆ ต้องมีการจัดวางตัวอักษรที่ดีกว่า รวมถึงฟอนต์ความกว้างแปรผันด้วย
ตอนแรกคิดแค่ว่า “เป็นตระกูลฟอนต์ monospace อีกตัวหนึ่ง ดูดีนะ” แต่พอเห็น texture healing แล้วก็อยากลองใช้ขึ้นมาทันที
ชอบไอเดียการใช้ฟอนต์สไตล์ต่างกันตามการใช้งานมาก เพียงแต่ผมใช้เทอร์มินัลเป็นหลัก เลยไม่รู้ว่าเทอร์มินัลตัวไหนรองรับสิ่งนี้บ้าง และตัวแก้ไขข้อความบน command line ก็คงต้องรองรับด้วย ถึงอย่างนั้นก็ยังคิดว่าเป็นไอเดียที่ยอดเยี่ยม
ESC[<10-19>mคือ escape sequence สำหรับเลือกฟอนต์ 0~9ใช้งานได้จริงหรือไม่นั้นเป็นอีกเรื่อง ผมใช้ Alacritty อยู่ แต่หาไม่เจอว่ารองรับหรือไม่ และลองเองแล้วก็ไม่ได้ผล
อยากรู้ว่าคนอื่นมองตัวอย่าง Mix & Match อย่างไร
Radon ซึ่งเป็นแนวลายมือ จริง ๆ แล้วดูเหมือน italic จึงเข้ากับฟอนต์อื่นได้ดี แต่ที่เหลือมี metrics ฯลฯ คล้ายกันเกินไป ทำให้ตัวอย่างอย่าง “สตริงเอกสารที่ดูมีอำนาจน่าเชื่อถือ” หรือ “เสียงของ Copilot” แยกแยะได้ค่อนข้างยาก
ผมหาทางเลือกแบบเปิดของ Operator Mono มานานแล้ว และเพราะ Mix & Match ในที่สุดก็รู้สึกว่านี่อาจเป็นทางเลือกนั้นได้
คงมีคนไม่ชอบ แต่ส่วนตัวแล้วอยากลองใช้
รูปแบบอื่น ๆ ไม่แตกต่างกันพอที่จะสื่อข้อมูลได้
มี ligature ใส่มาค่อนข้างเยอะ แต่สำหรับผมยังไม่พอ ตอนนี้
!=กับ<=เป็นพื้นฐานไปแล้ว และผมยังคอยสังเกตอยู่เรื่อย ๆ ว่า Fira Code ดีแค่ไหนที่ปรับความสูงของ*ใน*ptrให้ตรงกัน หรือจัด:ให้อยู่ตรงกลางในX:Yหรือยกxใน0xFFขึ้นเกือบจะชอบรูปร่างของรูปแบบ Krypton แล้ว แต่ขีดขวางของ
tตัวพิมพ์เล็กอยู่ต่ำกว่าความสูงของตัวอักษรอย่างcตัวพิมพ์เล็กมากเกินไป ดังนั้นตอนนี้คงใช้ Fira Code ต่อไป และตั้งใจว่าจะกลับมาดูอีกครั้งหลังจากมีฟีดแบ็กจากผู้ใช้ผ่านไปสักหนึ่งปีว่าอะไรเปลี่ยนไปบ้าง*สองตัวใน/**ไม่ตรงกันเห็นชัดเป็นพิเศษในตัวอย่างอย่าง
// What if tentative ideas looked handwritten?และ/** * What if docstrings looked authoritative? */ไอเดียดีนะ แต่สงสัยว่าทำไมเราไม่ค่อยเห็นฟอนต์แคบ ๆ แบบ PragmataPro มากกว่านี้
ผมใช้มันมาเกือบ 10 ปีแล้ว และอยากให้มีตัวเลือกในแนวนี้มากขึ้น แต่ดูเหมือนไม่มีใครอยากทำให้แคบถึงระดับนั้น Berkeley Graphics เคยบอกใบ้เรื่องเวอร์ชันแคบของ Berkeley Mono มาเกือบปีแล้ว แต่ก็ยังไม่มีอะไรเกิดขึ้น
Monaspace ตรงนี้ก็มีสไลเดอร์ความกว้างเหมือนกัน แต่รู้สึกว่าจุดเริ่มต้นคือ “กว้างกว่า PragmataPro” แล้วปลายทางคือ “กว้างแบบไร้เหตุผล” สงสัยว่าทำไมไม่ทำให้เลื่อนลงไปทางเวอร์ชันแคบบ้าง
Iosevka ตัวพื้นฐานใกล้เคียงอยู่ แต่ระยะบรรทัดใหญ่กว่ามาก โชคดีที่ปรับแต่งให้แทบเหมือนกันได้โดยตั้งค่า
leading = 1110ค่านี้เจอจากการลองผิดลองถูกตอนตามหาฟอนต์ที่แคบที่สุด ผมพบว่า Quinze คือคำตอบ มันแคบกว่า Iosevka หรือ M+ ประมาณ 20% ผมหาข้อมูลเทียบกับ PragmataPro แบบง่าย ๆ ไม่เจอ แต่ถ้า Iosevka เป็นการตีความ PragmataPro แบบฟรี Quinze ก็น่าจะยิ่งแคบกว่า
จริง ๆ แล้ว Quinze แคบเกินไปด้วยซ้ำ พอผมบังคับให้ใช้กับข้อความ fixed-width ทั้งหมดในเบราว์เซอร์ แทนที่จะอ่านง่ายขึ้นกลับแย่ลง เพราะที่ความสูงเท่ากันมันดูเล็กกว่าฟอนต์ “ปกติ” มาก ในสภาพแวดล้อมการเขียนโค้ด ผมใช้โดยเพิ่มขนาดฟอนต์ ซึ่งเข้ากับความกว้างที่แคบได้ดี
ข้อเสียคือ Quinze มินิมัลมาก แทบมีแค่ ASCII ไม่มี ligature และปรับแต่งไม่ได้ ผมไม่ได้รำคาญจุดเหล่านั้นเท่าไร
แต่ก็แคบได้ตามที่ต้องการอยู่
https://mplusfonts.github.io/
ผมใช้ “Bell MT” แทน Times ในเบราว์เซอร์ และใช้เป็นฟอนต์ความกว้างแปรผันใน emacs Org mode ด้วย มันก็ดีอยู่ แต่ถ้ามีเวอร์ชันที่ใหญ่และแคบกว่านี้ก็คงดี
อีกฟอนต์ fixed-width แบบแคบที่ดีตัวหนึ่งคือ “The Sans Mono Condensed” ซึ่งโด่งดังเพราะหนังสือ O’Reilly ยุคแรก ๆ ภายหลัง O’Reilly เปลี่ยนไปใช้ฟอนต์ fixed-width ตัวอื่นแล้ว ข้อเสียคือมีแค่ชุดอักขระตะวันตก แต่ผมชอบมันมาก
สัญลักษณ์ของ Radon บนหน้านี้เป็น Rd แล้วรู้สึกขัดใจ ถ้าเป็น Radon ควรเป็น Rn
Radium คือ
Ra, Radon คือRnทำให้ต้องกลับไปตรวจดูว่ามีธาตุอื่นที่ขึ้นต้นด้วยRและมีdอยู่ในชื่อจริง ๆ ไหมRhเนื่องจากไม่ได้ตั้งค่า mono flag ไว้ ผมเลยต้องลองใช้ GTK2 gvim เพื่อโหลดฟอนต์
ผลลัพธ์ของ
% ttfmono MonaspaceArgon-Regular.otfคือmonospaced flag = 0และแสดงว่า0 = variable-width, otherwise = monospacedน่าเสียดายที่ดูเหมือน flag นี้ทำให้ ligature ไม่ถูกเปิดใช้
แต่ใน vim ที่รันบน
stที่แพตช์แล้ว ผมเห็น ligature และ texture healing ได้ และชอบมาก ตอนพิมพ์ บรรทัดขยับเพียงเล็กน้อยมาก ๆ และเมื่อเคอร์เซอร์ผ่านไป ก็ไม่เหลือภาพค้างเพราะตัวอย่างเช่นmที่กว้างขึ้น ออกแบบมาสำหรับโค้ดได้ดีจริง ๆถ้าขอฟีเจอร์ได้อย่างหนึ่ง อยากให้เลือกบางรูปแบบได้ เช่น ใส่แบ็กสแลชในเลข 0 แบบเหลี่ยม หรือให้เหลือ
!ไว้ใน ligature ของ!=ตัวอย่างสิ่งที่หมายถึงดูได้ที่นี่: https://github.com/be5invis/Iosevka/blob/main/doc/stylistic-...https://st.suckless.org/patches/ligatures/
ผมใช้เวอร์ชันที่ปล่อยวันนี้ ดังนั้นอาจเพิ่งแก้ไปเมื่อไม่นานนี้ก็ได้
ต้องเปิดเช็กบ็อกซ์ “Show all fonts” อย่างชัดเจน ถึงจะเห็นฟอนต์ที่ “ไม่ใช่ fixed-width” ด้วย
บนระบบสมัยใหม่ ตอนนี้ฟอนต์สำหรับโค้ดน่าจะก้าวพ้น ฟอนต์ fixed-width ได้แล้ว
ผมเคยแนะนำที่นี่หลายครั้ง แต่ผมใช้ Input Sans ซึ่งเป็นฟอนต์เขียนโค้ดแบบ proportional
https://input.djr.com
ดูเหมือนว่าฟอนต์นี้อาจทำให้หา typo ได้ยากขึ้น
เวลาใช้ Vim ผ่าน SSH จะใช้ fixed-width ต่อไปก็ได้ แต่ถึง Neovim จะทำให้มีฟรอนต์เอนด์เกิดขึ้นเยอะแล้ว ก็แทบไม่เห็นตัวไหนรองรับฟอนต์ proportional เลย ตัวที่รองรับก็มักช้าจนใช้งานแล้วทรมาน
>=เป็น≥ไหม? ผมลองดูตัวอย่างบนเว็บจากมือถือ ซึ่งอาจเป็นข้อจำกัดของ Android Firefox ก็ได้อ้างอิงว่า ligature คือแบบนี้: https://fonts.google.com/knowledge/glossary/ligature
ผมมักสับสนเสมอว่าในฟอนต์แบบนี้ เลข 0 ที่มีจุด กลายเป็นเหมือนมาตรฐานได้อย่างไร ผมมักสับสนกับเลข 8 ตลอด เลยชอบเลข 0 แบบมีขีดทับมากกว่าเยอะ
ถ้ามีรูปแบบนั้น ผมก็อยากลองใช้ฟอนต์นี้แน่นอน
นักออกแบบฟอนต์อาจเน้นด้านนูนของเลข 0 ที่มีจุดกับด้านเว้าของ
8เพื่อแยกให้เห็นต่างกันทางสายตาได้ แต่ไม่รู้ว่าฟอนต์นี้ทำแบบนั้นหรือเปล่าTexture healing เป็นไอเดียที่ฉลาดและงดงามจริงๆ
อยากลองนำไปใช้กับลายมือภาษาจีนที่มักเขียนแบบความกว้างคงที่ด้วย ตัวอักษรที่พบได้บ่อยแต่แน่นมาก โดยเฉพาะอักษรจีนตัวเต็มอย่าง
邊鐵餐廳臺藥機麵顧露樓幫讓น่าจะได้ประโยชน์มากถ้าได้พื้นที่เพิ่มเพื่อขยายให้กว้างขึ้น