Способ редактирования шрифта для разных языков - HTML, CSS, JQUERY - PullRequest
Новая
       18

Способ редактирования шрифта для разных языков - HTML, CSS, JQUERY

0 голосов
/ 02 ноября 2019

У меня есть простой сайт для проекта класса. Я использовал jquery, чтобы иметь два языка - английский и корейский. Вот как выглядит код на моей навигационной панели:

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')]);

          });
        });
      });

Однако, Если возможно, я ищу способ, чтобы я мог редактировать текст в соответствии с языком. Например, когда он на английском языке, я хочу, чтобы он был размером 20px шрифта семейства Verdana, тогда как на корейском я хочу, чтобы он был размером 15px моноширины семейства шрифтов.

Есть ли какой-нибудь простойспособ включить это в мой код, или мне придется использовать другой метод?

У меня нет опыта работы с javascript / jquery, и я искал, как стилизовать его с помощью CSS и, возможно, класса или идентификатора для каждого бита текста.

Спасибо.

Ответы [ 2 ]

1 голос
/ 02 ноября 2019

Это абсолютно правильное мышление при использовании классов. Я просто добавил две строки в ваш код, чтобы он работал.

Если вы хотите перевести всю страницу, а не только навигацию, я предлагаю вместо этого добавить класс к элементу <body>. 

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>
0 голосов
/ 03 ноября 2019

Язык данные : 

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

Язык регулярное выражение : 

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 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)
        }
    })
}

Использование :

Передать следующие аргументы :

  • выбор неанглийского языка;
  • объект в английском стиле;
  • объект неанглийского стиля.

Пример : 

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

Результат :

enter image description here

При необходимости измените «тело» в основной функции на целевое.

...