Like CSS "float: right", but not selectable
I am trying to do what "float" does, but it is not selectable for copying. 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 will make "post-it notes" appear as the field immediately to the right of the corresponding text. If I choose text to copy, the note is copied and the text stream is broken.
Is there a way to fix this?
source to share
Simplified solution
The best way I can think of is to offer an alternative look at the text, a printable version that doesn't show your post-it fields. As long as the content of the message is in the text stream you will have this problem.
Potential (harder) Alternative
As a more complex alternative, you can take the javascript route. This would mean inserting an empty DIV into the body text and giving it a given width and height, and then placing it above it 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 an empty-div to match the post-it value, which can be 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 want to get the x and y offsets of the empty div and apply that to both the left and top column values of the post-it div, so it's right above the text in the selection area.
source to share
Short answer? Not.
Long answer? The browser includes all selected content. The way to avoid selecting it is to place it somewhere else in the document so that it won't be selected. Then you set it up using, say, absolute positioning. This is far from convenient. This will not work with your "float: right" example since the placement of the content in the document.
Whatever you do, don't go down the route of using Javascript to stop copying / pasting or anything like that. It's just a pointless way to annoy the user.
source to share
Putting together the two answers above, one really confusing way to do this might be to have a footnote section, like printable text, where it goes below the content (from a DOM perspective), but each notemarked zone gets a range with an id. similar footnoted-1
, and the footer area gets a corresponding identifier such as footnote-1
. Then use a nice js framework like jquery that grabs all the footnotes and gives them a position relative to the content area.
Quick side note: I tried something like this (not quite as fancy, but the same principle) for the site and another problem became apparent very quickly. Sometimes your margin notes are longer than the co-op paragraph, and sometimes there are multiple notes for the same paragraph. Things overflow quickly and style becomes useless.
While I'm not a fan of this site style, you might consider ditching the idea of a side edge and using a technique used by other sites where text is marked in a different style (dashed underline or highlighted background) and users can see the notes as they ply above the text.
source to share
All browsers I know fetch all text content in the source between the elements below the cursor positions you start dragging and stop dragging. They also appear on the clipboard in the same order as the source, regardless of the display position. Please note, right-placed content is never displayed in front of content that was previously in the source to give the key to users.
You need to arrange the text content logically and not nest to select it separately. If you place your floating range at the beginning of the paragraph, the paragraph text selection will work the way you want. You can't select more than one paragraph without a note in between without using some rough CSS tricks or using js in combination with the structural hacks described in this answer , which I don't recommend at all.
source to share