翻訳後のUIで文字が切れる・重なる — 原因別の直し方

原文言語では「確定」のようなボタン表示が余裕を持って収まっているのに、翻訳後のラベルは長くなり、末尾の文字がボタンの外にはみ出して見えなくなる。あるいはツールチップの2行目が下の行と重なる。原文言語のビルドではレビューを何度通しても問題なく見えていたのに、文字列が翻訳版に差し替わった途端に発生する不具合です。

これは翻訳の質の問題ではありません。単語自体は正しいのです。問題は、レイアウトが原文言語の平均的な長さだけを想定して作られ、他の言語で検証されたことがなかったという点にあります。「この文字列をどう短くするか」を単独で考えるのではなく、短縮・レイアウト変更・折り返し許可という3つの選択肢のうち、目の前の原因に本当に対応するのはどれかを見極める必要があります。

直す前に、本当の制約を特定する

見た目は同じ症状でも、原因になっているレイアウト上の判断は3通りあります。まずどれに該当するかを確認してから手を付けます。

• 折り返しもオーバーフロー処理もない固定幅・固定高さのコンテナ — 文字が単純に枠外へはみ出すか、CSSのoverflow設定でクリップされる
• パイプラインのどこかで課されている文字数上限が、対象言語にとって適切な単位で測られていない(後述)
• フォントメトリクス — 同じポイントサイズ、同じ文字数でも、翻訳先のスクリプトが原文フォントより背が高い・幅が広い・行間が広く描画される

文字数制限が正しい単位を測っていない理由

「最大20文字」という制限は、意味が同じでも言語によってまったく異なる挙動をします。平均的な単語が長い言語(ドイツ語の複合名詞が典型例)では、同じ内容を表すのに英語より多くの文字数が常態的に必要です。一方でCJK言語は同じ意味を表すのに必要な文字数がずっと少ないことが多いものの、1文字あたりの見た目の幅は広く、10文字の日本語文字列が20文字の英語文字列より視覚的に幅広くなることもあります。

つまり全言語共通の単一の文字数上限は、多くの文字数を必要とする言語では切り詰めすぎ、少ない文字数で広い幅を占める言語ではレイアウトの余白を無駄にします。レイアウト上、本当に意味を持つ単位は対象フォントで描画したときのピクセル幅であって、文字数はそれを安価に近似するだけの、精度の低い代用にすぎません。

// 幅を無視した上限は、収まらない文字列を通してしまう
const maxLength = 20;
"设置".length                  // 2  — 余裕で通るが、描画結果は別問題
"Application Settings".length  // 21 — 文字数では弾かれるが、実は収まることもある
// 文字数と描画幅は同じ軸ではない

短縮・レイアウト変更・折り返し許可、どれを選ぶか

短縮が正解なのは、文字列がボタン・タブ・バッジのような固定サイズの小さなコントロールのラベルで、折り返しやサイズ変更が全画面で使われるコンポーネントの見た目を壊してしまう場合です。翻訳者に同じ意味でより短い訳語を依頼します。これは翻訳作業であり、エンジニアリングの作業ではありません。

レイアウト変更が正解なのは、コンテナのサイズが仕様上の制約ではなく単に恣意的に決められていた場合です。カードやパネル、モーダルなど、周囲を壊さずに単純に幅や高さを広げられる箇所であれば、選択肢がある限りこれが最善の直し方になります。制約そのものを取り除くからです。

折り返し許可が正解なのは、1行固定のコントロールラベルではないテキスト全般 — 説明文、本文、リスト内のアイテム名など — です。「絶対に折り返してはいけない1行」という要件は、実際のUIが必要とするより厳しすぎることが多く、それが本当に意図された制約なのか、原文言語のデザインからそのまま引き継がれただけなのかを確認する価値があります。

機械的にチェックできる文字数予算を設定する

本当の制約が描画幅であるとわかったら、その予算を人間がスクリーンショットを1枚ずつ目視しなくても検証できる形で表現します。方法は2つ — 対象フォントで実際に描画したときの最大ピクセル幅を文字列ごとに持つか、より安価な近似として、原文の長さに言語ごとの拡張係数を掛けたものを使うかです。膨張率は言語ペアごとにある程度予測可能で、ランダムではありません。

// 安価な近似: 言語ごとの拡張係数
const expansionFactor = { de: 1.3, ja: 0.6, ko: 0.7, "zh-CN": 0.5 };
const budget = Math.ceil(sourceLength * (expansionFactor[targetLang] ?? 1.2));

予防策

固定幅のコントロールは、原文言語ではなく実際に出荷する言語のうち最も長くなるものを基準に設計します。膨張率のストレステストにはドイツ語やフィンランド語、1文字あたりの視覚幅のストレステストには日本語や韓国語が適しています。どの直し方を選ぶにせよ、その文字列のキーのそばに制約(最大幅、または折り返し可否)を記録しておけば、次の翻訳者や次のUI変更が同じ問題を再発見せずに済みます。