Атрибут translate запрещает или разрешает автоматический перевод содержимого элемента. Это глобальный атрибут - его можно прописать любому тегу. На то, как страница выглядит и работает, он не влияет вовсе: это подсказка не браузеру, а инструментам перевода - встроенному переводчику браузера, Google Translate, Яндекс.Переводчику и похожим сервисам.
<span translate="no">BrandName</span>В этой статье
- Атрибут translate в HTML: что делает и какие значения принимает
- Наследование translate от контейнера
- translate действует и на атрибуты alt, title и placeholder
- Что обычно помечают translate="no"
- Это подсказка инструментам перевода, а не гарантия
- Частые ошибки с атрибутом translate
- Шпаргалка по атрибуту translate
Атрибут translate в HTML: что делает и какие значения принимает
У translate ровно два допустимых значения - yes и no - и, в отличие от обычных булевых атрибутов, их нужно прописывать явно.
| Значение | Что происходит |
|---|---|
| yes (или пустая строка) | Содержимое элемента можно переводить - это поведение по умолчанию, даже без атрибута |
| no | Содержимое переводить нельзя |
| Атрибут не указан | Элемент переводится - состояние "можно переводить" действует по умолчанию для всей страницы |
Пример: .translate у элементов с разными значениями
У элемента без атрибута свойство тоже true - переводимость включена по умолчанию на всей странице.
Наследование translate от контейнера
Если у элемента нет собственного атрибута translate, он наследует состояние от ближайшего предка, у которого оно задано. Это удобно, когда нужно защитить от перевода целый блок - например, кусок кода с комментариями или виджет с именами пользователей: достаточно поставить translate="no" на общий контейнер, а не на каждый дочерний элемент отдельно. Вложенный элемент может вернуть себе перевод явным translate="yes" - тогда наследование родителя для него перестаёт действовать.
Пример: наследование и переопределение внутри контейнера
<div translate="no">
<p>Наследует no от родителя</p>
<p translate="yes">Вернул себе перевод явно</p>
</div>Первый блок наследует false от родителя, второй вернул себе true явным атрибутом.
translate действует и на атрибуты alt, title и placeholder
translate затрагивает не только текстовые узлы внутри элемента, но и его собственные «переводимые» атрибуты - в первую очередь alt, title и placeholder. Значение translate общее для всего элемента: при false инструмент перевода не тронет ни видимый текст, ни эти атрибуты у того же тега. Защитить только часть значения атрибута нельзя - для этого элемент оборачивают в два вложенных span: внешний с translate="yes" несёт сам атрибут, а внутренний с translate="no" держит защищённый текст.
Пример: translate="no" на картинке с alt
У первой картинки translate="no" распространяется и на текст alt, у второй без атрибута alt остаётся переводимым.
Что обычно помечают translate="no"
| Что помечают | Зачем |
|---|---|
| Названия брендов и продуктов | translate="no" защищает от искажений вроде перевода имени бренда как обычного слова |
| Фрагменты кода и названия тегов/атрибутов | Переводчик не должен менять переменные, команды и технические термины |
| Подписи на оборудовании (кнопки, панели) | Текст в инструкции должен совпадать с тем, что реально написано на устройстве |
| Названия произведений в оригинале | Заголовок книги или фильма внутри <cite> часто оставляют непереведённым |
| Ссылки на языковые версии страницы | Текст ссылки вида "English" остаётся как есть, а title у неё при этом можно переводить |
Это подсказка инструментам перевода, а не гарантия
Спецификация описывает translate как подсказку инструментам перевода, а не обязательное правило: конкретный переводчик решает сам, следовать ей или нет. Крупные сервисы вроде Google Translate и Яндекс.Переводчика учитывают атрибут, но поддержка переопределения через translate="yes" внутри блока с no у разных инструментов отличается - одни восстанавливают перевод для вложенного элемента, другие игнорируют вложенный yes и не переводят весь блок целиком. Полагаться на translate как на гарантированный способ управления переводом не стоит, лучше проверить конкретный сервис, если точность критична.
Частые ошибки с атрибутом translate
Путаница с translate обычно не в самом атрибуте, а в том, какой результат от него ждут на практике.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Ждут, что translate как-то изменит вид страницы | Атрибут не влияет ни на вёрстку, ни на отображение - это подсказка только для инструментов перевода | Не искать визуального эффекта: translate работает только при включённом автопереводе |
| Прописывают translate="no" на весь текст страницы | Обычная проза становится недоступна для автоматического перевода, что мешает иностранным читателям | Помечать no только конкретные фрагменты - бренды, код, подписи на оборудовании |
| Пытаются защитить часть значения атрибута через translate | На уровне одного атрибута нельзя разделить его значение на переводимую и непереводимую часть | Оборачивать контент во вложенные span с разными translate, если нужна частичная защита |
| Считают, что translate="no" на родителе действует без исключений | Вложенный элемент может переопределить состояние явным translate="yes" | Проверять вложенные элементы, если важно защитить блок целиком |
| Ожидают одинаковой поддержки во всех переводчиках | Разные сервисы по-своему обрабатывают вложенный translate="yes" внутри блока с no | Проверять поведение в конкретном переводчике, если точность важна |
Шпаргалка по атрибуту translate
| Правило | Что запомнить |
|---|---|
| Где работает | На любом теге (глобальный атрибут) |
| yes / пустая строка | Можно переводить - значение по умолчанию |
| no | Переводить нельзя |
| Атрибут не указан | Переводится, как и весь остальной текст страницы |
| Наследование | Элемент без своего атрибута берёт значение ближайшего предка |
| alt, title, placeholder | Тоже подчиняются translate того же элемента |
| Частичная защита атрибута | Невозможна напрямую - нужны вложенные span с разными translate |
| Гарантия | Это подсказка инструментам перевода, а не обязательное правило |
