StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The solution with <code>OL</code> & <code>LI</code> 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.</p> <p>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 <em>with</em> or <em>without</em> 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 <em>any</em> options.</p> <p>But if you want to provide him an easy way to copy the plain source without any additional markup or line numbers, <strong>give him a link to the plain-text source file</strong>. 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.</p> <p>The only problem I met using this technique with <code>OL</code> & <code>LI</code> 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.</p> <p>Huh... If only it were possible in some future HTML version to automatically number lines in any container (like <code>PRE</code>, <code>DIV</code> 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</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload