ある日、UIデザインの観点で以下のような要件が求められました。

①任意の幅で表示できるなら1行で。
②表示しきれない場合は改行していい。
③しかし、ある文節は改行で区切られないようにしたい。

②のような改行ではなく、③のようにカッコ内は改行させず、その前で改行させる

最後の項目③のおかげで一見、困難そうですが、
スマホアプリで一般的に用いられている文字コード規格「Unicode」に、まさに最適の文字がありました。

参考:The Unicode Standard / Chapter 4 Character Properties

0020 space
00A0 no-break space

「0020 space」は、お馴染み「スペースキー」で打てる空白です。
「00A0 no-break space」は、見た目は空白と同じですが、「改行しない」という役目を持っています。

定義をリソースだけで解決する

Android版とiOS版ともに、この「改行しない空白を含めた文字列」の定義をリソースファイルだけで解決します。
(プログラムコードを使うのはそのリソースを参照するときだけです)

Android版

それではまず、Android版から実装してみます。

<!-- strings.xml -->
<resources>
    <string name="app_name">NonBreakSpaceSample</string>

    <string name="title">BERSERK -Forces- (GOD HAND MIX)</string>
    <string name="title2">BERSERK -Forces- (GOD\u00A0HAND\u00A0MIX)</string>
</resources>

“title2″の文字列では、カッコ内の空白を「\u00A0」に置き換えています。

1番目と3番目に適用。改行の必要がない場合は通常の空白と見た目は変わらない。

リソース参照ではなく、直接文字列を書く場合も同様に「\u00A0」と表記できます。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="BERSERK -Forces- (GOD\u00A0HAND\u00A0MIX)"
    android:textSize="30sp" />

HTMLのように例えば「&」を表示するときは「&amp;」と表記するので、
これについても「&nbsp;」などと表記すると思ったのですが、変換されませんでした。

iOS版

次にiOS版で実装します。

/* 
  Localizable.strings
*/

"title" = "BERSERK -Forces- (GOD HAND MIX)";
"title2" = "BERSERK -Forces- (GOD\U00a0HAND\Ua0MIX)";

iOS版のリソースでは「\U00a0」のように、大文字の\Uとコードで表記します。

参考:Using Special Characters in String Resources

Android版と同様に、ノーブレークスペースの直前の空白で改行される。

リソース参照ではなく、直接文字列を書く場合は「\u{00a0}」のように、小文字の\uと波括弧で表記する必要があります。

参考:Special Characters in String Literals

Text(verbatim: "BERSERK -Forces- (GOD\u{00a0}HAND\u{a0}MIX)")

同じ意味なのに異なる表記を混在させると、管理や変更に支障がでる恐れがあるので、実装するときは全てリソース定義にすることをおすすめします。

おわりに

アプリの多言語対応について、例えば小さいボタンなどの文言が言語ごとに文字数の差が大きいとデザインの影響も大きくなり、「英語版だけ改行する」などの調整が必要になりました。
今回のように「特殊な文字」の存在を知っておくと役に立ったので、基本的な内容ですが今回、Android版、iOS版 ともに、ここにまとめました。



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある!一緒に働いてみたい!という方は下記よりご応募お待ちしております。
採用情報をみる