CODEWITHSUNDEEP
javascriptjqueryhtmlcssmultilingual
Bianca Han
Bianca Han

Reputation: 1

Way to edit font for different languages -- HTML, CSS, JQUERY

I have a simple website for a class project. I used jquery to have two languages -- English, and Korean. This is what the code looks like on my navigation bar:

HTML

<nav>
        <ul>
          <li><a href="index.html" class="lang" key="home">Home</a></li>
          <li><a href="characters.html" class="lang" key="characters">Characters</a></li>
          <li><a href="challenge.html" class="lang" key="challenge">Challenge</a></li>
          <li><a href="gallery.html" class="lang" key="gallery">Gallery</a></li>
          <li><a href="portfolio.html" class="lang" key="portfolio">Portfolio</a></li>

          <button class="translate" id="eng">English</button>
          <button class="translate" id="kor">Korean</button>
        </ul>
    </nav>

JQUERY

var arrLang = {
        'eng' : {
          'title' : 'Doraemon',
          'home' : 'Home',
          'characters' : 'Characters',
          'challenge' : 'Challenge',
          'gallery' : 'Gallery',
          'portfolio' : 'Portfolio'
        },

        'kor' : {
          'title' : '도라에몽',
          'home' : '홈페이지',
          'characters' : '케릭터',
          'challenge' : '도전',
          'gallery' : '사진',
          'portfolio' : '포트폴리오'
        }

      };

      $(function(){
        $('.translate').click(function(){
          var lang = $(this).attr('id');

          $('.lang').each(function(index, element){
            $(this).text(arrLang[lang][$(this).attr('key')]);

          });
        });
      });

However, If possible, I am searching for a way so that I can edit the text according to the language. For example, when it is in English, I want it size 20px of font-family Verdana, while when it is in Korean, I want it to be size 15px of font-family monospace.

Is there any simple way to incorporate this into my code, or would I have to use another method?

I do not have any experience in javascript/jquery, and was looking for how to style it with CSS and possibly a class or id for every bit of text.

Thank you.

Upvotes: 0

Views: 482

Answers (2)

Cybernetic
Cybernetic

Reputation: 13334

Language data:

var arrLang = {
    'eng': {
        'title': 'Doraemon',
        'home': 'Home',
        'characters': 'Characters',
        'challenge': 'Challenge',
        'gallery': 'Gallery',
        'portfolio': 'Portfolio'
    },
    'kor': {
        'title': '도라에몽',
        'home': '홈페이지',
        'characters': '케릭터',
        'challenge': '도전',
        'gallery': '사진',
        'portfolio': '포트폴리오'
    }
};

Language regex:

language_regex = {
    "korean" : /[\uac00-\ud7af]|[\u1100-\u11ff]|[\u3130-\u318f]|[\ua960-\ua97f]|[\ud7b0-\ud7ff]/g,
    "japanese" : /[\u3000-\u303f]|[\u3040-\u309f]|[\u30a0-\u30ff]|[\uff00-\uff9f]|[\u4e00-\u9faf]|[\u3400-\u4dbf]/,
    "chinese" : /[\u4e00-\u9fff]|[\u3400-\u4dbf]|[\u{20000}-\u{2a6df}]|[\u{2a700}-\u{2b73f}]|[\u{2b740}-\u{2b81f}]|[\u{2b820}-\u{2ceaf}]|[\uf900-\ufaff]|[\u3300-\u33ff]|[\ufe30-\ufe4f]|[\uf900-\ufaff]|[\u{2f800}-\u{2fa1f}]/u
}

Function for styling language:

function style_language(language, eng_styles, other_styles) {
    ind = -1
    $.each(arrLang, function(k, v) {
        ind++
        $('body').append("<div class='text'>" + v.title + "</div><br><br>")
        if (v.title.match(language_regex[language]) === null) {
            $('.text').eq(ind).css(eng_styles)
        } else {
            $('.text').eq(ind).css(other_styles)
        }
    })
}

Usage:

Pass in the following arguments:

  • non-english language choice;
  • english style object;
  • non-english style object.

Example:

style_language('korean', {
    "font-size": "20px",
    "font-family": "Verdana"
}, {
    "font-size": "15px",
    "font-family": "monospace"
})

Result:

enter image description here

Change 'body' in the main function to target as needed.

Upvotes: 0

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

It's absolutely the correct thinking of using classes. I just added two lines to your code to make it work.

If you want to translate the whole page, and not just the nav, I suggest adding a class to the <body> element instead.

var arrLang = {
        'eng' : {
          'title' : 'Doraemon',
          'home' : 'Home',
          'characters' : 'Characters',
          'challenge' : 'Challenge',
          'gallery' : 'Gallery',
          'portfolio' : 'Portfolio'
        },

        'kor' : {
          'title' : '도라에몽',
          'home' : '홈페이지',
          'characters' : '케릭터',
          'challenge' : '도전',
          'gallery' : '사진',
          'portfolio' : '포트폴리오'
        }

      };

      $(function(){
        $('.translate').click(function(){
          var lang = $(this).attr('id');

          $('.lang').each(function(index, element){
            $(this).text(arrLang[lang][$(this).attr('key')]);

          });
          
          $('nav').removeClass();  // remove all classes
          $('nav').addClass(lang);
        });
      });
nav {
  font-family: Verdana;
  font-size: 20px;
}

nav.kor {
  font-family: monospace;
  font-size: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
        <ul>
          <li><a href="index.html" class="lang" key="home">Home</a></li>
          <li><a href="characters.html" class="lang" key="characters">Characters</a></li>
          <li><a href="challenge.html" class="lang" key="challenge">Challenge</a></li>
          <li><a href="gallery.html" class="lang" key="gallery">Gallery</a></li>
          <li><a href="portfolio.html" class="lang" key="portfolio">Portfolio</a></li>

          <button class="translate" id="eng">English</button>
          <button class="translate" id="kor">Korean</button>
        </ul>
    </nav>

Upvotes: 1

Related Questions