はじめに

こんにちは、株式会社レコチョク新卒1年目の本多啓路と申します。 現在はプロダクト開発第1グループに所属しており、Androidアプリの開発に携わっています。

今回はテキストの高さが日本語の有無によって上下する原因について調査する機会がありましたので、紹介していきたいと思います。

発端となった事象

アプリ開発のテスト中にテキストの大きさ(フォントサイズ)を同じにしているにもかかわらず、日本語がテキスト内に含まれるかどうかによってテキストの高さが微妙に違っているという事象が見つかりました。

• 事象を再現した画像

//プログラムより抜粋
Text(
    text = "Sample",
    fontSize = 16.sp,
)

この事象を修正するにあたり、フォントサイズについての調査を行う運びとなりました。

調査結果

調査結果としては、以下の2点が原因で今回の事象が起こっているということがわかりました。

1. アルファベットと日本語は違うフォントサイズでレンダリングされている

同じフォントサイズで設定を行った際でも、日本語のフォントサイズはアルファベットのそれと比べて少し大きい数値となります。( px数値の場合だと平均1.25倍ほど )

• 実際にテキストの大きさを16.sp(文字サイズを指定する単位)にしたときの比較
  • 今回の例だと日本語はアルファベットの約1.38倍大きい

2. デフォルトでテキストの最初と最後の行がトリミングされるようになっている

これはCompose BOM バージョン 2024.01.01 以降で実装された、パディング処理とテキスト位置の調整が行える試験運用版 API であるLineHeightStyleの機能によるものになります。こちらのトリミングを行う項目 trimのデフォルト値が最初と最後の行をトリミングするBothとなっています。

lineHeightStyle = LineHeightStyle(
    alignment = LineHeightStyle.Alignment.Proportional,    //テキストの配置
    trim = LineHeightStyle.Trim.Both    //テキストのトリミング設定
)

以上の調査結果をまとめると、テキストの高さが上下してしまっているのはフォントサイズが違うものをそれぞれトリミングしているから、という結論が導き出せました。

対策方法

対策方法としては行の高さをフォントサイズの1.5倍以上にし、トリミングを行わない Noneにしました。 具体的なコードは以下の通りです。

//変更前
Text(
    text = "Sample",
    fontSize = 16.sp,
)

//変更後
Text(
    text = "Sample",
    fontSize = 16.sp,
    style = TextStyle(    //スタイルの追加
        lineHeight = 24.sp,    //行の高さをフォントサイズの1.5倍に設定
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,    //中央揃え
            trim = LineHeightStyle.Trim.None    //トリミングを行わない
        )
    )
)

実際に変更した画像がこちらになります。

まとめ

本記事では日本語の有無によってテキストの高さが上下してしまう原因について紹介しました。

細かい部分ではありますが、Composeを使ったUI作成においては考慮すべきポイントなので気をつけていきたいなと思います。

参考資料

スタイル段落 日本語の文章とline-heightに対する考察