Monaspace

 (monaspace.githubnext.com)
1 điểm bởi GN⁺ 2023-11-10 | 1 bình luận | Chia sẻ qua WhatsApp
  • Monaspace là một hệ thống phông chữ mới nhằm đưa biểu đạt typography phong phú hơn vào màn hình mã nguồn trong khi vẫn giữ lưới monospace
  • Tính năng cốt lõi Texture Healing điều chỉnh sự mất cân bằng khoảng trống giữa các cặp ký tự liền kề bằng glyph thay thế, giúp giảm chênh lệch mật độ trong văn bản monospace
  • Cách làm này áp dụng contextual alternates của OpenType cho phông chữ dùng cho code; có thể dùng trong hầu hết trình soạn thảo mà không cần plugin riêng, và cũng có cấu hình cho Visual Studio Code
  • Monaspace có các trục độ đậm 200~800, độ nghiêng 0~-11°, độ rộng 100~125, và có thể bật/tắt code ligature theo từng style set cho từng ngôn ngữ
  • GitHub Next đã phát triển phông chữ này cùng Lettermatic từ năm 2022, với mục tiêu mở rộng hiển thị code thành một phương tiện biểu đạt rộng hơn mà công cụ phát triển có thể tận dụng

Hệ thống phông chữ mở rộng màn hình code monospace

  • Monaspace là một “superfamily” phông chữ dành cho code, tập trung vào việc cải tiến cách hiển thị code trên màn hình
  • Từ thời kỳ đầu của teletype, code đã được hiển thị bằng phông chữ monospace; Monaspace muốn giữ lưới đó trong khi chứa được nhiều ý nghĩa hơn
  • Các trình soạn thảo hiện nay thường truyền tải thông tin vượt ra ngoài tô sáng cú pháp bằng màu sắc thông qua các yếu tố giao diện như hover, gạch chân và trang trí đồ họa
  • Monaspace cung cấp ở cấp độ phông chữ một bảng biểu đạt phong phú hơn mà code và công cụ phát triển có thể tận dụng

Gợi ý Copilot và typography

  • Các gợi ý code như Copilot có thể có một giọng nói typography riêng thông qua Monaspace
  • Ghost text có thể khiến việc phân tích cú pháp và đánh giá code được đề xuất trở nên khó khăn
  • Nếu chính cách thể hiện của phông chữ cho thấy phần nào là code được đề xuất, các đoạn code được đề xuất cũng sẽ dễ phân biệt hơn về sau

Giới hạn của phông chữ monospace mà Texture Healing nhắm tới

  • Phông chữ monospace đặt mọi ký tự vào một ô có cùng chiều rộng, khiến mật độ văn bản không đồng đều
  • Các ký tự hẹp như l, i cần serif được phóng đại để lấp đầy ô, nhưng vẫn còn nhiều khoảng trống hơn mức cần thiết
  • Các ký tự rộng như m, w bị nén trong ô, làm méo hình dạng, nét mảnh đi và khoảng trống bên trong cũng bị hạn chế
  • Những ràng buộc này là vấn đề cấu trúc của phông chữ monospace kéo dài từ thời teletype những năm 1960

Cách Texture Healing hoạt động

  • Texture Healing tìm các cặp ký tự liền kề trong đó một ký tự thiếu không gian và ký tự kia thừa không gian, rồi thay thế glyph
  • Ký tự hẹp được đổi thành glyph thay thế nhường một phần khoảng trống cho ký tự bên cạnh, còn ký tự rộng được đổi thành glyph thay thế mở rộng tới mép ô
  • Tính năng này được triển khai bằng contextual alternates của OpenType
    • contextual alternates thường được dùng trong chữ Ả Rập hoặc phông chữ viết tay, nơi hình dạng glyph thay đổi tùy theo ký tự xung quanh
    • Monaspace áp dụng kỹ thuật này cho phông chữ monospace dùng cho code
  • Văn bản kết quả vẫn tuân theo lưới monospace
  • Có thể xem cách bật Texture Healing trong Visual Studio Code tại tài liệu Monaspace

Trục phông chữ và kiểu dáng

  • Trục độ đậm của Monaspace được cung cấp từ 200 đến 800
    • 200: Extra Light
    • 300: Light
    • 400: Regular
    • 500: Medium
    • 600: Semibold
    • 700: Bold
    • 800: ExtraBold
  • Trục độ nghiêng được cung cấp từ 0 đến -11°
    • 0: Normal
    • -5.5°: Điểm giữa nơi một số ký tự chuyển từ dạng oblique sang dạng italic
    • -11°: Italic
  • Trục độ rộng được cung cấp từ 100 đến 125
    • 100: Normal
    • 112.5: Semiwide
    • 125: Wide
  • Monaspace bao gồm các tên họ phông như Neon, Argon, Xenon, Radon, Krypton

Code ligature và thiết lập OpenType

  • Monaspace bao gồm code ligature cho nhiều ngôn ngữ lập trình khác nhau
  • Ligature được tổ chức thành các style set, nên người dùng có thể chỉ bật hoặc tắt những set mình muốn
  • Mỗi style set được thiết kế đại khái dựa trên nhu cầu của một ngôn ngữ cụ thể
    • ss01: Bao gồm ligature cho các chuỗi ký tự thường thấy trong JavaScript
    • ss05: Cung cấp ligature cho toán tử F#
  • Các tính năng OpenType bổ sung cũng được cung cấp
    • calt: Kích hoạt Texture Healing
    • liga: Tùy chỉnh khoảng cách cho các ký tự lặp như ///, ||, và được thiết kế để không kích hoạt bên trong các chuỗi dài hơn như ////
  • Trong Visual Studio Code, kích hoạt bằng cách chỉ định các tính năng và style set mong muốn trong editor.fontLigatures của settings.json

Sản xuất và phân phối

  • Monaspace được tạo ra với mục tiêu cải thiện hiển thị code cho mọi nhà phát triển
  • GitHub Next bắt đầu công việc này vào năm 2022 và phát triển phông chữ cùng Lettermatic
  • Danh sách người đóng góp, tài liệu và tệp phông chữ có thể xem tại Monaspace repo
  • Có thể tải xuống từ kho GitHub

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-11-10
Ý kiến trên Hacker News

  • Tính năng Texture Healing sử dụng các tính năng OpenType rất khéo léo, làm cho những tổ hợp phông chữ monospace có vấn đề trở nên dễ nhìn hơn nhiều mà không hề phá vỡ lưới
    Nếu theo cách đơn giản thì sẽ tạo ligature cho các cặp chữ khó như mi, lm, nhưng ở đây có vẻ như nó chọn glyph thay thế để lấp đầy khác nhau bên trong chiều rộng cố định tùy theo các chữ xung quanh

    • Commit Mono cũng làm điều tương tự và gọi là Smart kerning. Chi tiết có thể xem tab “04 Intelligent” tại https://commitmono.com/
      Thực tế thì khó dùng. Độ rộng ký tự thay đổi tùy theo ký tự theo sau, nên văn bản bị giật khi đang nhập. Khi đọc thì đẹp, nhưng khi viết thì rất tệ
    • Đây thật sự là một kỹ thuật thông minh. Điều đáng ngạc nhiên hơn là chuyện này đã có thể làm từ rất lâu rồi mà không ai nghĩ ra
      Riley Cran, người đã nghĩ ra kỹ thuật này như một phần của dự án, cùng toàn bộ đội ngũ https://lettermatic.com thật đáng nể
    • Tôi không thấy thuyết phục lắm. Bật tắt vài checkbox là bắt đầu thấy sự không nhất quán
      Ví dụ trong time_limit ở ví dụ mặc định, chữ m thứ hai có i ở cả hai bên nên có thêm không gian để “phình ra”, vì vậy trông rõ ràng rộng hơn chữ m đầu tiên. Tôi không chắc đây có phải điều tốt hay không
    • Nhiều người ở đây khen texture healing, nhưng với tôi nó trông như một giải pháp nửa vời. Tại sao với tư cách cộng đồng, chúng ta lại ngần ngại áp dụng phông chữ có độ rộng biến thiên đến vậy?
      Texture healing này cũng đã phá vỡ lưới ô ký tự hoàn hảo, nên ở một khía cạnh nào đó, nó có cảm giác mang nhược điểm của cả hai bên
      Tôi cũng nhìn các ligature hào nhoáng theo cách tương tự ở một mức độ nào đó. Có thể dùng ký tự thật trong mã nguồn, và Unicode được hỗ trợ rộng rãi. Raku làm như vậy, nhưng để thật sự tỏa sáng thì cần dàn chữ tốt hơn, bao gồm cả phông chữ có độ rộng biến thiên

  • Ban đầu tôi chỉ nghĩ “lại thêm một họ phông monospace nữa, trông cũng đẹp”, nhưng sau khi thấy texture healing thì rất muốn thử dùng
    Tôi rất thích ý tưởng dùng các kiểu phông khác nhau cho từng mục đích. Tuy nhiên vì tôi chủ yếu dùng terminal nên không biết terminal nào hỗ trợ việc này, và có lẽ trình soạn thảo văn bản dòng lệnh cũng phải hỗ trợ. Dù vậy tôi vẫn thấy đây là một ý tưởng tuyệt vời

    • Về lý thuyết, nếu dựa trên xterm thì đáng lẽ có thể làm được. ESC[<10-19>m là escape sequence để chọn phông 0~9
      Còn thực tế có chạy hay không lại là chuyện khác. Tôi dùng Alacritty nhưng không tìm thấy thông tin hỗ trợ, và tự thử cũng không có kết quả

  • Tôi tò mò mọi người nhìn ví dụ Mix & Match như thế nào
    Radon, kiểu giống chữ viết tay, thực chất trông như italic nên phối khá hợp với các phông khác. Nhưng các kiểu còn lại có metric quá giống nhau, khiến các ví dụ như “chuỗi tài liệu có thẩm quyền” hay “giọng Copilot” khá khó phân biệt

    • Chính Mix & Match khiến tôi quyết định sẽ thử phông này. Tôi đã dùng Operator Mono nhiều năm vì italic thật sự của nó
      Từ lâu tôi đã tìm một lựa chọn thay thế mở cho Operator Mono, và nhờ Mix & Match, cuối cùng tôi thấy đây có thể là lựa chọn đó
    • Đây là suy nghĩ xuất hiện ngay trước cả khi tôi cuộn trang xuống. Chú thích viết tay rất hay, và trở thành một yếu tố phân biệt nữa giúp giảm gánh nặng khi lướt qua mã
      Chắc sẽ có người không thích, nhưng cá nhân tôi muốn thử dùng
    • Khi lướt qua các mẫu, tôi thậm chí không nhận ra trong hộp mẫu mã có gì thay đổi cho đến khi tới biến thể Radon
      Các biến thể khác không đủ khác biệt để truyền tải thông tin
    • Tôi không biết cách thiết lập các phông khác nhau. Đây là điều đầu tiên tôi muốn thử, nhưng không tìm ra cách. Có phải tôi đang bỏ sót điều gì hiển nhiên không?
    • Tôi rất thích ý tưởng này. Nó đã được hỗ trợ ở đâu đó chưa, hay là dành cho tương lai?

  • Có khá nhiều ligature, nhưng với tôi vẫn chưa đủ. Giờ đây != và <= đã là cơ bản, và tôi cứ nhận ra Fira Code làm tốt đến mức nào khi căn chiều cao của * trong *ptr, đặt : ở giữa trong X:Y, hoặc nâng x trong 0xFF
    Tôi suýt thích hình dáng của biến thể Krypton, nhưng nét ngang của chữ thường t thấp hơn quá nhiều so với chiều cao của các chữ như chữ thường c. Vì vậy hiện tại có lẽ tôi vẫn sẽ tiếp tục dùng Fira Code, và sẽ quay lại xem sau khoảng một năm kể từ khi có phản hồi người dùng thì đã thay đổi những gì

    • Với một trang chủ làm ví dụ, việc hai dấu * trong /** bị lệch ở ví dụ trên trang được liên kết trông khá gượng
      Đặc biệt dễ thấy trong các ví dụ như // What if tentative ideas looked handwritten? và /** * What if docstrings looked authoritative? */

  • Ý tưởng thì hay, nhưng tôi thắc mắc tại sao lại không thấy nhiều phông chữ hẹp như PragmataPro hơn
    Tôi đã dùng nó gần 10 năm rồi và rất muốn có thêm lựa chọn trong mảng này, nhưng có vẻ không ai muốn làm hẹp đến mức đó. Berkeley Graphics đã úp mở về một phiên bản hẹp của Berkeley Mono gần 1 năm nay, nhưng vẫn chưa có gì xảy ra
    Ở Monaspace này cũng có thanh trượt độ rộng, nhưng cảm giác điểm bắt đầu đã là “rộng hơn PragmataPro”, còn điểm cuối thì đi tới mức “rộng một cách lố bịch”. Tôi thắc mắc tại sao họ không làm cho nó có thể giảm xuống cả phía phiên bản hẹp

    • Hoàn toàn đồng ý. Tôi dùng PragmataPro hằng ngày, và mọi thứ khác đều có cảm giác quá rộng
      Iosevka mặc định khá gần, nhưng khoảng cách dòng lớn hơn nhiều. May là có thể tùy chỉnh gần như giống hệt bằng cách đặt leading = 1110 trong cấu hình. Tôi tìm ra giá trị này bằng thử-sai
    • Đã thử Quinze chưa? https://www.programmingfonts.org/#quinze
      Khi tìm phông chữ hẹp nhất, tôi nhận ra Quinze là câu trả lời. Nó hẹp hơn Iosevka hay M+ khoảng 20%. Tôi không tìm được tài liệu so sánh trực tiếp với PragmataPro, nhưng nếu Iosevka là một cách diễn giải miễn phí của PragmataPro thì Quinze chắc cũng hẹp hơn
      Thực tế Quinze hẹp đến mức khi tôi ép dùng nó cho toàn bộ văn bản monospace trong trình duyệt, khả năng đọc không tốt lên mà còn tệ đi. Vì ở cùng một chiều cao, nó trông nhỏ hơn nhiều so với phông “bình thường”. Trong môi trường lập trình thì tôi tăng cỡ chữ lên, và điều đó hợp với bề ngang hẹp
      Nhược điểm là Quinze rất tối giản. Gần như chỉ có ASCII, không có ligature và cũng không tùy chỉnh được. Cá nhân tôi không thấy những điểm đó phiền
    • Iosevka cũng khá hẹp và phổ biến. Không biết có đúng tiêu chí bạn muốn không, nhưng đáng để xem qua
    • Tôi vừa biết đến M+, và khá thích biến thể “60”. Độ rộng mặc định 50 thì với tôi quá hẹp, và theo gu của tôi biến thể 50 có vẻ giảm khả năng đọc
      Dù vậy nó có thể hẹp đúng như bạn muốn
      https://mplusfonts.github.io/
    • Nhân nói về phông hẹp, có ai gợi ý phông serif hẹp nào ổn không? Trả phí hay miễn phí đều được
      Tôi đang dùng “Bell MT” thay cho Times trong trình duyệt, và cũng dùng làm phông biến độ rộng trong Org mode của emacs; nó tốt, nhưng nếu có phiên bản to hơn và hẹp hơn thì hay
      Ngoài ra một phông monospace hẹp tốt nữa là “The Sans Mono Condensed”, nổi tiếng nhờ những cuốn sách O’Reilly thời kỳ đầu. Về sau O’Reilly đã đổi sang phông monospace khác. Nhược điểm là nó chỉ có bộ ký tự phương Tây, nhưng tôi từng rất thích nó

  • Ký hiệu Radon trên trang đang là Rd khiến tôi thấy khó chịu. Nếu là Radon thì phải là Rn
    Radium là Ra, Radon là Rn, và tôi đã phải kiểm tra lại xem có nguyên tố nào khác bắt đầu bằng R và có chữ d trong tên không

    • Tôi cũng thấy cái này, và sau đó nó đã được sửa
    • Có Rhodium, nhưng ký hiệu là Rh

  • Vì mono flag chưa được đặt, nên tôi đã phải thử bằng GTK2 gvim để tải phông chữ
    Kết quả của % ttfmono MonaspaceArgon-Regular.otf là monospaced flag = 0, và hiện 0 = variable-width, otherwise = monospaced
    Đáng tiếc là có vẻ vì flag này nên ligature không được bật
    Dù vậy trong vim chạy trên st đã được patch, tôi đã thấy được ligature và texture healing, và thật sự rất thích. Khi gõ, dòng chỉ dịch chuyển cực kỳ tinh tế, và khi con trỏ đi qua, chẳng hạn vì chữ m được nới rộng, cũng không để lại dư ảnh. Nó được thiết kế rất tốt cho code
    Nếu được yêu cầu một tính năng, tôi muốn có thể chọn một số biến thể, chẳng hạn thêm dấu gạch chéo ngược vào số 0 dạng góc cạnh, hoặc giữ lại ! trong ligature !=. Ý tôi có thể xem ở đây: https://github.com/be5invis/Iosevka/blob/main/doc/stylistic-...
    https://st.suckless.org/patches/ligatures/

    • Chắc không? Trên macOS nó xuất hiện dưới mục phông “Fixed Width” trong Font Book
      Tôi đang dùng bản phát hành hôm nay, nên có thể nó đã được sửa gần đây
    • KDE Konsole cũng gặp vấn đề tương tự: https://imgur.com/a/Dj1HZiu
      Phải bật rõ checkbox “Show all fonts” thì mới thấy cả những phông “không phải monospace”

  • Trên các hệ thống hiện đại, có lẽ phông chữ cho code giờ đã có thể vượt ra ngoài phông monospace
    Tôi đã đề xuất nhiều lần ở đây rồi, nhưng tôi dùng Input Sans, một phông lập trình tỷ lệ
    https://input.djr.com

    • Tôi tò mò vì sao bạn đề xuất nó
      Nhìn phông này có vẻ có thể khiến việc tìm lỗi gõ sai khó hơn
    • Tôi muốn dùng phông tỷ lệ để lập trình, nhưng không biết frontend Vim nào hỗ trợ việc đó gọn gàng
      Khi dùng Vim qua SSH thì cứ tiếp tục dùng monospace cũng được, nhưng dù nhờ Neovim mà đã có nhiều frontend hơn, dường như gần như không có cái nào hỗ trợ phông tỷ lệ. Những cái có hỗ trợ thì lại chậm đến mức dùng rất khổ
    • Nó có hỗ trợ ligature đổi >= thành ≥ không? Tôi thử xem bản preview web trên điện thoại, nhưng có thể đó là giới hạn của Android Firefox
      Tham khảo, ligature là kiểu này: https://fonts.google.com/knowledge/glossary/ligature

  • Tôi luôn thấy khó hiểu vì sao số 0 có dấu chấm trong các phông chữ kiểu này lại trở thành gần như một chuẩn. Tôi lúc nào cũng nhầm nó với số 8, nên thích số 0 có gạch chéo hơn nhiều
    Nếu có biến thể như vậy thì tôi rất muốn dùng thử phông chữ này

    • Vì có những ngôn ngữ mà vòng tròn có gạch chéo là một chữ cái, nên số 0 có gạch chéo có thể gây nhầm lẫn. Số 0 có dấu chấm ít có khả năng gây nhầm theo hướng đó hơn nhiều
      Nhà thiết kế phông chữ cũng có thể nhấn mạnh phần lồi của số 0 có dấu chấm và phần lõm của 8 để phân biệt trực quan, nhưng tôi không biết phông chữ này có làm vậy không
    • Tôi đề xuất số 0 có gạch chéo trong issue thì có người trả lời rằng số 0 có dấu chấm cũng phục vụ cùng mục đích. Thật sự bực mình

  • Texture healing là một ý tưởng thật sự thông minh và đẹp
    Tôi cũng muốn thử áp dụng nó cho chữ viết tay tiếng Trung, vốn thường được dùng ở dạng chữ rộng cố định. Những chữ phổ biến nhưng rất dày đặc, đặc biệt là các chữ phồn thể như 邊鐵餐廳臺藥機麵顧露樓幫讓, sẽ được lợi rất nhiều nếu có thể nhận thêm không gian và trải rộng ra