Получить профессию в Skypro
Как отключить предложение перевода в Chrome: HTML код
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Чтобы отключить автоматический перевод веб-страницы в Chrome, добавьте к элементу <html> класс notranslate:
<html class="notranslate">
<!-- Всё просто: "notranslate" означает "не переводить" -->
</html>Класс notranslate сообщает браузеру Chrome о необходимости отображать страницу в оригинальном виде для всех пользователей, использующих функцию автоперевода.
Вы также можете использовать мета-тег для "защиты" страницы от автоматического перевода Google. Разместите следующий код в секции <head>:
<meta name="google" content="notranslate">Атрибут "notranslate" в мета-теге является указанием для Google, что перевод содержимого веб-страницы не желателен.
Глубокая реализация
Отключение перевода для отдельных элементов
Чтобы исключить конкретные фрагменты текста из автоперевода, используйте атрибут translate="no":
<div translate="no">Этот текст особенный. Его не переведут.</div>Атрибут translate можно применить ко всем HTML-элементам с целью защититы определенных участков контента от перевода.
Проверка совместимости
Проверка совместимости данного метода с браузером важна настолько же, как проверка парашюта перед скачком с высоты. Большинство современных браузеров поддерживают эти механизмы, однако рекомендуется всегда ознакомляться с официальной документацией для получения актуальной информации.
Защита примеров кода
Чтобы сохранить исходный вид примеров кода на веб-странице, используйте класс notranslate. Это позволит избежать искажений при отображении:
<pre class="notranslate">const foo = 'bar'; // Верно? Это стоит оставить непереведенным.</pre>Таким образом, код будет отображаться в первоначальном виде и будет легко восприниматься любым пользователем.
Стилизация изменяемых элементов
Работая с атрибутами translate или классами notranslate, важно учитывать возможные вопросы стилизации. Возможно, вам придется модифицировать стили, используя гибкие верстки, вот пример:
<div style="display: flex; gap: 20px;">
<span translate="no">К этому относиться не нужно.</span>
<span>Здесь текст доступен для перевода.</span>
</div>Убедитесь, что текст, переведенный или нет, сохраняет единообразный и аккуратный вид.
Визуализация
Представьте себе, что ваша веб-страница – это ваш уютный дом, а Google Translate – назойливый сосед, который обожает всё перемещать:
Дом веб-страницы 🏡: [🛋️, 🪑, 🖼️, 📚]
Google Translate 🧑🔧: [🔄🛋️, 🔀🪑, 🔄🖼️, 🔀📚]Чтобы заблокировать эту нежелательную активность, установите в HTML-двери запрещающий знак:
<meta name="google" content="notranslate">В итоге, сосед не сможет ничего менять без вашего разрешения:
Дом веб-страницы 🏡: [🛋️, 🪑, 🖼️, 📚]
Google Translate 🧑🔧: [🚫 Не трогай, все и так хорошо!]И таким образом, ваш "дом" в Интернете останется в том виде, в котором вы его запланировали, без вмешательства Google Translate.
Выделение многоязычного контента
На многоязычных страницах можно выделить отдельные фразы или слова и не ограничивать их перевод. Для этого используйте тег <b>:
<b>Внимание, это важно!</b> Обычный текст, который можно перевести.Такое сочетание визуального акцента и контроля перевода сделает контент более удобным для пользователей в многоязычной среде.
Экспериментируя в поисках идеала
Не стесняйтесь экспериментировать с различными элементами и атрибутами, чтобы найти наиболее подходящий для вас вариант. Найдите тот баланс между доступностью, внешним видом и функциональностью, который обеспечит лучшее взаимодействие с вашими пользователями.
И помните, что подход Google к вопросам перевода меняется быстро, поэтому регулярно проверяйте документацию Google для получения последних обновлений по управлению переводами.
Полезные материалы
- Официальный блог Вебмастера Google — Откройте для себя социально-культурное влияние веб-переводов на контент.
- Атрибут "translate" в HTML: HyperText Markup Language | MDN — Подробное руководство по использованию атрибута 'translate' в HTML.
- Использование атрибута translate в HTML — Глубокий дайджест атрибута
translateпо материалам W3C. - Изменение языков в Chrome и перевод веб-страниц – Справка Google Chrome — Инструкции Google по отключению автоперевода веб-страниц.
- Переход на Manifest V3 | Расширения | Документация для разработчиков Chrome — Нужная информация для разработчиков расширений Chrome, включая функцию перевода.