omoidasu logoomoidasu title logo
記事一覧アプリ
2020-08-03

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

react-native
font
custom font
styling
Before After

要約

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

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

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

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

筑紫A丸ゴシックの例. 行間が開いている

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ファイルをアプリに反映させて画面を見てみると...

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

更新後の例. 行間が縮まっている

参照

最終更新:
2020-08-04 01:10
作者:
@gaishimo
主にReact Nativeでのアプリ開発を行っています。
アプリ