防止选择rt标签(假名)中的文本

Question

我使用ruby注释为日文文本添加假名:

<ruby><rb>?</rb><rt>??</rt></ruby><ruby><rb>?</rb><rt>?</rt></ruby>

当我尝试选择汉字并在Safari或Chrome中复制时,剪贴板如下所示:

?
??
?

我也无法从OS X的字典中查找单词.

有没有办法阻止选择假名？rt { -webkit-user-select: none; }似乎不起作用.

Answer 1

看起来，如果将它们包装在一个<ruby>元素内，如下所示：

\n\n

<ruby>\n  <rb>\xe6\xbc\xa2</rb><rt>\xe3\x81\x8b\xe3\x82\x93</rt>\n  <rb>\xe5\xad\x97</rb><rt>\xe3\x81\x98</rt>\n</ruby>\n

\n\n

然后就可以选择\xe6\xbc\xa2\xe5\xad\x97而不选择注音。

\n\n\n\n

更新：

\n\n

对于像\xe9\x96\x93\xe3\x81\xab\xe5\x90\x88\xe3\x82\x8f\xe3\x81\x9b\xe3\x82\x8b 这样的汉字假名混合文本，您可以：

\n\n

\n

1. 使用空<rt>元素，如下所示：

   \n\n

   <ruby>\n    <rb>\xe9\x96\x93</rb><rt>\xe3\x81\xbe</rt>\n    <rb>\xe3\x81\xab</rb><rt></rt>\n    <rb>\xe5\x90\x88</rb><rt>\xe3\x81\x82</rt>\n    <rb>\xe3\x82\x8f\xe3\x81\x9b\xe3\x82\x8b</rb><r\xe2\x80\x8c\xe2\x80\x8bt></rt>\n</ruby>\n

\n

2. 利用剪贴板事件编写一些 javascript ^{* †}：

   \n\n
   \n

   • HTML：

     \n\n

     <ruby>\n  <rb>\xe9\x96\x93</rb><rt>\xe3\x81\xbe</rt>\n</ruby>\n\xe3\x81\xab\n<ruby>\n  <rb>\xe5\x90\x88</rb><rt>\xe3\x81\x82</rt>\n</ruby>\n\xe3\x82\x8f\xe3\x81\x9b\xe3\x82\x8b\n

   \n

   • JavaScript：

     \n\n

     $(document).on(\'copy\', function (e) {\n    e.preventDefault(); // the clipboard data will be set manually later\n\n    // hide <rt> elements so that they won\'t be selected\n    $(\'rt\').css(\'visibility\', \'hidden\');\n\n    // copy text from selection\n    e.originalEvent.clipboardData.setData(\'text\', window.getSelection().toString());\n\n    // restore visibility\n    $(\'rt\').css(\'visibility\', \'visible\');\n});\n

   \n
\n

\n\n

这是演示页面^‡： http: //jsfiddle.net/vJK3e/1/

\n\n

_{* 在 Safari 6.0.3 上测试正常}
\n _{† 可能需要更新的浏览器版本}
\n _{‡ 我添加了 css 代码行rt::selection { display: none; }以防止（视觉上）选择注音假名文本}

\n