Verhindern von Text in rt-Tags (furigana) vor einem

Question

Ich benutze Ruby-Annotationen ausgewählt furigana zu japanischen Text hinzuzufügen:

<ruby><rb>漢</rb><rt>かん</rt></ruby><ruby><rb>字</rb><rt>じ</rt></ruby> 

Wenn ich versuche, die Auswahl 漢字 und kopiere es in Safari oder Chrome, die Zwischenablage wie folgt aussieht :

漢 
かん 
字 

Ich kann das Wort von OS Xs Wörterbuch auch nicht nachschlagen.

Gibt es eine Möglichkeit zu verhindern, dass die Furigana ausgewählt wird? rt { -webkit-user-select: none; } scheint nicht zu funktionieren.

Answer 1

Es scheint, dass, wenn man sie wickeln innerhalb eines <ruby> Element, wie folgt aus:

<ruby> 
    <rb>漢</rb><rt>かん</rt> 
    <rb>字</rb><rt>じ</rt> 
</ruby> 

Dann wird es möglich sein, ausgewählt 漢字 auszuwählen, ohne die furiganas.

---

UPDATE:

für Kanji-Kana gemischten Text wie 間 に 合 わ せ る, können Sie entweder:

1. Verwenden leer <rt> Element, wie folgt aus:

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

2. Schreiben Sie etwas Javascript, maki ng Verwendung der Clipboard events^{* & Dolch;}:

   • HTML:

     <ruby> 
         <rb>間</rb><rt>ま</rt> 
     </ruby> 
     に 
     <ruby> 
         <rb>合</rb><rt>あ</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'); 
     }); 
     

Hier ist eine Demo-Seite ^{& Dagger;}: http://jsfiddle.net/vJK3e/1/

_{* Getestet OK auf Safari 6.0.3
& Dolch; Möglicherweise benötigen neuere Browser-Versionen
& Dolch; Ich füge die Linie des CSS-Code rt::selection { display: none; } den furigana Text von beed zu verhindern (visuell) ausgewählt}

Answer 2

Hier ist die Vanille Javascript Art und Weise tun:

// 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'); 
    } 
}); 

Wie oben erwähnt, das Hinzufügen .replace(/\n/g, '') nach window.getSelection().toString() wird entfernen irgendwelche neuen Linien, die irgendwie noch herumhängen. .replace(' ', '') kann auch nützlich sein, wenn der Benutzer auch keine zusätzlichen Leerzeichen erhalten soll. Diese können für Ihren Anwendungsfall wünschenswert oder nicht wünschenswert sein.

Answer 3

Aufbauend auf Rox Dorentus die akzeptierte Antwort (und mit Bezug auf jpc-ae ist hilfreich Javascript-Konvertierung), hier ist eine Verbesserung des Algorithmus, der nicht Hacking mit sich bringt, die display Stil der <rt> Elemente, die mir zerbrechlich anfühlt.

Stattdessen erstellen wir ein Array von Referenzen auf alle Knoten in der Auswahl, filtern nach einem beliebigen mit dem Tag <rb> und geben ihre innerText zurück. Ich biete auch eine auskommentierte Alternative an, wenn keine <rb> Tags verwendet werden, um die Kanji zu verpacken.

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

    /* Takes all <rb> within the selected range, ie. for <ruby><rb>振</rb><rt>ふ</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>振<rt>ふ</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; 
     } 
    } 
    } 

});