Phông chữ pixel 5x5 cho màn hình nhỏ
(maurycyz.com)- Đây là phông chữ đơn cách siêu nhỏ được thiết kế để đặt mọi ký tự vào trong một hình vuông 5 pixel và có thể vẽ an toàn trên lưới 6x6, phù hợp với màn hình nhỏ và môi trường bộ nhớ hạn chế
- Kích thước 5x5 giải quyết vấn đề biểu diễn
E,M,Wvốn còn thiếu ở 4x4, đồng thời cho phép vẽ đa số chữ thường nhỏ hơn chữ hoa 1 pixel để tăng khả năng phân biệt trực quan - Toàn bộ phông chữ chỉ có 350 byte, rất hợp với các vi điều khiển 8-bit như AVR128DA28, và mang lại hiệu quả sử dụng pixel cao trên các màn hình nhỏ như 160x128 hoặc OLED 128x64
- Ngay cả khi so với phông chữ vector được render ở kích thước tương tự, kết quả vẫn kém hơn phông chữ thủ công 350 byte này dù dùng khử răng cưa và dữ liệu mã/phông lớn hơn rất nhiều
- Tác giả cũng thử nghiệm các cỡ nhỏ hơn như 3x5, 3x4, 3x3, 2x3, 3x2, 2x2; trong đó 3x5 còn khá dễ đọc, 3x2 tốt hơn 2x3, còn 2x2 thì gần như sụp đổ xuống mức giống mật mã bí mật hơn là phông chữ
Phông chữ pixel 5x5
- Được thiết kế để mọi ký tự nằm gọn trong một hình vuông 5 pixel và có thể vẽ an toàn trên lưới 6x6
- Nền tảng là
font-inline.h5x6 của lcamtuf, và phông này chịu ảnh hưởng từ phông 8x8 của ZX Spectrum - 5x5 được chọn là kích thước nhỏ nhất mà vẫn không làm hại khả năng đọc
- Nền tảng là
- 2x2 là bất khả thi, 3x3 thì khả thi về mặt kỹ thuật nhưng khó đọc, còn 4x4 không đủ để vẽ đúng
E,M,W- Ở 5x5, vấn đề này được giải quyết
- 5x5 cho phép vẽ đa số chữ thường nhỏ hơn chữ hoa 1 pixel nên có thể phân biệt bằng mắt
- Các biến thể hẹp hơn như 4x5 và 3x5 cũng khả thi, nhưng phải hy sinh
M, số0có chấm, và khả năng phân biệt giữaU/V/Y - Việc giữ mọi ký tự ở cùng một độ rộng giúp việc lập trình trở nên dễ hơn
- Trên màn hình, độ dài chuỗi luôn được tính là 6 lần số ký tự
- Không cần lo
"8978"dài hơn"1111"làm tràn bố cục
- Kích thước toàn bộ phông chỉ 350 byte, rất phù hợp với vi điều khiển 8-bit như AVR128DA28
- Trong bài có ghi AVR128DA28 có RAM 16kB
- Những con chip như vậy rẻ, tiết kiệm điện, bền bỉ nhưng không có nhiều dư địa cho xử lý đồ họa
- Màn hình 384x288 cũng đã có khoảng 110 nghìn pixel, quá lớn để chứa trong bộ nhớ AVR
- Thay vào đó, những màn hình nhỏ hơn như 160x128 hoặc OLED 128x64 thực tế và rẻ hơn
- Trên các màn hình này, phông chữ tối ưu theo pixel được vẽ thủ công có lợi thế
- Bài viết cũng so sánh với phông chữ vector được render ở kích thước tương tự
- Phông vector đó thực tế cao 6 pixel nhưng ký tự hẹp hơn
- Dù dùng khử răng cưa, vài megabyte mã nguồn và 1MB dữ liệu phông, kết quả vẫn thua phông thủ công 350 byte
Thử nghiệm trên màn hình thực và ở kích thước nhỏ hơn
- Pixel thực tế không phải là hình vuông hoàn hảo, nên hình ảnh trên màn hình không hoàn toàn giống phần render phía trên
- Hiệu ứng giả đổ bóng do subpixel tạo ra được đánh giá tích cực
- Trên màn hình đen trắng thì hiệu ứng này không có, nhưng nhìn vẫn mượt hơn dự đoán
- Khoảng cách giữa các pixel khiến
evàgtrông thuyết phục hơn- Từ hiệu ứng đó, bài viết tiếp tục khám phá khả năng của các phông nhỏ hơn nữa
- 3x5 không phải độ phân giải tối thiểu tuyệt đối không cần đánh đổi, nhưng vẫn đọc khá ổn
- Ở kích thước này có 32.768 glyph, trong đó 27.904 glyph phân biệt được với nhau
M,W,Qbị thiệt, nhưngOvà0vẫn còn phân biệt được- Đây có thể là lựa chọn khi cần thêm 50% số cột trên màn hình
- 3x4 vẫn còn đọc được nhưng ràng buộc nhiều hơn
- Có 4.096 glyph, trong đó 3.392 glyph phân biệt được với nhau
- Ở cỡ này không thể phân biệt chữ hoa và chữ thường, nên phải chọn một phong cách phù hợp nhất với không gian hạn chế
- Khả năng biểu đạt chữ số cũng giảm, nhưng vẫn còn dùng được
- 3x3 là nơi tổn thất ở chữ số lớn nhất
- Có 512 glyph, trong đó 400 glyph phân biệt được với nhau
- Các chữ cái vẫn có thể nhận ra ở mức độ nhất định mà không bị trùng lặp
- Khi hiển thị trên phần cứng thật, phông này cải thiện đáng kể
- 2x3 đã gần đến mức quá sức
- Có 64 glyph, trong đó 44 glyph phân biệt được với nhau
- Phần lớn chữ cái khó nhận ra và có nhiều trùng lặp
- Dòng dưới cùng là
"Hello World"
- 3x2, tức đảo ngược tỷ lệ ngang dọc, lại tốt hơn 2x3 rất nhiều
- Ở cỡ này cũng có 64 glyph, trong đó 44 glyph phân biệt được với nhau
- Những chữ cần chi tiết theo chiều ngang như
M,W,N,Q,G,Pnhiều hơn những chữ cần chi tiết theo chiều dọc nhưE,F, nên cách này có lợi hơn - Dòng dưới cùng là
"you can probably read this"; nếu nheo mắt hoặc thu nhỏ lại thì vẫn đọc được
- 2x2 chỉ còn được giữ lại như một đối tượng so sánh cho tính hoàn chỉnh
- Về lý thuyết có 16 hình ảnh 2x2 khả dĩ, nhưng một là ô trống và năm hình chỉ là bản sao dịch chuyển của glyph khác, nên thực tế chỉ còn 10
- Dù đủ để biểu diễn toàn bộ chữ số, chúng không giống hình dạng gốc nên gần với mật mã bí mật hơn là một phông chữ
3 bình luận
Cảm ơn vì thông tin hữu ích. Tự nhiên rất muốn thử.
Làm sao nhét tiếng Hàn vào đây đây TT chết tiệt
Ý kiến trên Hacker News
Nếu tận dụng rendering subpixel thì ngay cả 1x5 cũng hoàn toàn khả thi https://www.msarnoff.org/millitext/
[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
Đồng thời cũng phát hiện ra màn hình của mình bẩn khủng khiếp
5x5 khá ổn và 3x5 cũng không tệ, nhưng cả hai đều không thể bao phủ đầy đủ toàn bộ ASCII
Kích thước thực tế cũng hơi đánh lừa nữa, vì nếu tính cả khoảng cách ký tự thì thực ra cần lưới 6x6 hoặc 4x6
Vì vậy tôi khá thích Spleen của https://github.com/fcambus/spleen
Nó có font 5x8 hỗ trợ toàn bộ ASCII, và phần lớn glyph thực chất là dạng 4x8 có kèm khoảng cách ngang
Trong dự án của mình, tôi đã sửa nó để tất cả glyph đều thành 4x8, và nhờ vậy có thể render đẹp trong lưới 5x9, đồng thời luôn đảm bảo khoảng cách ngang và dọc 1 pixel giữa các ký tự
Nếu muốn giải quyết bằng phần cứng thì có thể mua 80 column card để dùng văn bản 80 cột đúng nghĩa, miễn là màn hình hỗ trợ nó
Phần lớn font siêu nhỏ đều cực kỳ tệ nếu nhìn lướt ở tỷ lệ 1:1
Trước đây khi làm mod game, tôi cần những font rất nhỏ và dày, nên đã thử rất nhiều kiểu 3x3, 3x5, thậm chí cả 2x5, nhưng tất cả đều quá khó đọc
Cuối cùng tôi tìm được Gremlin-3x6 do zephram làm ra, và dù cao hơn 1 pixel, nó vẫn rất gọn theo chiều ngang
Quan trọng hơn, các chữ cái Latin tiêu chuẩn được phân biệt tốt, và vẫn đọc được mà không cần phóng quá to
Tiếc là zephram đã xóa tài khoản FontStruct nên toàn bộ font cũng biến mất, nhưng tôi đã giữ lại bản sao cùng giấy phép CC0 trong kho mod của mình, và có thể xem kết quả render thật trong ảnh chụp màn hình
[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
Cũng từng có thảo luận tương tự về ký tự CJK
https://chinese.stackexchange.com/questions/16669/lowest-pixel-resolution-needed-to-support-chinese
Nếu tác giả có đọc được điều này, tôi nghĩ chữ thường t nên thêm một pixel phía trên nét ngang
Dạng hiện tại trông quá giống chữ T viết hoa
Dù vậy, tổng thể thì bạn đã làm rất tốt, cảm ơn vì đã chia sẻ
x
xxx
x
xx
xx
x
x
x
xx
Có ý kiến rằng 4x4 không đủ để vẽ E, M, W cho đúng, nhưng thật ra 5x5 cũng không đủ để vẽ e cho đúng
Nếu muốn chữ thường thấp hơn chữ hoa thì chiều dọc phải có ít nhất 6 pixel, và nếu còn muốn có cả descender tử tế thì tối thiểu phải là 7
Nói chính xác hơn, nếu muốn g và y bám vào baseline mà vẫn phân biệt được descender ngang thì 8 sẽ tốt hơn, nhưng ở đây có vẻ vẫn chấp nhận được một sự thỏa hiệp
Và trên thực tế, nếu muốn có khoảng trống dễ nhìn ở bên dưới và bên cạnh chữ, cuối cùng vẫn cần ít nhất 8x6 pixel mỗi ký tự
Với mắt tôi, phần trống phía trên được lấp bớt nên dễ đọc hơn, và trong câu dài thì ngữ cảnh cũng đủ để hiểu
Tất nhiên nó vẫn chưa hoàn hảo, và trong ví dụ pixel sạch được phóng to ở phía trên thì cảm giác gượng gạo lộ rõ hơn
Nếu không chỉ dùng hai trạng thái bật/tắt pixel mà dùng grayscale nhiều mức, ta có thể tạo ra văn bản đọc được ở kích thước còn nhỏ hơn nữa
Tuy vậy điểm quan trọng ở đây là text chứ không phải letters
Từng ký tự riêng lẻ có thể quá mờ, nhưng con người sẽ suy ra nội dung từ ngữ cảnh để đọc
Thậm chí cách này cũng không nhất thiết đòi hỏi một font được thiết kế riêng
Ví dụ: https://imgur.com/a/text-80-characters-per-line-240-pixels-wide-AlYrnSS
Ở đây, kể cả tính cả khoảng cách giữa chữ, trung bình chiều ngang cũng chỉ khoảng 3 pixel mỗi ký tự
Hệ điều hành LAP6 của máy tính mini LINC có kèm font 4x5, nhưng không có chữ thường
Tôi chợt nhớ tới những nỗ lực ngày xưa nhằm hiện 80 cột bằng phần mềm trên C64
Cách làm là dùng lưới 3x7 pixel nhưng chừa ra một hàng và một cột để làm khoảng cách, và thực tế cũng đã có vài sản phẩm thương mại áp dụng
https://www.pagetable.com/?p=901
Làm cho một bộ ký tự 4×8 vừa dễ đọc vừa đẹp mắt không hề đơn giản, và vì cần 1 pixel khoảng cách giữa các chữ nên bề rộng thực chất của ký tự chỉ còn 3 pixel
Vì thế các chữ như M hay N đặc biệt khó xử lý
Có người nói rằng nếu chấp nhận bỏ M, dotted zero, và làm yếu đi sự phân biệt giữa U/V/Y thì 4x5 hay 3x5 là khả thi, còn tôi thấy 3x5 đã đủ thực dụng rồi
https://robey.lag.net/2010/01/23/tiny-monospace-font.html