概要
WOVN で切り替えた言語に応じて、テキストに改行（ホワイトスペース）を挿入できます。
日本語から多言語に切り替えたときに、特定のテキストに対して改行の挿入によってレイアウトを調整したい場合、この機能を利用して対応できます。
元サイトで <br> タグがない、あるいは <br> タグの挿入が難しい場合にご利用ください。
インフォメーション
当機能は、初期状態では無効になっています。
ご利用希望の場合は、WOVN管理画面右上の「お問い合わせ」ボタンからお問い合わせください。
目次
注意点
CSS での記述、ならびに HTML タグ内への固有の class 属性の追加が必須です。
CSS については WOVN のCSSカスタマイズ機能を利用するか、元サイトに CSS を記述してください。
本機能を利用する前準備を行う
改行を挿入したいテキストの HTML に、固有の class を設定する
改行を挿入したいテキストの HTML タグ内に、固有の（一意の）class 属性を設定してください。
例：
<div>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</div>
というテキストの翻訳後テキストに改行を入れたい場合
<div class="customer-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</div>
という形でタグ内に class 属性を設定します。
注意
class 属性は他の箇所で使われていない一意のものを使用してください。
WOVN のCSS カスタマイズ機能で、CSS 設定を実施する
インフォメーション
元サイトに CSS を記述する場合は下記手順 3. の内容を元 CSS 内に記述します。
改行を挿入したいテキストが存在するページの「翻訳編集ページ」→「CSS編集」タブで、下記の手順で CSS の記述を設定してください。
- 「翻訳編集ページ」を開き、上部の「CSS編集」タブを押下します。
- 「本ページのみ」タブを押下し、改行を挿入する対象言語を設定します。（対象ページ・対象言語にのみ、CSS の記述が適用されます）
- 下記のように、空白スペース（white-space）を改行とみなす制御をするための CSS を記述します。
.customer-text {
white-space: pre-line;
}
インフォメーション
「customer-text」の部分には、前項で設定した固有の class 属性を入力します。
必ず class 属性の前に「.」（ピリオド）を付与します。
- 画面右上の「保存＆公開」ボタンを押下します。
以上で、利用前の準備は完了です。
改行挿入機能を利用する
- WOVN 管理画面、左側メニュー「ページ」で、対象のページを検索し、URL を押下します。
- 翻訳編集ページを開きます。
- 改行を入れたい翻訳後のテキスト内で、Shift＋Enter キーを押下します。下図のように、「↵」アイコンが挿入されます。
- 画面右上の「保存＆公開」ボタンを押下します。
- 翻訳された実際の対象ページ開き、改行挿入を確認します。
例：
日本語ページ（改行は挿入されていない）
英語ページ（改行が挿入されている）
インフォメーション
改行の挿入は、ライブ編集 でも同様に操作できます。