2020-08-03

React Nativeでカスタムフォントの行間がやたら拡がってしまう場合の調整方法

react-native

font

custom font

styling

要約

カスタムフォントによって行間が大きく開いてしまうことがある
フォントファイルを編集して調整できる
Font Tools for XCodeを使う
hheaテーブルのascender, descender, lineGap辺りを確認・調整する

カスタムフォントの行間問題

React Nativeでカスタムフォントを使った場合、font-familyによって行間がやたらと拡がってしまう場合があります。

例えば、筑紫A丸ゴシック R を使った場合の例を挙げます。以下のように行間がかなり開いてしまいます。

iOSのデフォルトのシステムフォントを指定した場合は以下のようになります。行間がほとんど開いていません。

この行間のギャップはlineHeightを指定しても縮めることはできず、heightを指定すると複数行のテキストを表示することができなくなってしまいます。

これに対応するためにはフォントファイル自体を編集する必要があります。

フォントファイルの編集

カスタムフォントにOTFを使っている前提で進めます。

まずFont Tools for XCode をこちらからダウンロードします。ダウンロードすると、ftxdumperfuser というCLIツールを使えるようになります。

フォントファイル(.otf)を特定のフォルダに置き、該当フォルダで以下のコマンドを実行するとフォントファイルの中身をXMLに出力してくれます。

ftxdumperfuser --table hhea --auto d font-file.otf

--auto d : auto dumpを実行
--table hhea : 対象としてhheaテーブルを指定

※hheaはOpen Typeフォントを構成する情報テーブルの一つで、横書き用の情報ヘッダーが格納されています。

カレントディレクトリに出力されたXMLを開いてみると、中に以下のような記述があります。

<hheaTable
    versionMajor="1"
    versionMinor="0"
    ascender="880"
    descender="-120"
    lineGap="1000"
    advanceWidthMax="1056"
    minLeftSideBearing="-247"
    minRightSideBearing="-248"
    xMaxExtent="1132"
    caretSlopeRise="1"
    caretSlopeRun="0"
    caretOffset="0"
    metricDataFormat="0"
    numberOfHMetrics="8721"
    />

この中のascender, descender, lineGap 辺りが関連していそうです。

これらの値については、こちらの記事の説明が分かりやすいです。 A-Liaison BLOG: iOSのフォントのお話

lineGapが1000とかなり高めに指定されているので、行間が大きく開くのはこれが原因と思われます。

このlineGapの値を120に変更してみます。 ※以下を参考にしascenderとlineGapの合計が1000になるようにしてみました

Font embedded line height issue · Issue #17322 · facebook/react-native

XMLを更新した後、以下のコマンドでXMLをotfファイルに反映させます。

ftxdumperfuser --table hhea --auto f font-file.otf

--auto f: do an auto-fuse (合成するというような意味?)

成功すると元のotfファイルが更新されます。otfファイルをアプリに反映させて画面を見てみると...

行間が縮まっているのが確認できました!

React Nativeでカスタムフォントの行間がやたら拡がってしまう場合の調整方法

要約

カスタムフォントの行間問題

フォントファイルの編集

参照