4 điểm bởi GN⁺ 3 giờ trước | 2 bình luận | Chia sẻ qua WhatsApp
  • Một phông chữ TrueType/OpenType biến văn bản được đặt trong ngoặc vuông thành mã QR, cho phép chèn mã QR vào tài liệu mà không cần tạo ảnh
  • Việc chuyển đổi được xử lý bởi các quy tắc OpenType bên trong phông chữ, còn văn bản ngoài ngoặc vuông được hiển thị nguyên dạng như văn bản Latin thông thường
  • Vì khối mã QR vẫn là văn bản, nên có thể sao chép-dán, lưu dưới dạng văn bản thuần và đặt inline cùng câu văn thông thường
  • Do trình duyệt quyết định xuống dòng trước khi shaping, mã QR có thể bị tách thành nhiều dòng tại các vị trí như khoảng trắng, dấu chấm hoặc dấu gạch chéo
  • Để hiển thị ổn định trong HTML, cần bọc khối ngoặc vuông trong một container được áp dụng white-space: nowrap; hoặc display: inline-block;

Cách phông chữ tạo mã QR

  • Jim's TrueType QR Code Font là một phông chữ TrueType/OpenType thực sự, render văn bản bên trong ngoặc vuông như [hello] thành mã QR
  • Việc tạo mã QR được xử lý bằng các quy tắc OpenType trong phông chữ, nên không cần tạo ảnh riêng hay bước tiền xử lý
  • Văn bản bên ngoài ngoặc vuông vẫn là văn bản Latin thông thường có thể đọc được
  • Bên trong ngoặc vuông phải dùng ASCII có thể in được
  • Độ dài được hỗ trợ theo từng phông chữ như sau
    • QR Font 1-L: tối đa 17 ký tự mỗi khối
    • QR Font 2-L: tối đa 32 ký tự mỗi khối
    • QR Font 3-L: tối đa 53 ký tự mỗi khối
    • Plain Sans: không phân tích QR
  • Văn bản thông thường được hiển thị bằng phông chữ dẫn xuất từ Liberation Sans

Mã QR vẫn là văn bản và các lưu ý khi hiển thị

  • Vì mã QR vẫn được giữ dưới dạng văn bản, bạn có thể sao chép-dán khối QR đã render như ký tự thông thường, lưu dưới dạng văn bản thuần hoặc trộn inline với văn bản Latin
  • Engine bố cục của trình duyệt thực hiện xuống dòng dựa trên văn bản Unicode trước khi shaping
    • Nếu có các ký tự có thể xuống dòng như khoảng trắng, dấu chấm, dấu gạch chéo và chạm tới cuối container văn bản, mã QR có thể bị chia thành nhiều dòng
    • Trong HTML, để render ổn định, cần bọc khối ngoặc vuông trong một container có áp dụng style white-space: nowrap; hoặc display: inline-block;
  • Tải xuống và mã nguồn

2 bình luận

 

Cái này hay đấy. Có vẻ một ngày nào đó sẽ hữu ích.
Tôi đang nghĩ liệu có nên đưa vào GeekNews không, nhưng chưa biết trường hợp sử dụng nào phù hợp.

Những thứ phù hợp với nền tảng văn bản thì GeekNews vẫn đang tiếp tục đưa vào.

Datatype - phông chữ biến thể chuyển văn bản thành biểu đồ
Google ra mắt Noto Emoji, phông chữ emoji đen trắng

 
Các ý kiến trên Lobste.rs
  • Thích cách nó cho thấy nội dung được mã hóa ở đâu trong mã QR. Có thể thấy luồng bắt đầu từ góc dưới bên phải, di chuyển ziczac lên xuống và được điền từ phải sang trái
    Tuy nhiên, nếu mục đích là vậy thì có lẽ sẽ thấy rõ quá trình tạo hơn nếu các marker vị trí/căn chỉnh/timing được điền ngay từ [ thay vì chờ đến ]. Dĩ nhiên, cũng hiểu rằng xử lý ở ] giúp tránh các trạng thái trung gian kỳ lạ hoặc việc giá trị quá dài bị nhận nhầm là mã

  • Hay thật. Gần đây mã QR dùng cho công việc kinh doanh của tôi đã bị lừa kiểu bị “bắt cóc” phía sau một trình tạo mã QR trả phí
    Lẽ ra tôi nên cẩn thận hơn, nhưng rất khó phân biệt giữa một bộ mã hóa QR bằng JavaScript chạy trên web và một dịch vụ QR lừa đảo. Mong rằng những lựa chọn mở như thế này làm SEO tốt hơn, để cả những người không nhất thiết phải rành rẽ cũng có thể tránh bị lừa

    • Thường thì tôi tìm thư viện tạo QR bằng JavaScript rồi vào trang demo trên GitHub :p
    • Tôi chưa từng quét mã QR lần nào. Nếu nhà hàng nói phải dùng mã QR để xem thực đơn thì tôi đi luôn
    • Dùng CyberChef của GHCQ là được. Đó là một trang web có thể tải xuống
  • À, nghĩ đến việc OpenType là Turing-complete thì lẽ ra đã phải đoán được

    • Thử thách: bằng cách nào đó chạy Doom trong OpenType
  • Sẽ hay nếu có một nút tạm thời cho phép trang web tự đặt phông chữ của nó trong chốc lát

  • Không biết chỉ mình tôi bị không, nhưng có vẻ không hoạt động trên di động. Dù chọn phông chữ nào trong hộp chọn thì cả hai đều hiện như văn bản thường
    Tôi kiểm tra trên trình duyệt Brave của Android

    • Để tham khảo, trên iOS Safari thì hoạt động tốt
    • Trên Firefox của Android thì hoạt động. Tôi không có Chrome nên chưa kiểm tra được
  • Tính năng sao chép văn bản nội dung QR có vẻ bị lỗi trên Chrome. Cá nhân tôi thấy, ngoài cú hack OpenType rất ngầu ra, đây dường như là điểm mạnh lớn nhất, nhưng nếu chọn và sao chép chính mã QR thì chỉ nhận được dấu ngoặc vuông đóng

    • Tôi cũng thấy hiện tượng đó. Có vẻ gần với vấn đề về phạm vi mà thao tác nhấp đúp chọn hơn
      Nếu kéo vùng chọn để chắc chắn bao trọn toàn bộ QR thì toàn bộ văn bản cũng được sao chép theo