css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

JS властивість Element.lang

Загальний опис

lang - це властивість об'єкта Element в JavaScript, яка використовується для визначення мови, якою написаний вміст елемента. Ця властивість дозволяє браузерам та іншим додаткам правильно обробляти та відображати текст, враховуючи відповідні правила мови.

Основна сфера застосування властивості lang - забезпечення належної підтримки різних мов на веб-сторінці. Вона допомагає браузерам та іншим додаткам правильно відображати текст, використовуючи відповідні шрифти, правила розбивки на рядки, напрямок тексту та інші специфічні для мови налаштування.

Значення властивості lang повинно бути задано згідно зі стандартом BCP 47 для кодів мов. Наприклад, en для англійської мови, uk для української, zh-CN для китайської мови (спрощені ієрогліфи) тощо.

Розглянемо приклад використання lang в HTML-документі:

<html lang="en">
  <body>
    <p>This is an English paragraph.</p>
    <p lang="uk">Це український абзац.</p>
    <div lang="zh-CN">这是一个中文段落。</div>
  </body>
</html>

У цьому прикладі ми встановлюємо lang="en" для всього документа, що вказує на те, що основною мовою є англійська. Однак, для окремих елементів ми можемо визначити інші мови, використовуючи властивість lang. Наприклад, для абзацу з українським текстом ми встановлюємо lang="uk", а для елемента div з китайським текстом - lang="zh-CN".

Ви також можете отримати та встановити значення властивості lang за допомогою JavaScript:

const paragraph = document.querySelector('p');
console.log(paragraph.lang); // Виведе порожній рядок, оскільки для елемента p не встановлено lang

const ukrainianParagraph = document.querySelectorAll('p')[1];
console.log(ukrainianParagraph.lang); // Виведе "uk"

ukrainianParagraph.lang = 'en-US'; // Змінює мову на англійську (США)

Крім того, властивість lang успадковується від батьківських елементів, якщо вона не встановлена явно для певного елемента. Наприклад:

<html lang="en">
  <body>
    <div>
      <p>This paragraph inherits the "en" language from the html element.</p>
    </div>
  </body>
</html>

Властивість lang також може бути корисною для забезпечення належної доступності веб-сторінки. Наприклад, програми озвучування тексту можуть використовувати цю властивість для правильної вимови слів відповідно до мови тексту.

Загалом, lang є важливою властивістю для створення багатомовних веб-сторінок та забезпечення належної підтримки різних мов у браузерах та інших додатках. Правильне використання цієї властивості допомагає покращити користувацький досвід для користувачів з різними мовними налаштуваннями та забезпечити коректне відображення та обробку тексту на веб-сторінці.

Порада:

Пам'ятайте, що значення властивості lang повинно бути задано згідно зі стандартом BCP 47 для кодів мов. Наприклад, en для англійської мови, uk для української, zh-CN для китайської мови (спрощені ієрогліфи).
Порада:

Властивість lang успадковується від батьківських елементів, якщо вона не встановлена явно для певного елемента. Тому ви можете встановити lang для кореневого елемента, наприклад <html lang="en">, і всі дочірні елементи успадкують цю мову за замовчуванням.
Порада:

Ви можете отримати та встановити значення властивості lang за допомогою JavaScript. Це корисно для динамічного управління мовою вмісту на веб-сторінці. Наприклад:

const paragraph = document.querySelector('p');
console.log(paragraph.lang); // Отримати поточну мову елемента

paragraph.lang = 'en-US'; // Встановити нову мову для елемента

Синтаксис

Element.lang

Значення

Return

Переглядачі

Переглядач

1

1

3

12.1

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


При натисканні на кнопку "Перекласти" викликається функція translateText(). Ця функція отримує вибрану мову з елемента <select> та шукає відповідний переклад у об'єкті translations. Якщо переклад знайдено, функція оновлює текстовий вміст елемента <p> на перекладений текст та встановлює значення властивості lang відповідно до вибраної мови.

Наприклад, якщо користувач вибере "Українська" у списку, функція translateText() встановить текст елемента <p> на "Це приклад тексту українською мовою." та встановить значення властивості lang на "uk", що вказує на українську мову.

Цей приклад демонструє, як можна використовувати властивість lang для вказівки мови, на якій відображається вміст елемента. Користувач може вибрати бажану мову зі списку, і текст буде перекладено та відображено з відповідним значенням властивості lang.

Властивість lang є корисною для забезпечення належної локалізації веб-додатків та покращення доступності для користувачів з різними мовними налаштуваннями. Вона допомагає браузерам, програмам читання з екрану та іншим інструментам правильно інтерпретувати та обробляти вміст на певній мові.

Цей приклад також демонструє, як можна динамічно змінювати вміст та властивості елементів на веб-сторінці за допомогою JavaScript. Користувач може взаємодіяти з сторінкою, вибираючи мову зі списку та натискаючи кнопку для перекладу тексту.

У цьому прикладі ми створюємо функцію translateElement, яка приймає елемент та мовний код як аргументи. Функція отримує поточний текстовий вміст елемента, перекладає його на вказану мову за допомогою функції translateText (реалізація якої не наведена, оскільки вона залежить від використовуваного API перекладу) та встановлює перекладений текст як новий вміст елемента. Крім того, функція встановлює значення властивості lang елемента на вказаний мовний код.

Далі ми отримуємо елемент з ідентифікатором "myElement" та викликаємо функцію translateElement для цього елемента, передаючи мовний код "uk" (український). Це призведе до перекладу тексту елемента на українську мову та встановлення відповідного значення властивості lang.

Цей приклад демонструє, як можна використовувати властивість lang для вказівки мови, на якій відображається вміст елемента. Це може бути корисним для забезпечення належної інтернаціоналізації та локалізації веб-додатків, а також для покращення доступності для користувачів з різними мовними налаштуваннями.

function translateElement(element, language) {
  const originalText = element.textContent;
  const translatedText = translateText(originalText, language);

  element.lang = language;
  element.textContent = translatedText;
}

function translateText(text, language) {
  // Тут має бути реалізація перекладу тексту на вказану мову
  // Для прикладу повернемо той самий текст
  return text;
}

// Отримуємо елемент за його ідентифікатором
const myElement = document.getElementById('myElement');

// Перекладаємо текст елемента на українську мову
translateElement(myElement, 'uk');

У цьому прикладі ми отримуємо елемент з ідентифікатором "myElement" за допомогою методу document.getElementById(). Потім ми встановлюємо значення властивості lang цього елемента на "uk", що вказує на український мовний код. Нарешті, ми виводимо поточне значення властивості lang у консоль.

// Отримуємо елемент за його ідентифікатором
const myElement = document.getElementById('myElement');

// Встановлюємо значення властивості lang
myElement.lang = 'uk';

// Виводимо поточне значення властивості lang
console.log(myElement.lang); // "uk"

Документи

Зв'язок