Datatype - テキストをチャートに変換する可変フォント

• 「データをタイポグラフィとして（data as type）」 というコンセプトで、JS/画像/レンダリングライブラリなしに テキストだけでチャートを表示
• OpenTypeの合字置換を活用し、{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
• 文字の間でもレンダリングできるため、本文中、表の中、ログメッセージなど テキストが入るあらゆる場所でそのまま動作
  • テーブル/ダッシュボード/レポート などにも簡単に挿入可能
• Webでは CSS 3行だけで導入可能
  • @font-face でフォントを読み込み → font-family: 'Datatype' を指定 → HTMLに {l:20,40,70} を記述
  • font-variation-settings で wdth などの追加調整オプションを提供
• デスクトップ: TTFをインストール後、OpenTypeの合字をサポートするアプリ（Adobeなど）で使用可能
• Google Fontsでも配布 されており、別途ホスティングなしで利用可能
• 15個のNamedインスタンスを提供（標準Weight 9個 + カスタム幅の組み合わせ 6個）
  • Thin UltraCondensed(50/100)、SemiBold Condensed(75/600)、Medium Expanded(125/500)、Black ExtraExpanded(150/900) など、用途別プリセットを含む
• グリフ数はマスターあたり10,850個、全9マスター構成
• ファイルサイズ: TTF 4.0MB / WOFF2 78KB、Unicodeカバレッジは Google Fonts Latin Core
• ブラウザ対応: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

• 動作説明

  • OpenTypeの合字置換（ligature substitution） 機能を活用
  • 本来の合字は fi、fl のような文字の組み合わせを1つのグリフに置き換える機能
  • Datatypeはこれを応用し、{b:30,70,50,90} のようなパターン全体を1つのチャートグリフ {b:30,70,50,90} に置換
  • ブラウザやアプリがフォントの合字機能さえサポートしていれば、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]

wwwwwwwww

[bichi]

ｗｗｗｗｗ

[xguru]

GeekNews はできるだけ画像を使わないようにしているので、このようなテキストベースの軽量ソリューションが出てきたら、できるだけ導入してみています。
Google、白黒絵文字フォント Noto Emoji を公開 も適用されてからもう4年目ですが、まだうまく使えていますね 😀😃😄😁😆😅😍🥰😘

[humblebee]

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

[crawler]

わあ、めっちゃすごいですねｗｗｗ

[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]

うわー、すごいですね（笑）