TrueType QR Codeフォント - フォントだけでQRコードを作る

 (qr.jim.sh)
4 ポイント 投稿者 GN⁺ 3 시간 전 | 2件のコメント | WhatsAppで共有
  • 角括弧で囲んだテキストをQRコードに変換するTrueType/OpenTypeフォントで、画像生成なしに文書内へQRコードを挿入できる
  • 変換はフォント内部のOpenTypeルールが処理し、角括弧の外側のテキストは通常のラテン文字テキストとしてそのまま表示される
  • QRコードのブロックもテキストのまま残るため、コピー＆ペースト、プレーンテキストでの保存、通常の文とのインライン配置が可能
  • ブラウザはシェーピング前に改行位置を決定するため、空白・ピリオド・スラッシュのような位置でQRコードが複数行に分割されることがある
  • HTMLで安定して表示するには、角括弧ブロックを white-space: nowrap; または display: inline-block; が適用されたコンテナで囲む必要がある

フォントがQRコードを作る仕組み

  • Jim's TrueType QR Code Font は実際のTrueType/OpenTypeフォントで、[hello] のように入力した角括弧内のテキストをQRコードとしてレンダリングする
  • QRコード生成はフォント内のOpenTypeルールで処理されるため、別途画像生成や前処理の工程は不要
  • 角括弧の外側のテキストは読める通常のラテン文字テキストのまま残る
  • 角括弧内では 表示可能なASCII を使う必要がある
  • フォントごとの対応文字数は次の通り
    • QR Font 1-L: ブロックあたり最大17文字
    • QR Font 2-L: ブロックあたり最大32文字
    • QR Font 3-L: ブロックあたり最大53文字
    • Plain Sans: QR解析なし
  • 通常テキストはLiberation Sans由来の書体で表示される

テキストとして残るQRコードと表示時の注意点

  • QRコードがテキストのまま維持されるため、レンダリングされたQRブロックを通常の文字のようにコピー＆ペーストしたり、プレーンテキストとして保存したり、ラテン文字テキストとインラインで混在させたりできる
  • ブラウザのレイアウトエンジンはシェーピング前にUnicodeテキスト基準で改行を行う
    • 空白、ピリオド、スラッシュのような改行可能文字があり、テキストコンテナの端に達するとQRコードが複数行に分かれることがある
    • HTMLでは、角括弧ブロックを white-space: nowrap; または display: inline-block; スタイルが適用されたコンテナで囲むと安定してレンダリングできる
  • ダウンロードとソース

関連記事

2件のコメント

 
xguru 3 시간 전

これは良いですね。いつか役に立ちそうです。
GeekNewsに導入してみてもよさそうですが、適した使いどころが分かりませんね。

テキストベースに適したものは、GeekNewsに継続的に導入しています。

Datatype - テキストをチャートに変換する可変フォント
Google、白黒絵文字フォント Noto Emoji を公開
 
GN⁺ 3 시간 전
Lobste.rs のコメント

  • QRコードで内容がどこにエンコードされるのかを見せるやり方が良い。右下から始まり、上下にジグザグに動きながら右から左へ埋まっていく流れが分かる
    ただ、その目的なら、位置／整列／タイミングマーカーは ] を待たずに [ の時点ですぐ埋まるようにしたほうが、構築過程をよりよく見られたかもしれない。もちろん、] で処理すれば、おかしな途中状態や長すぎる値がコードだと誤認されるのを避けられる点も理解できる

  • すごい。最近、事業で使っていたQRコードが有料QRコード生成サービスの背後で乗っ取られる詐欺に遭った
    もっと注意すべきだったが、WebベースのJavaScript QRエンコーダーと詐欺的なQRサービスを見分けるのは難しかった。こういうオープンな選択肢が検索エンジン最適化をもっと頑張って、必ずしも詳しくない人たちも詐欺を避けられるようになるといい

    • たいていはJavaScript QR生成ライブラリを検索してから、GitHubのデモページに行く :p
    • QRコードは一度もスキャンしたことがない。レストランでメニューを見るのにQRコードが必要だと言われたら、そのまま出ていく
    • GHCQのCyberChefを使えばいい。ダウンロード可能なWebページだ

  • ああ、OpenTypeがチューリング完全だと考えれば予想できたはずだった

    • チャレンジ：何とかしてOpenTypeでDoomを動かしてみる

  • サイトが一時的に独自フォントを設定できるようにする一時ボタンがあるとよさそう

  • 自分だけかもしれないが、モバイルでは動かないようだ。選択ボックスでどのフォントを選んでも、どちらも通常のテキストに見える
    AndroidのBraveブラウザで確認した

    • ちなみにiOS Safariでは問題なく動作する
    • AndroidのFirefoxでは動作する。Chromeは持っていないので確認できない

  • QRの内容のテキストをコピーできる機能がChromeで壊れているようだ。個人的には、すごいOpenTypeハックを除けばこれが最大の利点に見えるのだが、QR自体を選択してコピーすると閉じ角括弧だけが出てくる

    • 同じ現象を見た。ダブルクリックが選択する範囲の問題に近いように見える
      選択範囲をドラッグしてQR全体を確実に含めると、テキスト全体も一緒にコピーされる