Like CSS "float:right", but unselectable

Question

I am trying to do what "float" do, but not selectable for copy. This is an example of how this is used:

<p>
Lorem ipsum dolor sit amet, In a mollis est. Cras vel tortor in purus mattis 
venenatis.
<span style="width: 5em; border: 1px solid black; float: right"> What does "venenatis" means? this is a margin notes! </span>
Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere. Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere.
</p>

This make a "post-it notes" like box that is on the immediate right of the related text. If I select the text for copy, the note is copied as well and the text flow is broken.

Is there any way to fix this?

Answer 1

Easier Solution

The best way I can think of is to offer an alternative-view of the text, a printer-friendly version that doesn't show your post-it boxes. As long as the content of the post-it is within the text-flow, you're going to have this issue.

Potential (More difficult) Alternative

As a more difficult alternative, you could go a javascript route. It would involve inserting an empty DIV in the main text and giving it a set width and height, then placing the post-it over that same location with absolute positioning.

<div id="container" style="position:relative;">
  <div class="text">Duis non lorem vel diam adipiscing dignissim. 
    Nulla vel varius erat. Nulla facilisi. Vivamus pulvinar pretium dignissim. 
    Aliquam sed tortor posuere nunc bibendum mattis. Integer bibendum, elit ut 
    vestibulum tristique, dolor justo scelerisque nibh, ac blandit metus arcu 
    non nibh.In ac eros sed nisl porta bibendum quis in mauris. Quisque 

    <div style="float:right; margin:10px; width:100px; height:100px;"></div>

    pellentesque ligula eu sapien commodo at mollis purus feugiat. Vivamus 
    volutpat dictum magna eu venenatis. Suspendisse dignissim enim aliquet leo 
    imperdiet vitae accumsan mauris blandit. Donec tempus velit aliquet magna 
    imperdiet euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum mollis tortor pellentesque velit pharetra non lobortis est 
    aliquam.
</div>
<div class="post-it">
  I am the post-it. I should be placed absolutely so that 
  I overlap the div that is presently sitting within the body of text. This 
  will give the impression that I too exist within there, but I won't be 
  selectable.
</div>
</div>

Dynamically determining the width/height of the empty-div so that it matches that of the post-it can be pretty easily done with javascript. Here's an example using jQuery:

var realWidth = $("#container > .post-it").width();
var realHeight = $("#container > .post-it").height();

$("div.text div:eq(0)").css({"width":realWidth,"height":realHeight});

Then you'd want to get the x and y offset of the empty div, and apply that as the left and top values of the post-it div, so it sits right on top of the text, in the designated area.

Answer 2

Short answer? No.

Long answer? The browser includes all content selected. The way to avoid it being selected is to put it elsewhere in the document such that it isn't selected. You then position it using, say, absolute positioning. This is far from convenient for sure. This won't work with your "float: right" example because the content's placement within the document.

Whatever you do, don't go down the route of trying to use Javascript to stop copy/paste or anything like that. It's just a pointless way of annoying the user.

Answer 3

Combining the two above answers, one really convoluted way of doing it could be to have a footnotes section, like print text, where it goes below the content (in terms of the DOM), but each footnoted area gets a span with an id like footnoted-1 and the footnoted area gets a corresponding id like footnote-1. Then use a nice js framework like jquery that grabs all footnotes and gives them a position relative to the area of the content.

Quick note, though: I was trying something like this (not quite as fancy but same principle) for a site, and another problem became obvious really quickly. Sometimes your margin notes are longer than the cooresponding paragraph and sometimes there are several notes for one paragraph. Things get crowded quickly and styling becomes useless.

While I'm not a fan of this style of site, you may want to consider ditching the side margin idea and use the technique other sites employ, which is having noted text in a different style (dotted underline or highlighted background) and users can see notes when they hover over the text.

Answer 4

All browsers I know of select all the text content in the source between the elements under the cursor positions you start to drag and stop dragging. Also they appear in the clipboard as the same order as the source regardless of display position. Take note, right floated content never display before the content that comes before in the source also to give a clue to users.

You need to order your text content logically and not nest in order to select it separately. If you put your floated span at the start of a paragraph selecting the paragraph text will work as you want. You cannot select more than one paragraphs without a note in between without using approximate CSS tricks or using js coupled with structural hacks described in this answer which I do not recommend at all.