Datatype - テキストをチャートに変換する可変フォント
(github.com/franktisellano)- 「データをタイポグラフィとして（data as type）」 というコンセプトで、JS/画像/レンダリングライブラリなしに テキストだけでチャートを表示
- OpenTypeの合字置換を活用し、
{b:30,70,50,90}のような単純なテキスト表現をインラインチャートに変換 - 棒/ライン/円の3種類のチャートをサポート
- 棒グラフ: カンマ区切りの値（各 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に<span class="chart">{l:20,40,70}</span>を記述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 サイトで実際の適用例を確認可能
10件のコメント
{p:75} {l:40,10,10,40} {p:75}
{p:75} {l:40,10,10,40} {p:75}
うわあ..
こんな活用法があるとは？！
wwwwwwwww
ｗｗｗｗｗ
{l:40,10,10,40} {p:75}
わあ、めっちゃすごいですねｗｗｗ
GeekNews はできるだけ画像を使わないようにしているので、このようなテキストベースの軽量ソリューションが出てきたら、できるだけ導入してみています。
Google、白黒絵文字フォント Noto Emoji を公開 も適用されてからもう4年目ですが、まだうまく使えていますね 😀😃😄😁😆😅😍🥰😘
{b:90,100,100,90,20,10,0,10,20,90,100,100,90}
うわー、すごいですね（笑）