Атрибут translate тега <dir>
Описание
Атрибут translate указывает, следует ли переводить содержимое элемента <dir> при автоматическом переводе страницы. Однако важно отметить, что сам тег <dir> является устаревшим в HTML5. В современных реализациях следует использовать <ul> или <ol> с атрибутом translate.
Важно: Элемент <dir> устарел в HTML5. Для управления переводом содержимого используйте <ul> или <ol> с атрибутом translate.
Историческое использование (не рекомендуется):
<!-- Устаревший подход -->
<dir translate="no">
<li>config.ini</li>
<li>index.html</li>
</dir>
Современная альтернатива:
<ul translate="no">
<li>main.js</li>
<li>styles.css</li>
</ul>
<ol translate="yes">
<li>First step</li>
<li>Second step</li>
</ol>
Значения атрибута:
| Значение | Описание | Рекомендуемое использование |
|---|---|---|
yes |
Разрешает автоматический перевод | Для обычного текста, который должен переводиться |
no |
Запрещает автоматический перевод | Для имен файлов, кода, технических терминов |
Примеры правильного применения:
<!-- 1. Список файлов (не переводить) -->
<ul translate="no">
<li>README.md</li>
<li>package.json</li>
</ul>
<!-- 2. Список инструкций (можно переводить) -->
<ol translate="yes">
<li>Install dependencies</li>
<li>Run the application</li>
</ol>
<!-- 3. Смешанный контент -->
<ul>
<li translate="no">webpack.config.js</li>
<li translate="yes">Configuration file</li>
</ul>
Динамическое управление переводом:
<ul id="translatableList">
<li>User settings</li>
<li>System configuration</li>
</ul>
<button onclick="disableTranslation()">Disable Translation</button>
<script>
function disableTranslation() {
const list = document.getElementById('translatableList');
list.translate = false; // Или list.setAttribute('translate', 'no')
}
</script>
Рекомендации по использованию:
- Используйте
translate="no"для:- Имен файлов и директорий
- Команд и кодовых примеров
- Технических терминов и идентификаторов
- Используйте
translate="yes"для:- Обычного текста
- Описаний и инструкций
- Пользовательского контента
- Сочетайте с атрибутом
langдля лучших результатов
Ограничения и совместимость:
| Браузер | Поддержка | Примечания |
|---|---|---|
| Chrome | Полная | Лучше всего работает с Google Translate |
| Firefox | Полная | Требуется включенный переводчик |
| Safari | Частичная | Может игнорироваться в некоторых версиях |
Примечание: Атрибут translate не заменяет полноценной системы локализации. Для профессиональных многоязычных приложений используйте специализированные библиотеки (i18next, react-intl), которые предоставляют полный контроль над процессом перевода.