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>元素中，就像这样：

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

然后在没有选择furiganas的情况下选择汉字是可能的。

更新：

对于像间に合わるる这样的汉字假名混合文字，您可以：

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

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

写一些javascript，利用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');
});

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

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

Answer 2

以下是香草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, '')之后添加window.getSelection().toString()将删除任何仍然悬挂的新行。如果您不希望用户最终获得额外的空格，.replace(' ', '')也可能有用。这些可能适用于您的用例，也可能不适用。

Answer 3

基于Rox Dorentus接受的答案（并参考了jpc-ae的有用的Javascript转换），这里对算法的改进并没有涉及黑客攻击{{1} display元素的样式，对我来说感觉很脆弱。

相反，我们构建了一个对选择中所有节点的引用数组，过滤了标记为<rt>的任何节点，并返回它们的<rb>。如果没有innerText标签用于包裹汉字，我还提供了一个注释掉的替代方案。

<rb>

防止选择rt标签（假名）中的文本

3 个答案: