目次
概要
WOVN の スクリプト方式 は、Web ページにアクセスした際に、元言語が一瞬表示されてから翻訳言語に切り替わります。ライブラリ方式 や プロキシ方式 でも、動的コンテンツの場合は元言語がちらつきます。
WOVN が提供する data-wovn-wait 属性を HTML タグに挿入することで、翻訳後のテキストの表示準備ができるまで、設定したタグ内のコンテンツを非表示にできます。そして、元言語のちらつきを回避できます。
インフォメーション
既にWOVNを導入済みのお客様は、引き続き「wovn-wait 属性」を利用することが可能です。
data-wovn-wait 属性の使い方
CSS と data-wovn-wait 属性を組み合わせて使います。
1. CSS に下記を記述します。
```css
/* data-wovn-waitを設定し、ID毎に指定する場合は以下のようにします */
#my-id[data-wovn-wait]:lang(en) {
opacity: 0;
}
/* data-wovn-waitを設定し、クラス毎に指定する場合は以下のようにします */
.my-class[data-wovn-wait]:lang(en) {
opacity: 0;
}
/* 上記設定に関わらずdata-wovn-waitを持つ属性全てに設定する場合は以下のようにします */
*[data-wovn-wait]:lang(en) {
opacity: 0;
}
/* 透明状態から表示されるまでの時間を指定します*/
/* 以下の書き方 * は 上記で data-wovn-waitを有効にしている全ての要素に対して有効になります */
* {
transition: opacity 10.25s ease;
}
```
2. HTML に下記を記述します。
```html
<div data-wovn-wait>
<p>この文章は翻訳完了後にふわっと表示されます</p>
</div>
<div id="my-id" data-wovn-wait>
<p>この文章は翻訳完了後にふわっと表示されます。</p>
</div>
<div class="my-class" data-wovn-wait>
<p>この文章は翻訳完了後にふわっと表示されます。</p>
</div>
```
インフォメーション
CSS で制御をしない限り、data-wovn-wait 属性を HTML タグに挿入しても有効になりません。
Javascript 関数 WOVN.io.triggerAudit() との併用
ユーザーの操作により動的に表示されるコンテンツがある場合は、WOVN が提供するJavascript 関数「WOVN.io.triggerAudit()」との併用により、元言語のちらつきを回避できます。
詳細は、「Widget API (WOVN.io Javascript) 」を参照してください。
動作の概要
-
ユーザーの操作により、動的にコンテンツが差し替わる
インフォメーション
WOVN.io.triggerAudit() を併用します。コンテンツ差し替えの Javascript が動作したら、WOVN の翻訳データを取ってくるようにリクエストします。ただし、翻訳データを取ってくるまでに元言語のちらつきが発生します。 - 元言語のちらつきを解消するため、data-wovn-wait 属性を使用します。翻訳データの準備が完了するまで元言語のコンテンツを非表示にします。