Atrybut globalny HTMLAtrybuty globalne

translate

Pozwala wyłączyć automatyczne tłumaczenie fragmentu strony, na przykład nazwy marki albo kodu.

Dotyczy
Wszystkie elementy HTML
Na tej stronie

Przykład

#
HTML
<style>
  [translate="no"] { border-bottom: 1px dashed #a78bfa; }
</style>

<p>
  Witaj w <span translate="no">CodeWorlds</span>! W tej lekcji poznasz metodę
  <code translate="no">document.querySelector()</code>.
</p>
<p>Autorka lekcji: <span translate="no">Ania Kowalczyk</span></p>
Podgląd

Podkreślenie pochodzi ze stylu w przykładzie i zaznacza fragmenty z translate="no". Gdy ktoś przetłumaczy stronę w przeglądarce, nazwa serwisu, kod i nazwisko zostaną w oryginale, a reszta tekstu zmieni język.

Definicja i zastosowanie

#

Atrybut translate mówi narzędziom do automatycznego tłumaczenia, czy treść elementu należy przetłumaczyć. Wartość no oznacza „zostaw w oryginale”. Respektują ją tłumacze wbudowane w przeglądarki, na przykład ten w Chrome, a także wiele serwisów tłumaczących całe strony.

Przydaje się wszędzie tam, gdzie tłumaczenie coś psuje: w nazwach marek i produktów, które są zwykłymi słowami, w nazwiskach, adresach, a przede wszystkim we fragmentach kodu. Tłumacz nie odróżnia kodu od zwykłego tekstu, więc potrafi przetłumaczyć nazwy funkcji i słowa kluczowe, a taki kod po skopiowaniu przestaje działać.

Ustawienie dziedziczą wszystkie elementy w środku. Jeśli wyłączysz tłumaczenie większego bloku, w jego wnętrzu możesz je z powrotem włączyć przez translate="yes". Gdy nikt strony nie tłumaczy, atrybut niczego nie zmienia ani w wyglądzie, ani w działaniu.

Składnia

#
Składnia
<element translate="yes | no">…</element>

Wartości

#
  • yes

    lub pusty

    Treść można tłumaczyć. Tak jest domyślnie, więc tę wartość wpisujesz głównie po to, żeby włączyć tłumaczenie wewnątrz bloku z translate="no".
  • no

    Treść ma zostać w oryginale, razem ze wszystkimi elementami w środku.

Więcej przykładów

#
Cała strona bez automatycznego tłumaczenia
HTML
<!DOCTYPE html>
<html lang="pl" translate="no">
  <head>
    <meta charset="utf-8">
    <meta name="google" content="notranslate">
    <title>Kod źródłowy projektu | CodeWorlds</title>
  </head>
  <body>…</body>
</html>

Atrybut na elemencie <html> wyłącza tłumaczenie całej strony. Znacznik <meta name="google" content="notranslate"> robi to samo, ale rozumie go tylko Google.

Obsługa przeglądarek

#

Szeroko dostępne · od 2023 roku

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Na stronach z kursami i dokumentacją oznaczaj translate="no" bloki kodu (<pre>, <code>). Czytelnik korzystający z tłumaczenia dostanie wtedy kod, który zadziała po skopiowaniu.
  • Część narzędzi, w tym tłumacz Google, rozpoznaje też klasę notranslate. Dla pewności możesz dodać oba zapisy: translate="no" class="notranslate".
  • Nie wyłączaj tłumaczenia całej strony bez ważnego powodu. Dla wielu osób automatyczne tłumaczenie to jedyny sposób, żeby ją zrozumieć.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.