How to add extra content to your translated pages

Overview

For example, after the translation is completed with WOVN.io, you want to show the icons suited for Japanese people when the website is displayed in Japanese.
But when in English, you want to hide them because those icons are culture-dependent and not relevant to non-Japanese people.
In this situation, please follow the procedure below.


Setup Procedure

  1. Write the following code on CSS    
  2. html[lang=LANGUAGE CODE] .CHOOSE YOUR CLASS {
        display: none;
    }
  3. Write the following code on HTML
<span class="CHOOSE YOUR CLASS">content to </span>

information
For more details on language code, please visit here.


Example:
Here is a coding example to execute the following conditions.
・To keep ‘Displayed only in English’ unpublished in Japanese.
・To keep ‘日本語の時だけ表示’ unpublished in English. (The Japanese sentence to be unpublished says ‘Displayed only in Japanese’)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Switch content by selected language</title>
<script src="//j.wovn.io/1" data-wovnio="key=YOUR_WOVN_TOKEN" async></script>
<style>
  html[lang=ja] .hide_if_ja {
      display: none;
  }
  html[lang=en] .hide_if_en {
      display: none;
  }
</style>
</head>
<body>
  <span class="hide_if_ja">Displayed only in English</span>                                                                   
  <span class="hide_if_en">日本語の時だけ表示</span>
</body>
</html>