Preventing text in rt tags (furigana) from being selected

Question

I use ruby annotation to add furigana to Japanese text:

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

When I try selecting 漢字 and copying it in Safari or Chrome, the clipboard looks like this:

漢
かん
字

I can't look up the word from OS X's dictionary either.

Is there some way to prevent the furigana from being selected? rt { -webkit-user-select: none; } doesn't seem to work.

Answer 1

It appears that if you wrap them inside one <ruby> element, like this:

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

Then it'll be possible to select 漢字 without the furiganas selected.

---

UPDATE:

For kanji-kana mixed text like 間に合わせる, you can either:

1. Use empty <rt> element, like this:

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

2. Write some javascript, making use of the Clipboard events^{* †}:

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

Here's a demo page^‡: http://jsfiddle.net/vJK3e/1/

_{* Tested OK on Safari 6.0.3
† Might require newer browser versions
‡ I add the line of css code rt::selection { display: none; } to prevent the furigana text from beed (visually) selected}