ฟอนต์ TrueType QR Code - สร้าง QR Code ด้วยฟอนต์เพียงอย่างเดียว

 (qr.jim.sh)
4 คะแนน โดย GN⁺ 3 시간 전 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • เป็นฟอนต์ TrueType/OpenType ที่แปลง ข้อความที่ครอบด้วยวงเล็บเหลี่ยม ให้เป็น QR Code ทำให้ใส่ QR Code ลงในเอกสารได้โดยไม่ต้องสร้างรูปภาพ
  • การแปลงถูกจัดการโดย กฎ OpenType ภายในฟอนต์ ส่วนข้อความนอกวงเล็บเหลี่ยมจะแสดงเป็นข้อความละตินปกติตามเดิม
  • เนื่องจากบล็อก QR Code ยังคงเป็นข้อความ จึงสามารถ คัดลอก·วาง, บันทึกเป็นข้อความล้วน และจัดวางแบบอินไลน์ร่วมกับประโยคทั่วไปได้
  • เบราว์เซอร์ตัดสินใจขึ้นบรรทัดใหม่ก่อนขั้นตอน shaping ดังนั้น QR Code อาจ ถูกแบ่งออกเป็นหลายบรรทัด ตรงจุดอย่างช่องว่าง จุด หรือสแลชได้
  • หากต้องการให้แสดงผลอย่างเสถียรใน HTML ควรครอบบล็อกวงเล็บเหลี่ยมด้วยคอนเทนเนอร์ที่ใช้ white-space: nowrap; หรือ display: inline-block;

ฟอนต์สร้าง QR Code อย่างไร

  • Jim's TrueType QR Code Font เป็นฟอนต์ TrueType/OpenType จริง และเรนเดอร์ข้อความภายในวงเล็บเหลี่ยมที่ป้อน เช่น [hello] ให้เป็น QR Code
  • การสร้าง QR Code ถูกจัดการด้วย กฎ OpenType ภายในฟอนต์ จึงไม่ต้องมีการสร้างรูปภาพหรือขั้นตอนประมวลผลล่วงหน้าแยกต่างหาก
  • ข้อความนอกวงเล็บเหลี่ยมยังคงเป็นข้อความละตินทั่วไปที่อ่านได้
  • ภายในวงเล็บเหลี่ยมต้องใช้ ASCII ที่พิมพ์ออกมาได้
  • ความยาวที่รองรับในแต่ละฟอนต์มีดังนี้
    • QR Font 1-L: สูงสุด 17 อักขระต่อบล็อก
    • QR Font 2-L: สูงสุด 32 อักขระต่อบล็อก
    • QR Font 3-L: สูงสุด 53 อักขระต่อบล็อก
    • Plain Sans: ไม่มีการพาร์ส QR
  • ข้อความปกติจะแสดงด้วยฟอนต์ที่ดัดแปลงมาจาก Liberation Sans

QR Code ที่ยังคงเป็นข้อความและข้อควรระวังในการแสดงผล

  • เนื่องจาก QR Code ยังคงเป็นข้อความ จึงสามารถคัดลอก·วางบล็อก QR ที่เรนเดอร์แล้วเหมือนตัวอักษรทั่วไป บันทึกเป็นข้อความล้วน หรือผสมแบบอินไลน์กับข้อความละตินได้
  • เอนจินเลย์เอาต์ของเบราว์เซอร์จะขึ้นบรรทัดใหม่โดยอิงข้อความ Unicode ก่อนขั้นตอน shaping
    • หากมีอักขระที่ขึ้นบรรทัดใหม่ได้ เช่น ช่องว่าง จุด หรือสแลช และข้อความไปถึงท้ายคอนเทนเนอร์ QR Code อาจถูกแบ่งเป็นหลายบรรทัด
    • ใน HTML ควรครอบบล็อกวงเล็บเหลี่ยมด้วยคอนเทนเนอร์ที่ใช้สไตล์ white-space: nowrap; หรือ display: inline-block; เพื่อให้เรนเดอร์ได้อย่างเสถียร
  • ดาวน์โหลดและซอร์ส

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
xguru 3 시간 전

อันนี้ดีนะครับ คิดว่าสักวันน่าจะมีประโยชน์
ผมคิดอยู่ว่าถ้านำมาใช้ใน GeekNews จะเป็นยังไง แต่ยังไม่รู้ว่ากรณีใช้งานที่เหมาะสมคืออะไร

สิ่งที่เหมาะกับรูปแบบข้อความนั้น GeekNews กำลังทยอยนำมาใช้อยู่เรื่อย ๆ ครับ

Datatype - ฟอนต์แปรผันที่แปลงข้อความเป็นแผนภูมิ
Google เปิดตัว Noto Emoji ฟอนต์อีโมจิขาวดำ
 
GN⁺ 3 시간 전
ความคิดเห็นบน Lobste.rs

  • ชอบวิธีที่แสดงให้เห็นว่า เนื้อหาถูกเข้ารหัสไว้ตรงไหน ใน QR code มันเผยให้เห็นลำดับการเติมข้อมูลที่เริ่มจากมุมขวาล่าง เคลื่อนซิกแซ็กขึ้นลง และเติมจากขวาไปซ้าย
    แต่ถ้านั่นคือจุดประสงค์ คิดว่าถ้า marker สำหรับตำแหน่ง/การจัดแนว/จังหวะเวลาไม่ต้องรอ ] แล้วเติมตั้งแต่ [ เลย ก็น่าจะเห็นกระบวนการประกอบได้ชัดกว่า แน่นอนว่าก็เข้าใจได้ว่าการประมวลผลตอน ] ช่วยเลี่ยงสถานะกลาง ๆ แปลก ๆ หรือกรณีที่ค่าที่ยาวเกินไปถูกเข้าใจผิดว่าเป็นโค้ด

  • เจ๋งดี เมื่อไม่นานมานี้ QR code ที่ใช้กับธุรกิจของผมโดนหลอกแบบถูก “จี้” อยู่หลัง ตัวสร้าง QR code แบบเสียเงิน
    ผมควรระวังกว่านี้ แต่แยกความแตกต่างระหว่างตัวเข้ารหัส QR บนเว็บที่ใช้ JavaScript กับบริการ QR หลอกลวงได้ยาก หวังว่าตัวเลือกแบบเปิดพวกนี้จะทำ SEO ได้ดีกว่านี้ เพื่อให้คนที่ไม่จำเป็นต้องรู้ลึกก็ยังหลีกเลี่ยงการโดนหลอกได้

    • ปกติจะค้นหา ไลบรารีสร้าง QR ด้วย JavaScript แล้วเข้าไปที่หน้าเดโมบน GitHub :p
    • ผมไม่เคยสแกน QR code เลยสักครั้ง ถ้าร้านอาหารบอกว่าต้องใช้ QR code เพื่อดูเมนู ผมก็เดินออกเลย
    • ใช้ CyberChef ของ GHCQ ก็ได้ เป็นเว็บเพจที่ดาวน์โหลดมาใช้ได้

  • อ้อ ถ้าคิดว่า OpenType เป็น Turing-complete ก็น่าจะคาดไว้ได้อยู่แล้ว

    • ความท้าทาย: หาวิธีรัน Doom บน OpenType ให้ได้

  • อยากให้มี ปุ่มชั่วคราว ที่อนุญาตให้ไซต์ตั้งค่าฟอนต์ของตัวเองได้สักพัก

  • ไม่รู้ว่าเป็นแค่ผมหรือเปล่า แต่บนมือถือดูเหมือนจะใช้ไม่ได้ ไม่ว่าจะเลือกฟอนต์ไหนในกล่องเลือก ทั้งสองแบบก็ดูเป็นข้อความธรรมดา
    ตรวจสอบบนเบราว์เซอร์ Brave บน Android

    • เผื่อเป็นข้อมูล บน iOS Safari ใช้งานได้ดี
    • บน Firefox ของ Android ใช้งานได้ ส่วน Chrome ไม่มีเลยยังไม่ได้ลอง

  • ฟีเจอร์คัดลอกข้อความของเนื้อหา QR ดูเหมือนจะเสียใน Chrome โดยส่วนตัวแล้ว นอกจาก การแฮ็ก OpenType เท่ ๆ นี่น่าจะเป็นจุดเด่นที่สุด แต่ถ้าเลือกตัว QR เองแล้วคัดลอก จะได้แค่วงเล็บเหลี่ยมปิดเท่านั้น

    • เจอแบบเดียวกัน ดูเหมือนจะเป็นปัญหาเรื่องช่วงที่ ดับเบิลคลิก เลือกมากกว่า
      ถ้าลากพื้นที่เลือกให้ครอบคลุม QR ทั้งหมดอย่างแน่นอน ข้อความทั้งหมดก็จะถูกคัดลอกไปด้วย