testo Prevenire nei tag RT (furigana) venga selezionato

Question

Io uso l'annotazione rubino per aggiungere furigana al testo in giapponese:

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

Quando provo selezionando 漢字 e copiandolo in Safari o Chrome, appunti assomiglia a questo :

漢 
かん 
字 

Non riesco nemmeno a cercare la parola dal dizionario di OS X.

C'è un modo per impedire che venga selezionato il furigana? rt { -webkit-user-select: none; } non sembra funzionare.

Answer 1

Sembra che se li avvolgono all'interno di una <ruby> elemento, in questo modo:

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

allora sarà possibile selezionare 漢字 senza le furiganas selezionati.

---

UPDATE:

Per kanji-kana testo misto come 間 に 合 わ せ る, è possibile:

1. Usa vuota <rt> elemento, in questo modo:

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

2. Scrivi qualche javascript, maki utilizzo di Clipboard events^{* e dagger;}:

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

Ecco una pagina di prova ^{& Dagger;}: http://jsfiddle.net/vJK3e/1/

_{* provato bene su Safari 6.0.3
& pugnale; Potrebbe richiedere versioni di browser più recenti
e Dagger; Aggiungo la riga di codice css rt::selection { display: none; } per evitare che il testo furigana da Beed (visivamente) selezionato}

Answer 2

Ecco la vaniglia javascript modo di farlo:

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

Come notato sopra, aggiungendo .replace(/\n/g, '') dopo window.getSelection().toString() rimuoverà tutte le nuove linee che sono in qualche modo ancora in giro. .replace(' ', '') potrebbe essere utile anche se non si desidera che l'utente finisca con spazi aggiuntivi. Questi possono o non possono essere desiderabili per il tuo caso d'uso.

Answer 3

Sulla risposta accettato di Rox Dorentus (e con riferimento alla conversione utile Javascript del CPM-ae), qui è un miglioramento rispetto l'algoritmo che non coinvolge l'hacking lo stile display degli <rt> elementi, che si sente fragile per me.

Invece, costruiamo una serie di riferimenti a tutti i nodi nella selezione, filtriamo per qualsiasi con il tag <rb> e restituiamo il loro innerText. Fornisco anche un'alternativa commentata nel caso in cui non vengano utilizzati tag <rb> per avvolgere il kanji.

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; 
     } 
    } 
    } 

});