Preventing the copying and pasting of HTML ruby tags

I am currently using ruby tags to include pinyin in my text. For instance:

<p>
    <ruby>与<rt>yǔ</rt></ruby><ruby>摩<rt>mó</rt></ruby><ruby>拜<rt>bài</rt></ruby><ruby>单<rt>dān</rt></ruby><ruby>车<rt>chē</rt></ruby><ruby>推<rt>tuī</rt></ruby><ruby>出<rt>chū</rt></ruby><ruby>的<rt>de</rt></ruby>...
</p>

However, when attempting to copy the text, it also copies the pinyin:

与yǔ摩mó拜bài单dān车chē推tuī出chū的

I would like to exclude the pinyin from being copied. For example, if I want to paste a sentence into Google Translate. Is there a way to achieve this without relying on Javascript?

I have experimented with the user-select CSS property and unselectable HTML attribute, but unfortunately, neither of them seem to work as intended.

This functionality is essential for a Chrome extension, so compatibility with Chrome is the main priority.

javascripthtmlcss

Answer №1

If you're looking to add a special touch, why not try incorporating a pseudo element:

    
    rt:before {
      content: attr(data-rt);
    }
    <p>
        <ruby>与<rt data-rt="yǔ"></rt></ruby><ruby>摩<rt data-rt="mó"></rt></ruby><ruby>拜<rt data-rt="bài"></rt></ruby>...
    </p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating row color according to values obtained from the map function in ReactJs

I have been experimenting with various methods to change the color of table rows based on specific values within a map function. Despite trying solutions like the UseRef hook and browsing through stack overflow, I have yet to achieve success. {dat ...

javascriptreactjsreact-hooksmap-function

Rearrange Firebase data on the client side

Having trouble sorting data in Firebase for a web project. I tried using orderByChild to filter the data, but now I need to also order it by date. Here's what I've attempted: Tried using object.values with .sort, no luck Attempted to use lodas ...

javascriptfirebasefirebase-realtime-database

Creating a website with a seamless image background that fills the entire page

! Is it possible to achieve the same effect using AngularJS? Below is the CSS code: .bg { background: url(holiday-car-rental.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-s ...

htmlcss

JavaScript function for converting timestamp to readable date

Can someone help me transform the timestamp 1382086394000 into a readable date format 2013-10-18 08:53:14 by using a JavaScript function? The current function I have is: function cleanDate(d) {return new Date(+d.replace(/\/Date\((\d+)\ ...

javascriptnode.jsdateexpresstimestamp

React-router-sitemap lacks a definition for 'Require'

According to the official documentation here, this is how the sitemap-builder.js file should be structured: require('babel-register'); const router = require('./router').default; const Sitemap = require('../').default; ( ...

javascriptnode.jsreactjsnpmnode-modules

When the 'keyup' event is detected, trigger the function only on keyup

Looking for assistance in setting this to only trigger on keyup events. Can anyone provide guidance? $(function() { $('#acf-field_5a32085c7df98-field_5a3208f87df99').on('keyup', function() { $('#link-headline-fb').text($( ...

javascriptjquerykeyuponkeyup

Property float does not account for margin values

Currently delving into the world of the semantic-ui framework, I have been working with segments. Here is a snippet of my code: <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery ...

htmlcsssemantic-ui

Arrow functions in ECMAScript 6

var createTempItem = id => ({ id: id, name: "Temporary Product" }); I understand that the arrow function above is the same as: var createTempItem = function(id) { return { id: id, name: "Temporary Product" }; }; However, I am ...

javascriptreactjsecmascript-6

What is the best way to verify the accuracy of my model when it includes an array property?

One of the challenges I am facing is dealing with a class that has an array property in MVC. public class MyClass { public int Contrato_Id { get; set; } public string Contrato { get; set; } public int Torre_Id { get; set; } public string T ...

javascriptc#asp.net-mvcasp.net-mvc-4

What is the best way to align a group of social media icon background images in the center

Looking for assistance with centering a block of social icons on my website when viewed on a mobile browser. Here is the HTML: <div id="header-tel-no">Tel: 123456789</div> <div id="social-buttons-header"> <p><a class="social-bu ...

htmlcsscentering

encoding the special character "ü" in json_encode as either 'ü' or '&#

I've developed a function that extracts the title from a given URL and returns it in JSON format. The function is invoked by an AJAX call. Everything works smoothly, but when a title contains characters like ü or any related ones, it returns null. Wh ...

javascriptphpjsonajax

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

I am currently utilizing expressjs and have implemented cors validation to allow all origins. const options = { origin: ['*'], credentials: true, exposedHeaders: false, preflightContinue: false, optionsSuccessStatus: 204, methods: [&a ...

javascriptnode.jsangularexpresscors

Aligning text to the center and having it displayed on either side of it

Hey there, I need help with the following: <div id='1'></div> <div id='2'></div> <div id='3'></div> I want to place a single word into each div. The width of each div should be ...

htmlcss

What is the best way to showcase saved HTML content within an HTML page?

I have some HTML data that was saved from a text editor, <p style=\"font-size: 14px;text-align: justify;\"> <a href=\"https://www.xpertdox.com/disease-description/Chronic%20Kidney%20Disease\" style=\"background-color: tr ...

javascripthtmlangularjsdata-bindinginterpolation

Encountering a problem when utilizing window.ethereum in Next Js paired with ether JS

Experiencing some difficulties while utilizing the window.ethereum in the latest version of NextJs. Everything was functioning smoothly with NextJs 12, but after upgrading to NextJs 13, this error started popping up. Are there any alternative solutions ava ...

javascripttypescriptnext.jsethereumethers.js

utilizing javascript function in Icefaces applications

I'm facing an issue. Here's the situation: I'm working on a quiz game where I need to implement a timer using JavaScript (jquery.timer.js). I have created a JavaScript file (question.js) with a method called startTimer, which utilizes the jq ...

javascripticefaces

Struggling to make jQuery code function in an external file without causing clashes with additional jQuery code

When incorporating this simple code into its own separate file, I encounter some jQuery conflicts with another piece of code. jQuery(function ($) { $(".tabContents").hide(); $(".tabContents:first").show(); $("#tabContainer ul li a").click(fun ...

javascriptjqueryconflict

Can the state be determined by the presence of other objects in the state?

Currently, I'm delving into the world of ReactJS by constructing a personalized launch page. Brace yourself for a somewhat casual explanation. Within my primary app.js file, I've set up the initial state of the application with some data like th ...

javascriptreactjs

What is the best way to update an array within an object using Redux?

I am currently working on a code for redux that involves an array. const initialState = [{ id: '1', title: '', description: '' }]; My goal is to update the array to contain two objects like this: [{ id: '1', title: ...

javascriptreactjsreact-redux

Executing a JQuery function when the webpage is loaded

I am attempting to execute some jQuery code when the page loads, but it doesn't seem to be working properly. The goal is to check if a link has already been saved and, if so, display a table with that information. Is this achievable? It should apply t ...

jqueryhtmldom