javascript - rtタグ（ふりがな）のテキストが選択されないようにする

Question

ルビの注釈を使用して、日本語のテキストにふりがなを追加します。

<ruby><rb>漢&lt;/rb><rt>かん</rt></ruby><ruby><rb>字&lt;/rb><rt>じ&lt;/rt></ruby>

漢字を選択してSafariまたはChromeにコピーしようとすると、クリップボードは次のようになります。

漢
かん
字

OSXの辞書からも単語を検索できません。

ふりがなが選ばれないようにする方法はありますか？rt { -webkit-user-select: none; }動作しないようです。

score 4 · Accepted Answer

<ruby>次のように、それらを1つの要素内にラップすると表示されます。

<ruby>
  <rb>漢&lt;/rb><rt>かん</rt>
  <rb>字&lt;/rb><rt>じ&lt;/rt>
</ruby>

そうすれば、ふりがなを選択せずに漢字を選択できるようになります。

アップデート：

仮名のような漢字と仮名の混合テキストの場合、次のいずれかを実行できます。

次のように、空の<rt>要素を使用します。

<ruby>
    <rb>間&lt;/rb><rt>ま&lt;/rt>
    <rb>に&lt;/rb><rt></rt>
    <rb>合&lt;/rb><rt>あ&lt;/rt>
    <rb>わせる&lt;/rb><r‌t></rt>
</ruby>

クリップボードイベントを利用して、JavaScriptを記述します^*†：

HTML：

<ruby>
  <rb>間&lt;/rb><rt>ま&lt;/rt>
</ruby>
に
<ruby>
  <rb>合&lt;/rb><rt>あ&lt;/rt>
</ruby>
わせる

Javascript：

$(document).on('copy', function (e) {
    e.preventDefault(); // the clipboard data will be set manually later

    // hide <rt> elements so that they won't be selected
    $('rt').css('visibility', 'hidden');

    // copy text from selection
    e.originalEvent.clipboardData.setData('text', window.getSelection().toString());

    // restore visibility
    $('rt').css('visibility', 'visible');
});

これがデモページです^‡：http：//jsfiddle.net/vJK3e/1/

_{* Safari 6.0.3で正常にテスト済み}
_{†新しいブラウザバージョンが必要になる可能性があります‡}_{ふりがなテキストが（視覚的に）選択されないように、}
_{cssコードの行を追加しますrt::selection { display: none; }}

score 3 · Accepted Answer

これを行うためのバニラJavaScriptの方法は次のとおりです。

// hide furigana before sending and reenable after
document.addEventListener('copy', function (e) {
  e.preventDefault();
  var furis = document.getElementsByTagName('rt');
  for (var i = 0; i < furis.length; i++) {
    furis[i].style.display = 'none';
  }
  e.clipboardData.setData('text', window.getSelection().toString());
  for (var i = 0; i < furis.length; i++) {
    furis[i].style.removeProperty('display');
  }
});

上記のように、.replace(/\n/g, '')afterを追加window.getSelection().toString()すると、まだぶら下がっている新しい行が削除されます。 .replace(' ', '')ユーザーに余分なスペースを与えたくない場合にも役立つかもしれません。これらは、ユースケースにとって望ましい場合と望ましくない場合があります。

score 1 · Accepted Answer

Rox Dorentusの受け入れられた答えに基づいて（そしてjpc-aeの有用なJavascript変換を参照して）、要素のdisplayスタイルをハッキングすることを含まないアルゴリズムの改善があり<rt>ます。これは私には壊れやすいと感じます。

代わりに、選択範囲内のすべてのノードへの参照の配列を作成し、タグが付いたノードをフィルタリングして、<rb>それらを返しますinnerText。<rb>漢字をまとめるためにタグが使用されていない場合に備えて、コメントアウトされた代替案も提供します。

document.addEventListener('copy', function (e) {
  var nodesInRange = getRangeSelectedNodes(window.getSelection().getRangeAt(0));

  /* Takes all <rb> within the selected range, ie. for <ruby><rb>振&lt;/rb><rt>ふ&lt;/rt></ruby> */
  var payload = nodesInRange.filter((node) => node.nodeName === "RB").map((rb) => rb.innerText).join("");

  /* Alternative for when <rb> isn't used: take all textNodes within <ruby> elements, ie. for <ruby>振&lt;rt>ふ&lt;/rt></ruby> */
  // var payload = nodesInRange.filter((node) => node.parentNode.nodeName === "RUBY").map((textNode) => textNode.textContent ).join("");

  e.clipboardData.setData('text/plain', payload);
  e.preventDefault();


  /* Utility function for getting an array of references to all the nodes in the selection area,
   * from: http://stackoverflow.com/a/7784176/5951226 */
  function getRangeSelectedNodes(range) {
    var node = range.startContainer;
    var endNode = range.endContainer;
    if (node == endNode) return [node];
    var rangeNodes = [];
    while (node && node != endNode) rangeNodes.push(node = nextNode(node));
    node = range.startContainer;
    while (node && node != range.commonAncestorContainer) {
      rangeNodes.unshift(node);
      node = node.parentNode;
    }
    return rangeNodes;

    function nextNode(node) {
      if (node.hasChildNodes()) return node.firstChild;
      else {
        while (node && !node.nextSibling) node = node.parentNode;
        if (!node) return null;
        return node.nextSibling;
      }
    }
  }

});

javascript - rtタグ（ふりがな）のテキストが選択されないようにする

3 に答える 3

Related

Reference