Line numbering and copy/paste (HTML/CSS)?

What about using a table like in bugzilla.gnome.org/attachment.cgi?id=127131.

Up vote 2 down vote favorite 1 share g+ share fb share tw.

Thanks javascript html css web-development link|improve this question asked Jan 21 '09 at 14:32elmarco2,74321334 75% accept rate.

It would be useful for you to describe what context you are working in. What makes the obvious solutions problematic to you? Why not: remove the number vi regex, remove them manually, copy the page source and use search-and-replace to remove that tagging, etc. – Joe Soul-bringer Jan 30 '09 at 2:12 More precisely, it would be used to offer code snippets in programmers documentation.

We are looking at different solutions to make sure the copy&paste only copy the snippet, not the line numbering. Thanks – elmarco Jan 31 '09 at 14:18.

I wonder what's wrong with this approach – elmarco Feb 26 '09 at 1:03.

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!

I took a swing at this and wrote a quick jQuery-based solution. It was ad-hoc, and unplanned, but it works. The source is available here : stackoverflow.com/questions/465526/… – Jonathan Sampson?

Jan 29 '09 at 21:09.

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.

Copy A B C Disclaimer: Above sample may not be 100% functional. ;-).

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).

Chrome is only available on windows. – Adam Peck Jan 21 '09 at 14:46 OS is Windows XP – Joao da Silva Jan 21 '09 at 16:03 They don't copy using IE6 on WINXP either. – JoshFinnie Jan 29 '09 at 20:00 The item numbers aren't copied in Opera on WinXP, either.

– hydrapheetz Jan 30 '09 at 4:23.

For me I get either numbers (firefox 3) or '#' character (firefox 2) copied along, even though they are not selected. On ie6 I just get the selection.

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.

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. This is a sample row that will teach me how to get all of the things lined up. Too Short.

C.

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: answers.yahoo.com/question/index?qid=200... If Javascript is an option you could add the numbers yourself: var ol = document. GetElementsByTagName("ol")0; for(var i=0; i"+i+".

"+ol.childNodesi. InnerHTML; } or something like that. Then of course get rid of the CSS numbering.

That wouldn't stop the copy-paste behaviour (on browsers which have it), which is what the OP is trying to achieve, I think. – Rob Jan 29 '09 at 20:51 Please re-read the original question. – strager Jan 29 '09 at 20:54 yeah I forgot the CSS style.

– Luca Matteis Jan 29 '09 at 21:03.

The alternatives Dotted list item Prints: ** List item* Numbered list item Prints: 1. List item Category List Item Category List Item 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.

Item Item 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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.