Furifont: a Japanese font that draws furigana above kanji by itself, with OpenType ligatures and no JavaScript
Not my project, it's antfu's.
Type kanji and the readings appear above them: 今日は桜が満開 gets きょう, さくら and まんかい, drawn by the font through ligatures. There's a romaji variant and a serif one. The one option on their page that needs JavaScript, okurigana readings, is off in the video, so everything you see comes from the font alone.
Repo: antfu/furifont
Curious how far ligatures can go here before the font file gets too big.
29 points
Ghosttyで選択した日本語だけルビを表示してみた
Ghosttyで日本語をドラッグ選択すると、選択した部分だけふりがな付きのフォントに切り替わる機能を作ってみました。選択を解除すると元のフォントに戻ります。
きっかけは、Ghostty 開発コミュニティでFurifontの話題が出ていたことでした。
私自身最近、Ghosttyの文字レンダリング部分を高速化するPRを作っていました。
Macの日本語入力でIMEの変換部分がGhostty上でわかりづらいというPRが作られているのを見ていました。
ghostty#14749
その流れで字形をまとめて保持するアトラスや、文字列から描画する字形を決める処理を追っていました。
ちょうど実装している最中にXで見かけたのが、Anthony Fuさんの Furifont でした。
x.com
Furifontは、フォント自体にふりがな付きの字形と置換ルールを持たせる仕組みです。
Ghostty のコミュニティで海外の人で日本語を勉強している人がいて、Furifontのコンセプトはいいんだけれど、日本語勉強するときには余計な場所に目がついてしまうから使えないという話をしていました。
「選択したときだけ使えたら面白そう」と思って試しに実装してみました。
デモ
x.com
ドラッグすると、選択した文字そのものがルビ付きの見た目に変わります。マウスを離しても選択が残っている間は表示し、選択を外すと元に戻します。
動画ではウィンドウ幅を変えたときの様子も試していて、ここら辺はやっぱり適切に日本語のルビが振られません。(Furifont側でも問題になっている)
文字列を変えず、描画するフォントを変える
今回追加したのは、選択範囲を見てフォントを切り替える処理で、ターミナルから選択した範囲を取得し字形のいちや大きさを決めています。
選択されていない文字 → 通常のフォント
選択された日本語 → Furifont
選択解除 → 通常のフォント
端末の本文に読みを挿入するのではなく、シェーピングに渡すフォントを切り替え、以降の字形描画にはGhosttyの既存の仕組みを使っています。
もし適切に文節の区切りが、折り返しで変わっても正確にルビが振られるようにするには、この部分で字句解析を行い、シェーピングのまとまりを決める必要があります。今回はそこまでやっていません。
試作版では、configで選択用フォントを指定しました。
selection-font-family = Furifont Sans
まだ残っている課題
この実装は、Furifontの読みの曖昧さや、単語の途中で折り返したときの問題を解決していません。行や選択の境界でシェーピングのまとまりが分かれると、読みが変わったり、付かなくなったりします。
また、試作用の設定ではルビの余白を取るため、ターミナル全体の行高を50%増やしています。
次は行高を維持したまま、選択部分の「漢字+ルビ」をセル内に収める方法を試したいです。ただ、縮小すると読みにくくなるかもしれません。ここはまだ比較していません。
常に全部の文字にルビが付くより、読めないところだけ気軽に選べるほうが、普段の作業にも取り入れいよねと思っています。
(あんまり日本人としては気づかないルビ(ruby)の表示に関して勉強できて楽しかったです。)
Furifontの公式リポジトリ / 設計ドキュメント
1 like
antfu/furifont
これ、よー考えてある、なあ。ひらがなから漢字は多少一意に定めにくい点あるけど、漢字からひらがなだったら、例外はあるけどだいぶ一意に決められるはず、よね。
rubizaidan.jp
これはルビ財団がきっちり売りこまないとだめちゃうか。松本さんは知ってるんやろか。
2 likes
フロントエンド開発で使えそうなskills packのようだ。
含まれるスキルは、JavaScript/TypeScriptの慣習、Vue/Nuxt/Vite/Pinia などのベストプラクティス、コードレビュー、TDD、わかりやすい文章作成、UIデザインなど多岐にわたっているようだ。
antfu/skills-pack
4 likes · 222 views
This is powered by antfu/skills-npm, which allows npm packages to ship skills, or declare their "skill dependencies", so you can create shared packs/presets with your team or the community.
We are working with the skills-cli team to have this builtin.
9 likes
Introduce @antfu/skills
It works just like @antfu/eslint-config, an opinionated pack of skills curated from the ecosystem.
Instead of vendoring skills, you get a package-manager-like experience: install packs with their skill deps.
antfu/skills-pack
36 likes · 4 reposts
This is powered by antfu/skills-npm, which allows npm packages to ship skills, or declare their "skill dependencies", so you can create shared packs/presets with your team or the community.
We are working with the skills-cli team to have this builtin.
4 likes · 1,094 views
Introduce @antfu/skills
It works just like @antfu/eslint-config, an opinionated pack of skills curated from the ecosystem.
Instead of vendoring skills, you get a package-manager-like experience: install packs with their skill deps.
antfu/skills-pack
237 likes · 13 reposts · 7,717 views
Pulls.review – A better way for review GitHub Pull Requests
2 points · 1 comment
And maybe my first time to find p0 bug?
pulls.review#59
2 likes · 33 views
Mentions
Furifont: a Japanese font that draws furigana above kanji by itself, with OpenType ligatures and no JavaScript Not my project, it's antfu's. Type kanji and the readings appear above them: 今日は桜が満開 gets きょう, さくら and まんかい, drawn by the font through ligatures. There's a romaji variant and a serif one. The one option on their page that needs JavaScript, okurigana readings, is off in the video, so everything you see comes from the font alone. Repo: antfu/furifont Curious how far ligatures can go here before the font file gets too big.
Ghosttyで選択した日本語だけルビを表示してみた Ghosttyで日本語をドラッグ選択すると、選択した部分だけふりがな付きのフォントに切り替わる機能を作ってみました。選択を解除すると元のフォントに戻ります。 きっかけは、Ghostty 開発コミュニティでFurifontの話題が出ていたことでした。 私自身最近、Ghosttyの文字レンダリング部分を高速化するPRを作っていました。 Macの日本語入力でIMEの変換部分がGhostty上でわかりづらいというPRが作られているのを見ていました。 ghostty#14749 その流れで字形をまとめて保持するアトラスや、文字列から描画する字形を決める処理を追っていました。 ちょうど実装している最中にXで見かけたのが、Anthony Fuさんの Furifont でした。 x.com Furifontは、フォント自体にふりがな付きの字形と置換ルールを持たせる仕組みです。 Ghostty のコミュニティで海外の人で日本語を勉強している人がいて、Furifontのコンセプトはいいんだけれど、日本語勉強するときには余計な場所に目がついてしまうから使えないという話をしていました。 「選択したときだけ使えたら面白そう」と思って試しに実装してみました。 デモ x.com ドラッグすると、選択した文字そのものがルビ付きの見た目に変わります。マウスを離しても選択が残っている間は表示し、選択を外すと元に戻します。 動画ではウィンドウ幅を変えたときの様子も試していて、ここら辺はやっぱり適切に日本語のルビが振られません。(Furifont側でも問題になっている) 文字列を変えず、描画するフォントを変える 今回追加したのは、選択範囲を見てフォントを切り替える処理で、ターミナルから選択した範囲を取得し字形のいちや大きさを決めています。 選択されていない文字 → 通常のフォント 選択された日本語 → Furifont 選択解除 → 通常のフォント 端末の本文に読みを挿入するのではなく、シェーピングに渡すフォントを切り替え、以降の字形描画にはGhosttyの既存の仕組みを使っています。 もし適切に文節の区切りが、折り返しで変わっても正確にルビが振られるようにするには、この部分で字句解析を行い、シェーピングのまとまりを決める必要があります。今回はそこまでやっていません。 試作版では、configで選択用フォントを指定しました。 selection-font-family = Furifont Sans まだ残っている課題 この実装は、Furifontの読みの曖昧さや、単語の途中で折り返したときの問題を解決していません。行や選択の境界でシェーピングのまとまりが分かれると、読みが変わったり、付かなくなったりします。 また、試作用の設定ではルビの余白を取るため、ターミナル全体の行高を50%増やしています。 次は行高を維持したまま、選択部分の「漢字+ルビ」をセル内に収める方法を試したいです。ただ、縮小すると読みにくくなるかもしれません。ここはまだ比較していません。 常に全部の文字にルビが付くより、読めないところだけ気軽に選べるほうが、普段の作業にも取り入れいよねと思っています。 (あんまり日本人としては気づかないルビ(ruby)の表示に関して勉強できて楽しかったです。) Furifontの公式リポジトリ / 設計ドキュメント
antfu/furifont これ、よー考えてある、なあ。ひらがなから漢字は多少一意に定めにくい点あるけど、漢字からひらがなだったら、例外はあるけどだいぶ一意に決められるはず、よね。 rubizaidan.jp これはルビ財団がきっちり売りこまないとだめちゃうか。松本さんは知ってるんやろか。
フロントエンド開発で使えそうなskills packのようだ。 含まれるスキルは、JavaScript/TypeScriptの慣習、Vue/Nuxt/Vite/Pinia などのベストプラクティス、コードレビュー、TDD、わかりやすい文章作成、UIデザインなど多岐にわたっているようだ。 antfu/skills-pack
This is powered by antfu/skills-npm, which allows npm packages to ship skills, or declare their "skill dependencies", so you can create shared packs/presets with your team or the community. We are working with the skills-cli team to have this builtin.
Introduce @antfu/skills It works just like @antfu/eslint-config, an opinionated pack of skills curated from the ecosystem. Instead of vendoring skills, you get a package-manager-like experience: install packs with their skill deps. antfu/skills-pack
This is powered by antfu/skills-npm, which allows npm packages to ship skills, or declare their "skill dependencies", so you can create shared packs/presets with your team or the community. We are working with the skills-cli team to have this builtin.
Introduce @antfu/skills It works just like @antfu/eslint-config, an opinionated pack of skills curated from the ecosystem. Instead of vendoring skills, you get a package-manager-like experience: install packs with their skill deps. antfu/skills-pack
Pulls.review – A better way for review GitHub Pull Requests
And maybe my first time to find p0 bug? pulls.review#59