HTML の ruby, rt 要素を使うと、単語にルビを振ることができます。しかし、そのままだとブラウザでコピーした時に「言葉ルビ言葉ルビ…」のようにルビの部分が混じったテキストがクリップボードにコピーされてしまいます。これでは多くの場合は不便だと思います
解決策
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
body.remove-rt-before-copy rt {
display: none;
}
</style>
</head>
<body
oncopy="!function(e,s,l){l=e.classList;l.add(s);requestAnimationFrame(function(){l.remove(s)})}(this,'remove-rt-before-copy')"
>
<ruby>ここはコピーされます<rt>ここはコピーされません</rt></ruby>
</body>
</html>
-
body.oncopyされた瞬間だけルビの要素にdisplay: none;を与える - すぐに元に戻す
以上です。スタイル定義を忘れずにコピーしてください
注意
- よくあるトリックですが、イベントハンドラの先頭の
!は無名関数の宣言とコールを同時に行う場合に正しくパースされるように置いているのと、関数をreturn falseさせないために書いているので、消してはいけません - HTML か CSS に no-copy 属性とかあるべきだと思うんですが、どうなんでしょう