Школа
Веб-разработка

В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать?

1 фев 2024
👁 1948   🗩2
Веб-разработка

В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать?

1 фев 2024
👁 1948   🗩2
Василий Половнёв
Технический директор бюро
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Эта фича называется Live Text, а по сути, это оптическое распознавание символов, OCR, optical character recognition. К сожалению, у неё пока нет АПИ, чтобы подсказать правильный текст или запретить его выделение.

В простых случаях, например, для изображений, замещающих заголовки, можно «подхачить» процедуру копирования текста. Если клиент выделяет и копирует текст с такого изображения, будем помещать в буфер обмена правильный текст. Покажу на примере.

Соберём заголовок с заменой текста на изображение:

<h1 class="textHide">
  Визуализация данных
  <img src="header-title.png">
</h1>
.textHide {
  font: 0/0 a !important;
  text-shadow: none !important;
}
Визуализация данных
При выделении и копировании текста в Сафари получаем что угодно от «ДАННЫТ» до «ВиЗ ЛИЗАПИЯ ДАННЫХ»

Добавим обработчик события копирования к изображению:

// Находим все элементы, заменяемые изображениями
Array.from(document.querySelectorAll('.textHide')).forEach(el => {
  // Получаем текст заголовка
  const properText = el.textContent
  // Обрабатываем событие копирования
  el.addEventListener('copy', (e) => {
    e.preventDefault()
    // Переписываем буфер обмена, вставляя в него правильный текст из заголовка
    e.clipboardData.setData('text/plain', properText)
  })
})

Визуализация данных

Теперь, если выделить и скопировать текст с изображения, в буфер обмена попадёт «Визуализация данных»

Осторожно, у этого хака есть проблемы. Скажем, в контекстом меню по‑прежнему будет что угодно:

Сафари обнаружил третий вариант текста на изображении — «ВИЗУА" МИЗАЦИЯ ДАННЫХ»

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

По всем версиям стандарта HTML на картинке, замещающей заголовок, обязан висеть атрибут alt с тем текстом, который она замещает. Без понятия, насколько это помогает браузерам с фичей распознавания текста, но так правильно для аксессибилити.

В Firefox на десктопе alt’ы картинок копируются вместе с окружающим выделенным текстом.

Юрий всё верно пишет. Иллюстрации нужно добавлять правильное значение атрибута alt и оно скопируется вместе с другим текстом. Работает во всех браузерах адекватно без лишних элементов, содержащих текст. Если требуется какая‑то корректировка текста для вспомогательных технологий, то стоит добавить атрибуты aria‑label или aria‑labelledby. Но они не используются при копировании.

В любом случае, это не отменяет функциональность OCR. Отдельные фрагменты текста можно скопировать непосредственно с иллюстрации.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы