CSSでSafariのテキストの表示認識(LiveText)を無効化する
iOS15、iPadOS15、macOS Monterey 以降デフォルトで画像や動画中に含まれる文字列を自動認識してテキストとして再利用できる「テキストの表示認識(LiveText)」が追加された テキストを主体とする画像を選択や右クリックしたときテキストが優先して認識されることがあり、画像単体をユーザーが開いたり保存できなくなる場合がある
この機能はOSの設定で「テキストの表示認識」を全体的に無効化するか、以下のCSSを該当の画像や動画の要素に適用すると、特定要素に対して明示的に無効化できる
code:css
.image img {
-webkit-user-select: none;
cursor: default;
}
このパラメータは csstype の CSSProperties にはデフォルトで定義されていないので以下のような追加の型定義が必要になる
code:css.d.ts
import type * as CSS from "csstype";
declare module "csstype" {
interface Properties {
"-webkit-user-select"?: CSS.Property.UserSelect;
}
}
なお標準の user-select とは若干動作が異なる様子
ちなみに user-select を無効化すると LiveText が反応するエリアではポップアップメニューも出なくなる (内部的にテキストとして処理されている様子)
関連