Datatype - ฟอนต์แปรผันที่แปลงข้อความเป็นแผนภูมิ

• ภายใต้คอนเซปต์ "data as type" สามารถ แสดงแผนภูมิด้วยข้อความล้วน โดยไม่ต้องใช้ไลบรารี JS/รูปภาพ/เรนเดอริง
• ใช้ OpenType ligature substitution เพื่อแปลงข้อความธรรมดาอย่าง {b:30,70,50,90} ให้เป็นแผนภูมิแบบอินไลน์
• รองรับแผนภูมิ 3 ประเภท: แท่ง/เส้น/วงกลม
  • แผนภูมิแท่ง: {b:30,70,50,90,64,27,72,42} ค่าที่คั่นด้วยจุลภาค (แต่ละค่าอยู่ระหว่าง 0–100) รองรับแท่งได้สูงสุด 20 แท่ง
  • สปาร์กไลน์: {l:10,50,30,80,20,15,48,72,37} ค่าที่คั่นด้วยจุลภาค (แต่ละค่าอยู่ระหว่าง 0–100) รองรับจุดได้สูงสุด 20 จุด
  • แผนภูมิวงกลม: {p:69} {p:43} ค่าเปอร์เซ็นต์เดี่ยวระหว่าง 0–100
• ปรับภาพลักษณ์ได้ด้วย ขนาดฟอนต์ และ แกนแปรผัน 2 แกน
  • Width (wdth): 50–150 ใช้ปรับระยะห่าง ค่าเริ่มต้น 100
  • Weight (wght): 100–900 ใช้ปรับความหนาของเส้น ค่าเริ่มต้น 400
• เรนเดอร์ได้แม้อยู่ระหว่างตัวอักษร จึงใช้ได้ตรง ๆ ใน ทุกที่ที่มีข้อความ เช่น กลางเนื้อหา ภายในตาราง หรือข้อความล็อก
  • ใส่ใน ตาราง/แดชบอร์ด/รายงาน ได้ง่าย
• บนเว็บสามารถเริ่มใช้งานได้ด้วย CSS เพียง 3 บรรทัด
  • โหลดฟอนต์ด้วย @font-face → กำหนด font-family: 'Datatype' → เขียน {l:20,40,70} ใน HTML
  • มีตัวเลือกปรับเพิ่มเติม เช่น wdth ผ่าน font-variation-settings
• เดสก์ท็อป: ติดตั้ง TTF แล้วใช้งานได้ในแอปที่รองรับ OpenType ligature (เช่น Adobe)
• เผยแพร่อยู่บน Google Fonts จึงใช้งานได้โดยไม่ต้องโฮสต์เอง
• มี Named instances 15 แบบ (Weight มาตรฐาน 9 แบบ + ชุดผสมความกว้างแบบกำหนดเอง 6 แบบ)
  • มีพรีเซ็ตตามการใช้งาน เช่น Thin UltraCondensed (50/100), SemiBold Condensed (75/600), Medium Expanded (125/500), Black ExtraExpanded (150/900) เป็นต้น
• จำนวน glyph: 10,850 ต่อมาสเตอร์ รวมทั้งหมด 9 มาสเตอร์
• ขนาดไฟล์: TTF 4.0MB / WOFF2 78KB, รองรับยูนิโค้ดตาม Google Fonts Latin Core
• รองรับเบราว์เซอร์: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

• คำอธิบายการทำงาน

  • ใช้ความสามารถ OpenType ligature substitution
  • เดิมที ligature คือฟีเจอร์ที่แทนชุดตัวอักษรอย่าง fi, fl ด้วย glyph เดียว
  • Datatype นำแนวคิดนี้มาประยุกต์ โดยแทนแพตเทิร์นทั้งชุดอย่าง {b:30,70,50,90} ให้กลายเป็น glyph แผนภูมิเดียว {b:30,70,50,90}
  • หากเบราว์เซอร์หรือแอปรองรับฟีเจอร์ ligature ของฟอนต์ ก็จะ เรนเดอร์ได้ทันทีโดยไม่ต้องรัน JavaScript
• SIL Open Font License 1.1
• ดูตัวอย่างการใช้งานจริงได้ที่ Specimen

[roxie]

ตอนแรกก็คิดว่าไม่น่าจะต่างจากการแปลงเป็น svg มากนัก แต่ใน GeekNews ก็มีกรณีใช้งานจริงโผล่มาให้เห็นทันทีเลยนะ เป็นไอเดียที่ดีทีเดียว {p:100} {b:50,50,50} {p:100}

[winterjung]

{p:75} {l:40,10,10,40} {p:75}

[shakespeares]

{p:75} {l:40,10,10,40} {p:75}
ว้าว..

[xguru]

มีการใช้งานแบบนี้ด้วย?!

[crawler]

5555555555

[bichi]

555555

[xguru]

GeekNews พยายามหลีกเลี่ยงการใช้รูปภาพอยู่แล้วเท่าที่ทำได้ ดังนั้นถ้ามีโซลูชันน้ำหนักเบาแบบใช้ข้อความเช่นนี้ออกมา เราก็พยายามนำมาปรับใช้เมื่อเป็นไปได้
Google เปิดตัวฟอนต์อีโมจิขาวดำ Noto Emoji ก็ถูกนำมาใช้ได้ 4 ปีแล้ว และจนถึงตอนนี้ก็ยังใช้งานได้ดีอยู่นะ 😀😃😄😁😆😅😍🥰😘

[humblebee]

{p:75} {l:40,10,10,40} {p:75} 🙂

[crawler]

ว้าว น่าทึ่งมากเลย 555555

[onestone]

กราฟพุ่งขึ้นทางขวา~ {b:10,20,40,60,80,100}

[logone72]

{l:10,50,30,80,20}

[jungkeuny]

{l:10,50,30,80,20}

[aer0700]

{p:75} {l:45,30,10,10,30,45} {p:75}

[lazydonkey456]

{p:65} {l:70,0,70,0,70} {p:65}

[duky8n]

{p:5} {l:60,0,50,50,0,60} {p:5}

[aciddust]

{p:75} {l:40,10,10,40} {p:75} น่ารักกกกกกกกมาก

[filab]

{b:30,70,50,30}

[nvrshowfear]

{p:75} {l:40,10,10,40} {p:75}

[syate]

{p:75} {l:40,10,40} {p:75}

[syate]

{p:75} {l:40,10,10,10,10,10,40} {p:75}

[gilsport]

{b:30,70,90,64,27,42}

[unknowncyder]

{b:30,70,90,64,27,42,42,27,64,90,70,30}

[alstj158]

น่าสนใจดีนะ เห็นว่า Google Material Symbols ก็ใช้ลิแกเจอร์ในการทำไอคอนเหมือนกัน

[holywork]

ดีมากเลย

[akarin]

{l:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15}

[recast7838]

{b:30,70,50,90}

[sigco]

{l:40,10,10,40} {p:75}

[kimjeongwonn]

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}

[seoseonyu]

ว้าว 555 น่าทึ่งดีนะ