Stop the selection of text within rt tags (furigana)

Question

Stop the selection of text within rt tags (furigana)

I love incorporating ruby annotation to include furigana above Japanese characters:

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

However, when attempting to select 漢字 and copy it in Safari or Chrome, the copied text appears as:

漢
かん
字

Unfortunately, I am unable to access the word's definition using OS X's dictionary tool.

Is there a way to prevent the selection of the furigana?

rt { -webkit-user-select: none; }

doesn't seem to do the trick.

javascript css ruby-characters

Answer 1

Answer №1

If you encase them within a single <ruby> tag, like this:

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

You will be able to choose only the characters 漢字 without selecting the furigana.

UPDATE:

For text with a mix of kanji and kana like 間に合わせる, you can either:

Utilize empty <rt> tags, as shown here:

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

Create some javascript that utilizes the Clipboard events^{* †}:

HTML:

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

Javascript:

$(document).on('copy', function (e) {
    e.preventDefault(); // manually set the clipboard data later

    // prevent selection of <rt> elements
    $('rt').css('visibility', 'hidden');

   // copy text from selection
    e.originalEvent.clipboardData.setData('text', window.getSelection().toString());

    // restore visibility
    $('rt').css('visibility', 'visible');
});

Check out this demo page^‡: http://jsfiddle.net/vJK3e/1/

_{* Tested successfully on Safari 6.0.3}
_{† May require newer browser versions}
_{‡ Added the css line rt::selection { display: none; } to prevent visually selecting the furigana text}

Answer 2

If you encase them within a single <ruby> tag, like this:

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

You will be able to choose only the characters 漢字 without selecting the furigana.

UPDATE:

For text with a mix of kanji and kana like 間に合わせる, you can either:

Utilize empty <rt> tags, as shown here:

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

Create some javascript that utilizes the Clipboard events^{* †}:

HTML:

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

Javascript:

$(document).on('copy', function (e) {
    e.preventDefault(); // manually set the clipboard data later

    // prevent selection of <rt> elements
    $('rt').css('visibility', 'hidden');

   // copy text from selection
    e.originalEvent.clipboardData.setData('text', window.getSelection().toString());

    // restore visibility
    $('rt').css('visibility', 'visible');
});

Check out this demo page^‡: http://jsfiddle.net/vJK3e/1/

_{* Tested successfully on Safari 6.0.3}
_{† May require newer browser versions}
_{‡ Added the css line rt::selection { display: none; } to prevent visually selecting the furigana text}

Answer 3

Answer №2

Here is how you can achieve the same result using vanilla JavaScript:

// Conceal furigana before copying and reveal them afterwards
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');
  }
});

It is worth mentioning that adding .replace(/\n/g, '') after window.getSelection().toString() will eliminate any remaining new lines. Additionally, using .replace(' ', '') can be helpful in removing extra spaces if necessary. Consider these options based on your specific needs.

Answer 4

Here is how you can achieve the same result using vanilla JavaScript:

// Conceal furigana before copying and reveal them afterwards
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');
  }
});

It is worth mentioning that adding .replace(/\n/g, '') after window.getSelection().toString() will eliminate any remaining new lines. Additionally, using .replace(' ', '') can be helpful in removing extra spaces if necessary. Consider these options based on your specific needs.

Answer 5

Answer №3

Expanding on the solution provided by Rox Dorentus and incorporating jpc-ae's Javascript conversion, a revised algorithm is presented here to enhance functionality without the need to manipulate the display style of <rt> elements, which could be considered delicate.

Instead of directly modifying styles, this approach involves constructing an array containing references to all nodes in the selection, filtering for those tagged as <rb>, and extracting their textual content using innerText. Additionally, an alternative method is outlined as a fallback when <rb> tags are not utilized to envelop the kanji characters.

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

  /* Retrieves all <rb> elements within the selected range e.g., for <ruby><rb>振</rb><rt>ふ</rt></ruby> */
  var payload = nodesInRange.filter((node) => node.nodeName === "RB").map((rb) => rb.innerText).join("");

  /* Alternative method if no <rb> tags are used: captures all textNodes within <ruby> elements e.g., 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();

  /* Helper function for fetching an array of node references within 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;
      }
    }
  }

});

Answer 6

Expanding on the solution provided by Rox Dorentus and incorporating jpc-ae's Javascript conversion, a revised algorithm is presented here to enhance functionality without the need to manipulate the display style of <rt> elements, which could be considered delicate.

Instead of directly modifying styles, this approach involves constructing an array containing references to all nodes in the selection, filtering for those tagged as <rb>, and extracting their textual content using innerText. Additionally, an alternative method is outlined as a fallback when <rb> tags are not utilized to envelop the kanji characters.

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

  /* Retrieves all <rb> elements within the selected range e.g., for <ruby><rb>振</rb><rt>ふ</rt></ruby> */
  var payload = nodesInRange.filter((node) => node.nodeName === "RB").map((rb) => rb.innerText).join("");

  /* Alternative method if no <rb> tags are used: captures all textNodes within <ruby> elements e.g., 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();

  /* Helper function for fetching an array of node references within 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;
      }
    }
  }

});

Answer 7

Answer №4

To alter the selection behavior of text using CSS, utilize the user-select property. Implement the following code snippet:

rt {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

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

For details on browser compatibility, refer to the information available at Can I Use.

Answer 8

To alter the selection behavior of text using CSS, utilize the user-select property. Implement the following code snippet:

rt {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

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

For details on browser compatibility, refer to the information available at Can I Use.

Stop the selection of text within rt tags (furigana)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the reason that prototypes are not passed down through inheritance?

Accessing the AppContext in Next.js within the _document file is the

Angular Link function encounters scope undefined issue

The click interactions of SVG elements are altered when switching between <img> and <object> elements

What is the reason for not allowing return statements in the ternary operator?

AngularJS Cascading Dropdowns for Enhanced User Experience

Incorporating a personalized image to create custom icons on the Material UI bottom navigation bar

Unable to view any output in the console while attempting to troubleshoot a login functionality

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

Tips for managing the output of an asynchronous function in TypeScript

Guide to incorporating HTML within React JSX following the completion of a function that yields an HTML tag

Encountering a Next.js Strapi error. TypeError: Fetch request unsuccessful

Durandal attempts to retrieve a view located within the viewmodel directory

Separate the string by commas, excluding any commas that are within quotation marks - javascript

Using Vanilla JavaScript and VueJS to smoothly scroll back to the top of a div when a button is clicked

Adjusting jQuery Button Width with input type of "button"

The nodemailer module in Node.js encountered an issue while trying to send an email, resulting

Is there a skilled coder available to troubleshoot this carousel's HTML code?

Choose Your Price - Price Grids

Reduce the noise from different versions by utilizing package-lock.json