Архив рубрики: usability

Как добавить флаги в меню выбора языков Google Translate

Google Translate знает много языков. Очень много. И выбирать их только мышкой без помощи клавиатуры сложновато — из-за большого количества выглядящих похожим образом элементов трудно быстро найти нужный, не тратя время на чтение всех названий.

То, что недавно использованные языки выделены значками, немного помогает, но в случае, когда языков много, значки остаются лишь у четырёх последних языков. В случае, когда в меню слишком много пунктов, улучшить ситуацию можно добавлением иконок — с подобной ситуацией я сталкивался и в LibreOffice, и в Inkscape.

Существуют браузерные дополнения, позволяющие задавать свои стилевые правила для конкретных сайтов — для Firefox, Google Chrome и других брауеров, основанных на Chromium, это делает Stylebot. Попробуем добавить стилевые правила для отдельного пункта — укажем не только иконку (пусть будет флаг), но и цвет:

div[data-language-code="lt"] div.Llmcnf {
  color: #060;
}

div[data-language-code="lt"] div.Llmcnf:before {
  content: "🇱🇹";
  padding-right: .25em;
}

Стало гораздо заметнее:

Как долго в Google Translate будет использоваться название класса Llmcnf — не возьмусь предсказывать, но пока такой метод работает и работает уже не первую неделю.

Если помечать таким образом не все языки, а только нужные, их найти будет достаточно легко — например, раньше я всё время очень долго искал немецкий, потому что искал не German, а Deutsch — теперь же вижу его сразу: