事象
日本語から英語に翻訳すると、単語やインラインタグの前後にスペース（ゼロ幅スペース）が入ってしまい、レイアウトが崩れてしまう。
空白が入っている箇所の HTML ソースを確認すると、「​」や「​」などの文字列が挿入されている。
原因
機械翻訳エンジンの仕様上、英語などの単語をスペースで区切る言語では、翻訳結果にスペースが自動的に挿入されます。
その結果、インラインタグの間にも「ゼロ幅スペース（）」 が挿入され、レイアウト崩れの原因となる場合があります。
| 言語 | 文章 |
|---|---|
| 日本語 | <span>今日の天気は</span><span>晴れ</span><span>です</span> |
| 英語 | <span>It's</span> <span>sunny</span> <span>today</span> |
この例では、スペースが入らない場合、翻訳後の文章が It'ssunnytoday となってしまいます。
これを避けるため、すべてのインラインタグの前後に、自動的にスペースを挿入し、It's sunny today としています。
これによって単語やインラインタグの前後にスペースが入り、結果、レイアウト崩れが発生します。
解決方法
レイアウト崩れが発生した場合、対象箇所を ライブ編集機能 で確認すると、スペースが挿入されていることを確認できます。
ゼロ幅スペースを削除すると、レイアウト崩れが直る場合があります。
WOVNにログインした状態で該当するページを開きます。
右下のウィジェットで「Live Editor」を押下し、ライブ編集画面を開きます。
3. 左上のプルダウンメニューから、修正したい言語を選択します。
4. 修正したいテキストを選択します。
5. 右側の翻訳編集枠に表示されている小さな空白スペースを、キーボードの BackSpace キーで削除します。
必要に応じて、翻訳修正も行います。
6. 「Save and publish」ボタンを押下し、修正結果をサイトに反映します。
7. ページを再読み込みし、レイアウト崩れが直っているかどうか確認します。