What are some methods for securing letters in place?

Currently, I am working on a unique project focused on maintaining the confidentiality of text shared over the internet. My approach involves creating a secure method to post text while preventing it from being easily printed or copied and pasted.

To achieve this, I have devised a technique that involves splitting the alphabet into three distinct fonts: a top font, a bottom font, and a middle font. By looping over these fonts in a specific manner resembling animation, the text remains readable in the source.

However, I have encountered an issue where the browser slightly shifts the letters left and up and down, causing some readability challenges. Is there a solution to prevent this unintended shift?

For reference, here is a link to view an example of my work:

I appreciate any assistance or insights you can provide. Thank you for your time.

javascripthtmlcssfonts

Answer №1

If you're looking to avoid content copying in the browser using CSS, you can implement the following code:

body{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

However, it seems like the problem lies in the fact that Blayer is undefined, causing the style not to be applied correctly.

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

Issue with Firefox not recognizing keydown events for the backspace key

I am currently developing a terminal emulator and have encountered an issue with capturing the backspace key in Firefox. While I am able to capture the first backspace press and delete the last character in the input prompt, the problem arises when trying ...

javascriptjqueryeventsfirefoxkeydown

Dynamic use of a mixin in LESS allows for greater flexibility in

Is it possible to dynamically call a mixin in Less CSS? An interesting use case could be creating a style guide: // Define the mixin that needs to be called .typography-xs(){ font-family: Arial; font-size: 16px; line-height: 22px; } // A mixin att ...

csslessmixins

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

jquerycss

The box remains static as the mouse moves rapidly – JavaScript exclusive

function down(event){ event.target.style.backgroundColor="green"; document.addEventListener("mousemove",move,false); } function up(event) { event.target.style.backgroundColor="red"; document.removeEventListener("mousemove",move,false); } ...

javascript

The dependency graph of npm modules shows significant differences

I've been exploring the capabilities of the npm-remote-ls package to analyze dependency trees for modules. This tool is installed globally on my system. When I execute Command 1: npm-remote-ls object-assign The tree structure displayed is as follows ...

javascriptnode.jsnpmpackage-managers

Tips for aligning Bootstrap 4 cards when the first card header breaks at a word and the second card header does not

Currently, I am working on a personal project using bootstrap 4. However, I've encountered an issue with the class "card" in my gallery section. One card header has 'white-space' set which breaks the word, while the other does not have any & ...

htmlcssbootstrap-4

What causes the Bootstrap navbar dropdown to be partially obscured in IE8?

While working on a specific project, I have encountered an issue where everything seems to function properly in newer browsers except for IE8 during testing. The dropdown menu is functional, however, it appears hidden behind the main content area labeled ...

jqueryhtmlcsstwitter-bootstrap

Including an image side by side with clickable text within a list

Check out my progress here: http://jsfiddle.net/dDK6z/ I've experimented with using display:inline(-block), as well as adjusting margins, padding, and more, but I can't seem to get the image to move down or the text to move up. Does anyone have ...

htmlcss

Capturing link titles for control navigation in Nivo Slider

Essentially, in the nivoslider plugin, the controlnav section displays numbers based on the "rel" attribute in the code. I am wondering if there is a way to modify this so that it retrieves the "title" or "alt" from the link added to the slideshow. This wo ...

javascriptjqueryhtmlnivo-slider

Having trouble getting Node.js, express, socket.io, and ejs to work together?

Currently, I am working on improving my knowledge of java-script and had the idea to create a basic chat app using Express, stock.io, and ejs. Unfortunately, I am facing some challenges in getting it up and running smoothly. Below is the snippet from my ...

javascriptnode.jsexpresssocket.ioejs

Increasing the height of a jQuery div element and displaying image captions when hovering over them

There is a mysterious 3px gap between the image and the overlay, causing the overlay to extend 3px beyond the height of the image. Switching the CSS to use bottom:3px fixes the issue, but it feels like a hacky solution. The source of this spacing conundrum ...

javascriptjqueryhtmlcss

Experiencing a lack of output when splitting a string using Selenium

Having trouble with a selenium javascript code that splits a string? Here's the specific code: <tr> <td>storeEval</td> <td>var dList = '${StaffAdminEmail}'.split('@'); </td> <td>dspl ...

javascriptseleniumselenium-ide

What is the best way to stop a jQuery function from applying titles extracted from the first row th's in thead's to multiple tables in a document?

My circumstances: I am new to jQuery and Stack Overflow, seeking assistance for my website project. The challenge: Building a website using Bootstrap 3.3.6 with intricate data tables that need to be stacked dynamically on mobile devices using CSS. It is c ...

javascriptjquerycsshtml

Assigning values to targeted elements depending on their index in React can be achieved by utilizing various methods

Desired outcome: Click on <li> </li>, capture the index of the li element, and pass both the index and this.state.todos to the component Clock. Based on the index, select an element from the array and assign it a random value using Math.random( ...

javascriptreactjsecmascript-6

Utilize Three.js to Add Depth to 2D Images with Extrusion

After searching online, I have been unable to find a method to extrude a colored image in Three.js. My goal is to create a design similar to a Minecraft item where the image is used to generate an extruded geometry. An example of what I'm trying to ac ...

javascriptsvgthree.js3drendering

Button in Angular requiring double-click to trigger the click event

Currently, I am in the process of building an application using Angular. The module I am focusing on allows users to either join an existing room or create a new one. Here is the initial UI design of the room module: https://gyazo.com/81afe2b5f7119326d00b ...

javascriptangulardomfrontend

What causes the updated value to be appended to an array when using the spread operator to modify an existing property's value?

In my state, I have an array of objects: const initialState=[{a:1},{b:2},{c:{d:3}}] const [state,setState]=useState(initialState) My goal is to modify the value of b to 5 within my event handler: function changeBToFive() { setState((state) => [ ...

javascriptreactjsobject

Executing a JavaScript function within the HTML body and passing a variable as an argument to the function

I recently created the following HTML code: <html> <title> Upload Infected File </title> <body> <header id = "header"> <h1 align="center">Upload Malware File</h1> <p align="center"> Pleas ...

javascripthtml

consistent height across the div when expanding

There is a recurring issue I encounter where it takes too long for me to solve the problem. My goal is to ensure that the bootstrap boxes at the bottom of the page have the same height. I attempted to set a fixed height in pixels using my CSS, but this cau ...

htmlcsstwitter-bootstrap

How can a JQuery slideshow be programmed to only iterate once?

Looking to create a slideshow that transitions between images every two seconds? Check out the code snippet below: HTML: <div class="fadeIn"> <img src="img/city.png" class="remimg" id="city"> <img src="img/shop.png" class="remimg" ...

javascriptjqueryhtml