Font QR Code TrueType - Membuat kode QR hanya dengan font

 (qr.jim.sh)
4 poin oleh GN⁺ 3 jam lalu | 2 komentar | Bagikan ke WhatsApp
  • Font TrueType/OpenType yang mengubah teks di dalam tanda kurung siku menjadi kode QR, sehingga kode QR bisa dimasukkan ke dalam dokumen tanpa membuat gambar
  • Konversi ditangani oleh aturan OpenType di dalam font, sementara teks di luar tanda kurung siku tetap ditampilkan sebagai teks Latin biasa
  • Karena blok kode QR juga tetap berupa teks, salin-tempel, penyimpanan sebagai teks polos, dan penempatan inline bersama kalimat biasa menjadi memungkinkan
  • Karena browser menentukan pergantian baris sebelum shaping, kode QR dapat terpecah menjadi beberapa baris pada titik seperti spasi, titik, atau garis miring
  • Agar tampil stabil di HTML, blok tanda kurung siku harus dibungkus dengan kontainer yang menerapkan white-space: nowrap; atau display: inline-block;

Cara font membuat kode QR

  • Jim's TrueType QR Code Font adalah font TrueType/OpenType sungguhan yang merender teks di dalam tanda kurung siku yang dimasukkan seperti [hello] menjadi kode QR
  • Pembuatan kode QR diproses oleh aturan OpenType di dalam font sehingga tidak memerlukan pembuatan gambar terpisah atau tahap prapemrosesan
  • Teks di luar tanda kurung siku tetap menjadi teks Latin biasa yang dapat dibaca
  • Di dalam tanda kurung siku, harus menggunakan ASCII yang dapat dicetak
  • Batas panjang yang didukung tiap font adalah sebagai berikut
    • QR Font 1-L: maksimum 17 karakter per blok
    • QR Font 2-L: maksimum 32 karakter per blok
    • QR Font 3-L: maksimum 53 karakter per blok
    • Plain Sans: tidak ada parsing QR
  • Teks biasa ditampilkan dengan font turunan dari Liberation Sans

Kode QR yang tetap berupa teks dan hal yang perlu diperhatikan saat penayangan

  • Karena kode QR tetap dipertahankan sebagai teks, blok QR yang sudah dirender bisa disalin-tempel seperti karakter biasa, disimpan sebagai teks polos, atau dicampur secara inline dengan teks Latin
  • Mesin layout browser melakukan pergantian baris berdasarkan teks Unicode sebelum shaping
    • Jika ada karakter yang memungkinkan pergantian baris seperti spasi, titik, atau garis miring, dan teks mencapai ujung kontainer, kode QR bisa terpecah menjadi beberapa baris
    • Di HTML, blok tanda kurung siku harus dibungkus dalam kontainer yang menerapkan gaya white-space: nowrap; atau display: inline-block; agar dirender dengan stabil
  • Unduhan dan sumber

Bacaan terkait

2 komentar

 
xguru 3 jam lalu

Ini bagus. Sepertinya suatu saat akan berguna.
Saya jadi berpikir bagaimana kalau diterapkan di GeekNews, tetapi saya belum tahu penggunaan yang cocok.

Hal-hal yang cocok untuk berbasis teks terus kami terapkan di GeekNews.

Datatype - font variabel yang mengubah teks menjadi grafik
Google merilis font emoji hitam-putih Noto Emoji
 
GN⁺ 3 jam lalu
Komentar di Lobste.rs

  • Saya suka cara ini menunjukkan di mana konten dienkode dalam kode QR. Alurnya terlihat jelas: dimulai dari kanan bawah, bergerak zig-zag ke atas dan bawah, lalu terisi dari kanan ke kiri
    Namun, kalau tujuannya itu, mungkin proses penyusunannya akan lebih mudah dilihat jika marker posisi/penyelarasan/timing langsung terisi pada [ alih-alih menunggu ]. Tentu saya juga paham bahwa memprosesnya di ] bisa menghindari kondisi antara yang aneh atau nilai yang terlalu panjang disalahartikan sebagai kode

  • Keren. Baru-baru ini kode QR yang dipakai untuk bisnis saya dibajak lewat penipuan di balik generator kode QR berbayar
    Seharusnya saya lebih berhati-hati, tetapi sulit membedakan encoder QR JavaScript berbasis web dengan layanan QR penipuan. Semoga opsi terbuka seperti ini bisa lebih baik dalam optimasi mesin pencari, sehingga orang yang tidak harus benar-benar paham pun bisa terhindar dari penipuan

    • Biasanya saya mencari library generator QR JavaScript, lalu masuk ke halaman demo dari GitHub :p
    • Saya belum pernah sekalipun memindai kode QR. Kalau restoran bilang harus memakai kode QR untuk melihat menu, saya langsung pergi
    • Pakai saja CyberChef dari GHCQ. Itu halaman web yang bisa diunduh

  • Ah, mengingat OpenType itu Turing-complete, seharusnya ini sudah bisa diduga

    • Tantangan: entah bagaimana, coba jalankan Doom di OpenType

  • Akan bagus kalau ada tombol sementara yang mengizinkan situs mengatur font-nya sendiri untuk sesaat

  • Entah hanya saya, tetapi tampaknya tidak berfungsi di mobile. Font apa pun yang dipilih di kotak pilihan, keduanya terlihat sebagai teks biasa
    Saya mengeceknya di browser Brave pada Android

    • Sebagai referensi, di iOS Safari berfungsi dengan baik
    • Di Firefox Android berfungsi. Saya tidak punya Chrome, jadi tidak bisa mengecek

  • Fitur untuk menyalin teks isi QR tampaknya rusak di Chrome. Secara pribadi, selain peretasan OpenType yang keren itu, ini terlihat seperti keunggulan terbesarnya, tetapi kalau memilih dan menyalin QR itu sendiri, yang keluar hanya tanda kurung siku penutup

    • Saya juga melihat hal yang sama. Tampaknya lebih merupakan masalah pada rentang yang dipilih oleh klik ganda
      Kalau area seleksi diseret hingga benar-benar mencakup seluruh QR, seluruh teksnya juga ikut tersalin