Automatic line numbering on PRE elements - Solved, sort of

[Wayne]

When I couldn't find it on-line by Googling,
I spent all last night working it out. And it
works, Yea! All you do is mark the PRE sections
you want numbered with a "marker" style like this:

....
<style ...>
..numbered {}
</style>
....
<pre class="numbered">
These lines get numbered automatically.
I just enter the text;
JavaScript does the rest!
</pre>
....

Of course this may have been easy and solutions posted
long ago, but I didn't find any. CSS 3 promises
to do this with ::line-marker pseudo selector, but
that seems a long way off.

Only problem is my JavaScript skills are all rusty.
While it works great in FireFox it doesn't work in
IE. (OK, that's not the only problem. My inefficient
code sometimes causes a "flicker" when the page loads.
And it would be nice to be able to copy the
text without the numbers. But really I just would be
happy to have it work in most modern browsers.)

Would it be reasonable to post the code here, and have
some of you experts fix it up so it works in all
browsers?

-Wayne

[Anthony Levensalor]

Wayne said:
[snip]

Would it be reasonable to post the code here, and have
some of you experts fix it up so it works in all
browsers?

-Wayne

Wayne,

While I am not an expert, I would like very much to see the code, and to
help you get it worked out. I could use the practice.

All the best,
~A!
--
Anthony Levensalor
an*****@mypetprogrammer.com

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein

[Ed]

Wayne wrote:

I look forward to a vastly improved version that works on
IE and other browsers too! Thanks for any help.

In IE, text nodes will contain \r instead of \n.

[Thomas 'PointedEars' Lahn]

RobG wrote:

On Jan 6, 7:39 pm, David Mark <[e-mail]:

>On Jan 6, 4:02 am, RobG <[e-mail]:

>>This will return a NodeList to the calling function, but if a
className was specified, the function will return an Array. These are
quite different objects, the function should reliably return one or
the other (probably an Array), always.

In a perfect world, yes. However, I have never found an efficient way
to convert a nodelist to an array,

Depending on the browser, it may be possible to extend NodeList with
the required methods (untested and I expect it will only work in a few
browsers).

Depending on the browser, especially the available script engine, it would
be possible to use methods of Array.prototype, without the error-prone
augmentation of the host object, by using Function.prototype.call() and
Function.prototype.apply().

http://PointedEars.de/scripts/es-matrix/#f
Your signature delimiter is broken because of a bug in Google Groups.
I suggest you do not to use your common signature when using that Web interface.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[David Mark]

On Jan 6, 8:47*am, Thomas 'PointedEars' Lahn <[e-mail]>
wrote:

RobG wrote:

On Jan 6, 7:39 pm, David Mark <[e-mail]:

On Jan 6, 4:02 am, RobG <[e-mail]:
This will return a NodeList to the calling function, but if a
className was specified, the function will return an Array. *These are
quite different objects, the function should reliably return one or
the other (probably an Array), always.
In a perfect world, yes. *However, I have never found an efficient way
to convert a nodelist to an array,

Depending on the browser, it may be possible to extend NodeList with
the required methods (untested and I expect it will only work in a few
browsers).

Depending on the browser, especially the available script engine, it would
be possible to use methods of Array.prototype, without the error-prone

Like using slice on an arguments object? Doesn't work for nodelists
(at least not in the browsers I tested.)

[Dr J R Stockton]

In comp.lang.javascript message <47**********************@roadrunner.com

>, Sun, 6 Jan 2008 01:27:01, Wayne <no****@all4me.invalidposted:

>The two parts that *may* need improvement are:
(1) Setting of the newline character used in a PRE,
which AFAIK is '\n' except in IE, so I use an IE
conditional comment to set it to '\r'. Is this
the best way to detect the EOL character used?

One should be able to use .split with a suitable RegExp to determine the
number of lines; I do this in button Indt in <URL:http://www.merlyn.demo
n.co.uk/js-quick.htm(though ISTR one must be careful, and the code for
button Pack needs some adjustment to accommodate Safari 3.0.4 in XP
perfectly).

If the FAQ dealt with RegExps adequately, it would include information
on splitting text into lines cross-browser.

var width = 1 + Math.ceil( Math.LOG10E
* Math.log( countLines(textNodes, newline) ) );

That may work reliably, but it's a bad idea to use intrinsically-float
arithmetic for what must be essentially an integer matter.

How about var width = 1 + String(NumberOfLines).length ; ??

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.

[Wayne]

Dr J R Stockton wrote:

...

>(1) Setting of the newline character used in a PRE,
which AFAIK is '\n' except in IE, so I use an IE
conditional comment to set it to '\r'. Is this
the best way to detect the EOL character used?

One should be able to use .split with a suitable RegExp to determine the
number of lines; I do this in button Indt in <URL:http://www.merlyn.demo
n.co.uk/js-quick.htm(though ISTR one must be careful, and the code for
button Pack needs some adjustment to accommodate Safari 3.0.4 in XP
perfectly).

Your code:

Lines = G.Code.value.split("\n") // Code to Lines

won't work for IE for a PRE element, which doesn't use '\n'
but rather '\r'.

(While I appreciate the advice many have posted here about using
a regular expression for this, it seems nobody can craft one!)

If the FAQ dealt with RegExps adequately, it would include information
on splitting text into lines cross-browser.

I agree; I wish someone who knows how would post or add that!

>

> var width = 1 + Math.ceil( Math.LOG10E
* Math.log( countLines(textNodes, newline) ) );

That may work reliably, but it's a bad idea to use intrinsically-float
arithmetic for what must be essentially an integer matter.

How about var width = 1 + String(NumberOfLines).length ; ??

*Much* better, thanks!

I will also work on eliminating the imported code. Sadly the
CWR website isn't working for me today. I guess I'll try
it myself; even if it doesn't work well I know I'll learn
something.

-Wayne

[RobG]

Wayne wrote:

Dr J R Stockton wrote:

>...

>>(1) Setting of the newline character used in a PRE,
which AFAIK is '\n' except in IE, so I use an IE
conditional comment to set it to '\r'. Is this
the best way to detect the EOL character used?

One should be able to use .split with a suitable RegExp to determine the
number of lines; I do this in button Indt in <URL:http://www.merlyn.demo
n.co.uk/js-quick.htm(though ISTR one must be careful, and the code for
button Pack needs some adjustment to accommodate Safari 3.0.4 in XP
perfectly).

Your code:

Lines = G.Code.value.split("\n") // Code to Lines

won't work for IE for a PRE element, which doesn't use '\n'
but rather '\r'.

(While I appreciate the advice many have posted here about using
a regular expression for this, it seems nobody can craft one!)

>If the FAQ dealt with RegExps adequately, it would include information
on splitting text into lines cross-browser.

I agree; I wish someone who knows how would post or add that!

I posted one in my first response, it may also be found in the archives
by searching for terms like "IE textarea newline return" or simlar.
[...]
--
Rob
"We shall not cease from exploration, and the end of all our
exploring will be to arrive where we started and know the
place for the first time." -- T. S. Eliot

[Dr J R Stockton]

In comp.lang.javascript message <47***********************@roadrunner.co
m>, Sun, 6 Jan 2008 22:03:21, Wayne <no****@all4me.invalidposted:

>Dr J R Stockton wrote:

>...

>>(1) Setting of the newline character used in a PRE,
which AFAIK is '\n' except in IE, so I use an IE
conditional comment to set it to '\r'. Is this
the best way to detect the EOL character used?

One should be able to use .split with a suitable RegExp to determine
the
number of lines; I do this in button Indt in <URL:http://www.merlyn.demo
n.co.uk/js-quick.htm(though ISTR one must be careful, and the code for
button Pack needs some adjustment to accommodate Safari 3.0.4 in XP
perfectly).

Your code:

Lines = G.Code.value.split("\n") // Code to Lines

won't work for IE for a PRE element, which doesn't use '\n'
but rather '\r'.

Yes, but, as far as I've so far tested, it's suitable for the textarea
element that I use it on.

>(While I appreciate the advice many have posted here about using
a regular expression for this, it seems nobody can craft one!)

>If the FAQ dealt with RegExps adequately, it would include information
on splitting text into lines cross-browser.

I agree; I wish someone who knows how would post or add that!

ISTM that, to do it properly, the first thing is to make a list of all
the treatments-applied-to-elements that can yield multi-line text
strings; and then for each of those to list the possible line separators
(giving consideration to VT, FF, PS, etc.). Then one will have the
information necessary to design the splitting routine or routines.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/- FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "" (SonOfRFC1036)