Nerd fontとpowerlineとambiguous width

# はじめに

こんにちは。まとまった休日を使ってターミナルの設定をいじるのが最近の趣味です。
そんなことをしていたらフォント周りで2日くらい溶けた。失われた時間への供養として調べたことのメモを置いておく。

簡単にこの記事をまとめると、

- [Nerd Fonts](https://github.com/ryanoasis/nerd-fonts)の一部である[Powerline Extra Symbols](https://github.com/ryanoasis/powerline-extra-symbols)がかっちょいいので和文フォントでも使ってみたい
- なんか表示がずれるのでフォントずれの原因であるUnicodeのambiguous widthについて調べてみた
- 自分の環境では色々試したけど結局上手くいかないので自分でフォントを作るか？

**2019/12/27 追記**
以下で区切り文字がピッタリ合わないとひたすら文句を言っている部分があるが、powerline用フォントの表示が「微妙に」ずれるのはambiguous widthかどうかは関係なくターミナルとフォントの相性によるようだ。フォントサイズや解像度、フォント合成に使ったpatcher等で容易にずれる。そもそもpowerlineの区切り文字を合わせる際に無理をしているので高さが合わないことがある。

# Powerline Extra Symbolsとの出会い

私はterminal上にtmuxを起動し、その中でvimを起動するスタイルで普段作業している。
今までの設定でも特に不満はなかったのだが、気持ちを入れ替えるという意味でも設定を見直してみようと思った。年末の大掃除みたいな。

最近、powerlineのいかにもpowerlineな区切り文字（`>`とか`<`）にどうも飽き飽きしてしまった。
導入した当初は最高にクールなターミナルだと感じていたのだが、慣れというものは恐ろしい。
なにか目新しいものはないかと探していたところ、[𝑺𝒆𝒙𝒚 & 𝑷𝒐𝒘𝒆𝒓𝒇𝒖𝒍 𝑪𝒐𝒏𝒇𝒊𝒈𝒖𝒓𝒂𝒕𝒊𝒐𝒏 𝒇𝒐𝒓 𝑳𝒊𝒈𝒉𝒕𝒍𝒊𝒏𝒆 𝒂𝒏𝒅 𝑻𝒎𝒖𝒙](https://gist.github.com/sainnhe/b8240bc047313fd6185bb8052df5a8fb)を発見した。

![𝑺𝒆𝒙𝒚 & 𝑷𝒐𝒘𝒆𝒓𝒇𝒖𝒍 𝑪𝒐𝒏𝒇𝒊𝒈𝒖𝒓𝒂𝒕𝒊𝒐𝒏 𝒇𝒐𝒓 𝑳𝒊𝒈𝒉𝒕𝒍𝒊𝒏𝒆 𝒂𝒏𝒅 𝑻𝒎𝒖𝒙](https://user-images.githubusercontent.com/37491630/67563218-c862d080-f70f-11e9-9add-df2427a26667.png)
（[画像元](https://gist.github.com/sainnhe/b8240bc047313fd6185bb8052df5a8fb)）

なんだこの斜め区切りは。見たことがない。しかも[セクシー](https://ja.wikipedia.org/wiki/%E5%B0%8F%E6%B3%89%E9%80%B2%E6%AC%A1%E9%83%8E)である。

そしてこの区切り文字は[Nerd Fonts](https://github.com/ryanoasis/nerd-fonts)の一部であると知った。これは何としても使ってみなくてはならない。

Nerd Fontsは相当な量のアイコン用フォントをunicodeのprivate領域に割り当てるもので、その中に例の斜め区切りが含まれているようだ。
[Powerline Extra Symbols](https://github.com/ryanoasis/powerline-extra-symbols)はNerd Fontの一部としてインストール可能であり、この中に斜め区切りのフォントが仕込まれている。Powerline Extra symbolsにはよく見る`>`みたいな形だけではなくスタイリッシュなものから厨二的なものまで揃っている。

ぜひこれを[Ricty](https://rictyfonts.github.io/)等の和文フォントでも使ってやりたいというのがこの記事。
先に断っておくと、自分の環境では微妙にズレたり何だりで上手く和文フォントと組み合わせることができなかった。

# Unicodeにまつわる背景

Nerd Fontsをターミナルで適切に表示させるためには、Unicodeの仕様がどのように定義されていて、ターミナルやshell、vimなどの実装がどうなっているかを知る必要がある。

（もっとも、そんなことを考えずにfontを使えたら一番であるが、、）

## そもそもPowerlineはどのように実現されているか

ターミナルの表示は全て文字である。vimの区切り線もtmuxの区切り線も、powerlineの区切り文字も全て文字である。
Unicodeでは[box drawing](http://unicode.org/charts/PDF/U2500.pdf)が文字として定義されており、tmux等ではこれを用いて境界を引いている。
powerlineの区切り文字（`>`とか`<`）はunicodeの仕様で定義されたものではなく、unicodeの好き勝手にしていい領域（private）に区切り文字を用意し、それを表示することで実現している。
つまり、フォントに新たな区切り文字を追加し、その文字コードをshellやvim、tmuxに埋め込むのだ。

原理はとても単純である。なんか簡単にできそうな気もする。
しかし、ある特定の文字が全角か、半角か、それが「曖昧」として「定義」されていることによってターミナルの世界に混沌がもたらされる。

## Ambiguous-width Characters

Nerd FontsではVimの**V**マークが`U+E7C5`に割り当てられる。

早速これをターミナルで表示してみると
![nerdfont.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/1be36e54-d722-8bdf-3982-b59d9dd22e12.png)
Vimの**V**がbに重なってしまっている。いかん。

これはシェル、ターミナルがこれを半角文字であるとして取り扱っているのに対し、フォントが全角幅を持っていることが原因である。

これはまだ単純な例だが、ここにtmuxやらvimやらが絡んできて、それぞれが違う文字幅を仮定してしまえば[てんやわんや](https://you84815.blogspot.com/2018/08/tmux-vim.html)である。

なぜこんなことになっているのかといえば、平たくいってしまうとunicodeの仕様が悪い。

unicodeには**ambiguous width**という概念があり、この属性を持った文字は仕様上半角でも全角でもオーケーなのだ。そんなの不整合が生じるに決まっている。

と、仕様に文句を言うのは簡単だが、仕様を決めるのは難しいということを仕様を読んで理解するところまでが1セットである。
（Ambiguous widthについて: [Unicode® Standard Annex #11 East Asian Width](https://www.unicode.org/reports/tr11/tr11-36.html)）

では各ソフトウェアはどのように半角か全角かを決めているかという話である。
例えば、gnome-terminalでは設定で`Ambiguous-width Characters`を`Narrow`にするか`Wide`にするかを選択することができる。

では先程の文字の重なりを修正するにはambiguous width charactersの幅をwideにすればいいじゃないか。

しかしそれだと今度はtmuxで表示が崩れる。
（issue: [Seeing tmux splits in other panes](https://github.com/tmux/tmux/issues/249)）

何故こうなるかといえば、tmuxがpaneの区切りに使っている文字がambiguous widthだからである。

https://www.unicode.org/Public/UCD/latest/ucd/EastAsianWidth.txt より

```
2500..254B;A     # So    [76] BOX DRAWINGS LIGHT HORIZONTAL..BOX DRAWINGS HEAVY VERTICAL AND HORIZONTAL
```
と、box drawing charactersはambiguous width (`A`)に分類されるため、unicodeの仕様上は半角か全角かはどちらでもいいことになる（文脈依存）。

tmuxはターミナルの設定を知る由もなく、box drawing charactersが幅1であるとしてpaneを埋めるだけの数の文字を発行するが、ターミナルはそれを幅2であると解釈して表示してしまう。

結局、どちらをデフォルトにすべきかどうかは明確ではない。

[Unicode® Standard Annex #11 East Asian Width](https://www.unicode.org/reports/tr11/tr11-36.html)より

> If the context cannot be established reliably, they should be treated as narrow characters by default.

と書いてあったりもするのでやはり、「基本は半角で、特別な場合は全角を使ってね」というスタンスのように感じる。
歴史的経緯でambiguous-width charactersが発生してしまったが、ゆくゆくはhalf widthに統一していきたいということであろうか（であってほしい）。

## private領域におけるAmbiguous-width Characters

Ambiguous-width charactersは、日本語環境において`◯`、`※`、`△`、`’`等の文字の表示が崩れる、という文脈で触れられることが多いのだが、今回問題になるのは追加で勝手に定義したprivate領域の文字である。

[Unicode® Standard Annex #11 East Asian Width](https://www.unicode.org/reports/tr11/tr11-36.html)より

> Private-use character codes and the replacement character have ambiguous width, because they may stand in for characters of any width.

つまりprivate領域の文字、つまりここではNerd Fontによって定義されるアイコンその他諸々は全てambiguous widthを持つことになる。なんてこった。

前項で触れたようにターミナルにおいてambiguous-width charactersの幅はhalfに指定しておいたほうが何かと都合が良い。
しかしprivateな領域に実際に使われるのはアイコンなどの文字であり、それらは大抵の場合full widthの方が正方形に近くなり見栄えが良い。

ここに来て、「ambiguous-widthがhalfであると仮定している既存ソフトウェア」と「ambiguous-widthをfullで使いたいicon fonts」の間の折り合いを付けなくてはならないのである。

（せめて全角と半角でprivate領域を分けてくれていればこんなことには、、、）

ちなみにunicodeで定義されているemojiはもはやambiguous widthではない。
2016年に出た[Unicode® Standard Annex #11 East Asian Width Revision 31](https://www.unicode.org/reports/tr11/tr11-31.html)で初めてemojiに関する記述が追加された。

> Emoji style standardized variation sequences behave as though they were East Asian Wide, regardless of their assigned East_Asian_Width property value.

emojiがambiguous widthではないというのは少々不正確かもしれない。emojiがどんなwidth属性を持っていようと関係なくwide幅で表示するべき、ということになっている。

とにかく、今回問題になるのはprivate領域内の、仕様で定義されないemoji（に類するもの）の表示幅がambiguousである、ということになる。

## `wcwidth`による解決の可能性

`wcwidth`関数がPOSIXの仕様に含まれている。
これは文字を引数に取り、その文字の幅（大抵の場合1 or 2）を返す関数である。

shellも、vimも、tmuxも、terminalも、全員が全員`wcwidth`を使っていれば、`wcwidth`が返す値を変更することで統一的にambiguous widthの表示幅を決め打ちすることができる。
例えばprivate領域にあるフォントを追加して、それらの文字コードに対して`wcwidth`が返す幅を自分で設定することができたりすると嬉しい。
（これは`LD_PRELOAD`で動的に`wcwidth`を上書きすることで可能。[wcwidth-cjk](https://github.com/fumiyas/wcwidth-cjk)とか[wcwidth-icons](https://github.com/powerman/wcwidth-icons)）

しかし、shell、vim、tmux、terminalのうち1つでも`wcwidth`を使用せずに勝手な判断をすると全てが台無しになる。

少なくとも、gnome-shellは`wcwidth`を使っていないようだしtmuxも[なんかあやしい](https://uwabami.junkhub.org/log/20170208.html)。

この解決が最も一貫性があって好きなのだが、現状ではあまり上手くいかない。

## 自分が思う現時点でのベストプラクティス

ambiguous-widthはとりあえずhalfで固定してしまいたい。
実は[tmuxにパッチを当てる](https://github.com/z80oolong/tmux-eaw-fix)ことでtmux罫線問題は解決するのであるが、自分でパッチを当てるのはあまり気が進まない。
また、このような問題がtmuxだけで生じるとも限らない（[例えばこんなやつ](https://github.com/workshopper/workshopper/issues/73)）。

そうなるとNerd Fonts等のicon fontも半角で表示されることになる訳だが、これは後ろに空白を入れておくことで解決したりする。
![nerdfont2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/74d7ef7d-5c14-a051-086e-1c0b97d6fbc4.png)
（これもいかにもworkaroundという感じで好きではないが）

以下ではとにかく、ambiguous-widthは半角であるとして扱い、全角のフォントを持つambiguous-width charactersに関しては後ろに空白を入れることで対応する。

# 動作環境

本記事は多分に環境依存であると思われる。

- OS: `Ubuntu MATE 18.04`
- kernel: `5.0.0-37-generic`
- terminal: `MATE terminal v1.20.0`
    - （一応`gnome-terminal v3.28.2`も試してみたが大差なし）
- shell: `bash v4.4.20(1)-release`
- neovim: `v0.5.0-dev`
    - plugin: [lightline.vim](https://github.com/itchyny/lightline.vim)
- tmuxは噛ませずにterminalのbashでneovimを起動して動作確認

# [Nerd Fonts](https://github.com/ryanoasis/nerd-fonts)を使ってみる

長くなってしまったが、ようやくここで[Nerd Fonts](https://github.com/ryanoasis/nerd-fonts)を使っていい感じのpowerlineにすることを試みていく。

[Powerline Extra Symbols](https://github.com/ryanoasis/powerline-extra-symbols)のフォントも例に漏れず全角なので、後ろにスペースを入れるなどして対処する。

## [RictyDiminished-Nerd-Fonts](https://github.com/macchaberrycream/RictyDiminished-Nerd-Fonts)

[RictyDiminished-Nerd-Fonts](https://github.com/macchaberrycream/RictyDiminished-Nerd-Fonts)は、[Ricty Diminished](https://github.com/edihbrandon/RictyDiminished)にNerd Fontsを当てたもの。そのまま配布されていてありがたい。

どうやらNerd Fontsの本家のpatcherではなく、[fontmerger](https://github.com/iij/fontmerger)という和文フォントでも綺麗に表示されるように改良したものを使ってpatchを当てている。
（参考: [ターミナルでアイコンフォントを使う理由](https://eng-blog.iij.ad.jp/archives/421)）

![powerline5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/b8c0aa82-a8c3-6801-d9ae-4ecc077763f0.png)
左右ズレが若干ある。

次に斜め区切りを試してみる。
![powerline6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/af8fba23-983e-75e6-51a8-7f6f14b6814f.png)
やはり少しずれるようだ。

## [Cica](https://github.com/miiton/Cica)

[Cica](https://github.com/miiton/Cica)はとてもいい感じの日本語フォントセット。Nerd Fontsを含んだ形で配布されているのでインストールがとても楽ちん。
これもNerd Fontsを適用後にズレの修正を行ったりしているらしい。

![powerline3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/c69c5854-269a-a1de-5e6a-f0cee2889a71.png)
これも大きなずれはないものの、左の隙間が気になってしまう。
また、フォントの構造としては`>(空白)`, `(空白)<`なので、`<`の左側に追加の空白が生じてしまうのが残念。

斜め区切りを試してみる。
![powerline4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/ed666b84-eb6b-4d4e-3b4c-5ab74bd0e35b.png)
だいたいOKだがやはり惜しい、、、。

## Rictyに直接Nerd Fontのパッチを当てる

ダメ元で。

```
⟩ fontforge -script /path/to/nerd-fonts/font-patcher Ricty-Regular.ttf --powerline --powerlineextra
```
（boldも同様）

![powerline7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/95e83662-2969-1e4d-dca1-755b93fcc84c.png)
なんか似たような感じ。

![powerline8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/2b994c46-45ca-e8d1-b525-80afd1a4d062.png)
右側が余計にひどくなった。

## 待たれよ

[𝑺𝒆𝒙𝒚 & 𝑷𝒐𝒘𝒆𝒓𝒇𝒖𝒍 𝑪𝒐𝒏𝒇𝒊𝒈𝒖𝒓𝒂𝒕𝒊𝒐𝒏 𝒇𝒐𝒓 𝑳𝒊𝒈𝒉𝒕𝒍𝒊𝒏𝒆 𝒂𝒏𝒅 𝑻𝒎𝒖𝒙](https://gist.github.com/sainnhe/b8240bc047313fd6185bb8052df5a8fb)を見返してみると斜め区切りは全角じゃなくないか？そもそも半角のほうがセクシーである。

どうやら[Nerd Fontのpatch用スクリプトには以下のオプションがあり](https://github.com/ryanoasis/nerd-fonts#option-8-patch-your-own-font)、これを指定することで半角のフォントが生成できるらしい。

```
-s, --mono, --use-single-width-glyphs
                        Whether to generate the glyphs as single-width not double-width (default is double-width)
```

やってみたが、フォントが分かりやすく"終わって"しまった。日本語フォントはmonoとは相性が悪いみたいだ。

# Powerline Fontのpatchを当てる

そもそもNerd Fontsを使うと普通のpowerline（`>`とか`<`）でさえズレるじゃないか。どうなってるんだ。

ここで気になったのは、本家のpowerlineではなぜ上手くいっていたか、ということだ。
そこで本来のpowerlineのパッチ（もはやnerd fontは関係ない）を試してみる。

## 本家の[fontpatcher](https://github.com/powerline/fontpatcher)を使う

powerline本家[powerline/powerline](https://github.com/powerline/powerline)のリポジトリにfontpatcherが置かれていたこともあったが、今は[powerline/fontpatcher](https://github.com/powerline/fontpatcher)にスクリプトが移動している。

mapping:

- ▶ : `U+E0B0`
- > : `U+E0B1`
- ◀ : `U+E0B2`
- < : `U+E0B3`

```
fontforge -script /path/to/fontpatcher/scripts/powerline-fontpatcher Ricty-Regular.ttf
```
（boldも同様）

表示してみるとこうなる。
![powerline2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/39b61f5c-295d-626d-96af-eaf674c7e80f.png)

右側の微妙なズレが気になる。
個人的には三角形が横長過ぎて気に食わない。区切りの`<`もなんか太い。本家ってこんな感じだったっけ。

## [vim-powerline](https://github.com/Lokaltog/vim-powerline)のパッチを使う

[vim-powerline](https://github.com/Lokaltog/vim-powerline)は既にdeplicated。

Unicodeの`U+2B60`-`U+2BFF`あたりの文字を上書きして潰してしまうのであまりお行儀の良いパッチとは言えない。これが作られた当初はこの辺の文字が未割り当てだったりしたんだろうか（知らない）。

mapping:

- ▶ : `U+2B80`
- > : `U+2B81`
- ◀ : `U+2B82`
- < : `U+2B83`

どうも自分が数年前にRictyにパッチを当てた際はこの方法でやって上手くいっていたらしい。

```
fontforge -script /path/to/vim-powerline/fontpatcher/fontpatcher Ricty-Regular.ttf
```
（boldも同様）

![powerline1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215516/99e75a28-644e-d111-8ce1-4b4b3c297464.png)
1ピクセルの乱れもない美しいpowerlineである。

vim-powerlineでは全角ではなく半角のフォントが生成されるのでシンプルで良い。
本家powerlineのフォントは全角を使いたがっているが、どうもそのせいで表示がずれやすくなっている気がする（気がする）。半角でいいじゃん。

# Powerlineフォント内蔵ターミナル

[kitty](https://github.com/kovidgoyal/kitty)というターミナルは[ターミナル自体にpowerline的なフォントを備えている](https://github.com/kovidgoyal/kitty)のでfontにパッチを当てずともイケてる見た目のpowerlineが得られるらしい。すごい。
しかし、現状では[こんなかんや](https://github.com/kovidgoyal/kitty/issues/179)でRicty等の日本語フォントを含むフォントが無視される。無念。

# おわりに

いかがでしたか？

ターミナルの区切り文字をかっこよく表示する方法について調べてみましたが、よく分かりませんでした！

という典型的なアレになってしまった。

まとめると

- 全角の追加アイコンフォントにはunicode仕様上の困難が伴う
    - private領域のunicodeは全てambiguous width
- Nerd Fonts（というよりPowerline Extra Symbols）を使うと微妙にズレて気持ち悪い
    - Powerline Extra Symbolsのフォントが全角なのが良くない？
- 通常版powerlineの[vim-powerline](https://github.com/Lokaltog/vim-powerline)（deprecated）は良いpatchを提供する
    - 半角なのでズレにくい？

で、結局、件のセクシーな区切り文字のpowerlineを和文フォントで実現するにはどうしたら良いかといえば、あまりいい解決策が現状ない。

しかしまだ諦めてはいない。

少々手間はかかるが、[vim-powerline](https://github.com/Lokaltog/vim-powerline)のパッチを解読し、fontを親交を深め、自分が思うままの**半角の**区切り文字のフォントを作り出すしかないだろうか。

svgか何かを渡せば自動でpowerlineの区切り文字フォントを作ってくれるスクリプトも頑張れば作れるのかもしれない（可能であれば）。それは結構ほしいかも。

また、当方にわかフォント人間です。何か間違いだったり、記事に書かれていない知見がありましたらご指摘いただけると幸いです。

# 参考

- [𝑺𝒆𝒙𝒚 & 𝑷𝒐𝒘𝒆𝒓𝒇𝒖𝒍 𝑪𝒐𝒏𝒇𝒊𝒈𝒖𝒓𝒂𝒕𝒊𝒐𝒏 𝒇𝒐𝒓 𝑳𝒊𝒈𝒉𝒕𝒍𝒊𝒏𝒆 𝒂𝒏𝒅 𝑻𝒎𝒖𝒙](https://gist.github.com/sainnhe/b8240bc047313fd6185bb8052df5a8fb)
- [ターミナルでアイコンフォントを使う理由](https://eng-blog.iij.ad.jp/archives/421)
- [CUIでお洒落な開発環境を整えよう](https://takuzoo3868.hatenablog.com/entry/2018/12/28/032148)
- [Ricty + Powerline + NERD Fonts](https://the.kalaclista.com/posts/2016/05/29/003520/)
- [rictyにnerd-fontsのパッチを当てる(試行錯誤)](https://qiita.com/nechinechi/items/27f541849db04123ea15)
- [(解決) tmux で EAW二文字幅としてこの先生きのこるには](https://uwabami.junkhub.org/log/20170208.html)
- [debian stretch時代のtmux事情(East Asian Width問題)](http://m-akihro.hatenablog.com/entry/2017/06/20/015425)
- [ambiguous widthをもうちょっと何とかしたいメモ](https://wiki.ubuntulinux.jp/hito/WIP-ambiwidth)
- [East Asian Ambiguous Widthと絵文字の為の修正ロケール](https://github.com/hamano/locale-eaw)
- [tmux 2.2 以降で East Asian Ambiguous Width Character を正しく表示させる方法](https://eagletmt.hateblo.jp/entry/2016/08/25/024136)
- [East Asian Width(UTF-8 ambiguous)](https://utatane-constellation.tumblr.com/post/462629525)