My guess is it's browser-dependant. I tried with IE 7, Firefox 3 and Chrome and none of them copy the numbers (Chrome "seems" to copy them in the selection, but after pasting they are not there).
The copying of the numbers of an OL is a browser behaviour. I believe some browsers don't but most do.
You could use JavaScript to rewrite the code once the page loads so that it looks the same but isn't underneath. This would fix your copying problem but cause other problems such as accessibility.
Essentially the way to achieve it would be to rewrite the code in Javascript to be 2 columns, 1 with the numbering and 1 with the contents. You could do this with a grids system like YUI Grids or Blueprint. The user would be able to select the second column with the contents in it without selecting the first.
The issue with this is that it ruins the semantic markup for screen reader users and they no longer get the benefit of the ordered list. It might be possible to do it onmousedown so that only when the user tries to select the text you rewrite it. Not that I've tested that idea.
Disclaimer: I work for Yahoo!
edit sorry forgot to add the javascript to disable deselection on the numbers... look at the code now.
Check this for disabling selection cross browser: http://answers.yahoo.com/question/index?qid=20090107041047AAvbI1u
If Javascript is an option you could add the numbers yourself:
var ol = document.getElementsByTagName("ol")[0];
for(var i=0; i<ol.childNodes.length; i++) {
ol.childNodes[i].innerHTML = "<span style='MozUserSelect:none;'>"+i+".</span> "+ol.childNodes[i].innerHTML;
}
or something like that.
Then of course get rid of the CSS numbering.
Give this a shot - it was written rather quickly, but could serve as a great start. Some things you'll want to do is replace the old list with the new element rather than adding the new element directly into the body like I'm currently doing. This is pretty easy using the (selector).replaceWith(newElement) jQuery functionality.
<style type="text/css">
div.newList {
position:relative;
width:300px;
font-family:verdana;
font-size:12px;
line-height:150%;
}
div.newList div.column {
padding-left:30px;
}
div.column p {
margin:0;
padding:0;
}
div.numbers {
position:absolute;
top:0;
left:0;
width:20px;
}
div.numbers p {
text-align:right;
padding:0;
margin:0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newDiv = document.createElement("div");
$("body").append(newDiv);
$(newDiv).addClass("newList").html("<div class='column'></div><div class='numbers'></div>");
$("ol.alphabet li").each(function(){
var index = $("ol.alphabet li").index(this);
var content = $(this).text();
$("div.column").append("<p>"+content+"</p>");
$("div.numbers").append("<p>"+(index+1)+".</p>");
});
$("div.column p").each(function(){
var index = $("div.column p").index(this);
var height = $(this).height();
$("div.numbers p:eq("+index+")").height(height);
});
});
</script>
<body>
<ol class="alphabet">
<li>This is a sample row that will teach me how to get all of the things lined up.</li>
<li>Too Short.</li>
<li>C</li>
</ol>
</body>
I think the answer is more to do with the application you're pasting into rather than the browser's copying process, and this is actually the right thing for the browser to do?
Hopefully you're providing semantic HTML and thus wouldn't copying the OL be the desired result? What if the user was copying and pasting a set of paragraphs or text that contained a link or an image? Wouldn't you suspect that the user would want to be able to copy the paragraph and paste it with semantic layout intact?
Cheers,
Steve
You could use images to display the numbers and then they would not be copied. CSS can be utilized to offset the numbers and text so that it appears like a normal list.
CSS:
OL>li { list-style-type: none; padding-left: 10px }
OL>li .one { background-image: url('images/one.png') no-repeat left }
OL>li .two { background-image: url('images/two.png') no-repeat left }
So, after that you just have to figure out where to put the image.
You can't really control the clipboard behavior of the browser/OS. What you can do is provide a "Copy" link, and use jquery and the jquery.copy plugin.
<html>
<head>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script src="jquery.copy.js" type="text/javascript"></script>
</head>
<body>
<a href="#" onclick="$.copy($('#theList').find('li').text())">Copy</a>
<OL id="theList">
<LI>A
<LI>B
<LI>C
</OL>
</body>
</html>
Disclaimer: Above sample may not be 100% functional. ;-)
What about using a table like in http://bugzilla.gnome.org/attachment.cgi?id=127131
The alternatives
<ul>
<li>Dotted list item</li>
</ul>
Prints: ** List item*
<ol>
<li>Numbered list item</li>
</ol>
Prints: 1. List item
<dl>
<dt>Category</dt>
<dd>List Item</dd>
<dt>Category</dt>
<dd>List Item</dd>
</dl>
Gives just an indent to "List item".
Solution
So, in order to do this with no JS magic, and the same time break some semantic laws, is to use a only dt's in dl list.
<dl>
<dt>Item</dt>
<dt>Item</dt>
</dl>
Hope this helps :-)
The solution with OL & LI is the most semantic of all, because it supplies information about line numbers and each line is a separate block, so you can style it whatever you like. The numbers are still visible in text browsers without CSS & JavaScript. Screen-readers' users can jump from line to line, skip lines, and they always know which line they are in and how many lines there are. They can even skip the entire list.
The problem with selecting isn't really in the HTML/CSS/JS domain, because you can't decide instead of your user what does he want to do with the copied text. He could want to copy it with or without these line numbers equally well. It's better to store as much semantic information as possible and let the user choose which of them he want to use, than give him only plain data without any options.
But if you want to provide him an easy way to copy the plain source without any additional markup or line numbers, give him a link to the plain-text source file. He will be able then to click on it and display the plain-text source file in a separate page. He can copy-paste it from there without any line numbers etc., and even link to the plain-text source from his own documents or copy-paste the URL from the browser's address bar to send it to his friend programmer ;-) You can even make a list of all plain-text source files somewhere on your website.
The only problem I met using this technique with OL & LI is that the tags cannot be crossed. If some fragment (e.g. a block comment) starts at one line and continues to other lines, you have to properly close all the markup and reopen it on the next line, and do it with every line like so.
Huh... If only it were possible in some future HTML version to automatically number lines in any container (like PRE, DIV etc.) and they would appear in HTML without styles and JavaScripts (though you could be able to style these line numbers and separate lines using some pseudo-classes)... But for now, eat what you have ;-J