このセクションの記事

data-wovn-wait 属性

目次

概要

WOVN の スクリプト方式は、Web ページにアクセスした際に、元言語が一瞬表示されてから翻訳言語に切り替わります。
ライブラリ方式や プロキシ方式でも、動的コンテンツの場合は元言語がちらつきます。

WOVN が提供する data-wovn-wait 属性を HTML タグに挿入することで、翻訳後のテキストの表示準備ができるまで、設定したタグ内のコンテンツを非表示にできます。
そして、元言語のちらつきを回避できます。

インフォメーション
既にWOVNを導入済みのお客様は、引き続き「wovn-wait 属性」を利用することが可能です。

data-wovn-wait 属性の使い方

CSS と data-wovn-wait 属性を組み合わせて使います。

  1. 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 0.25s ease;}
  1. 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) 」を参照してください。

動作の概要

  1. ユーザーの操作により、動的にコンテンツが差し替わる

    インフォメーション
    WOVN.io.triggerAudit() を併用します。
    コンテンツ差し替えの Javascript が動作したら、WOVN の翻訳データを取ってくるようにリクエストします。
    ただし、翻訳データを取ってくるまでに元言語のちらつきが発生します。

  2. 元言語のちらつきを解消するため、data-wovn-wait 属性を使用します。
    翻訳データの準備が完了するまで元言語のコンテンツを非表示にします。

動作の概要図

screenshot 23.png