Displaying numbers in aligned columns

[Don]

With the following, I'm trying to display numberOne and numberTwo, each as a two digit character
group, such as "nn". If numberOne or numberTwo is less than 10, "bn" will be displayed (where "b"
is a space character). In other words, I always want the second digit of each number to be in the
same column, so that the beginning of "restOfText" will start in the same column for each record
produced by the following code.

I've tried several things, but can't seem to come up with the answer. Any help would be
appreciated.
var numberOne = numberOne.toString();
if(numberOne.length == 1)
numberOne = " "+numberOne;

var numberTwo = numberTwo.toString();
if(numberTwo.length == 1)
numberTwo = " "+numberTwo;
var htmlString = '<font face="Arial" size="2" color="#0000FF">' + numberOne + '<font
color="#FF0000">' + numbertwo + '</font></font>' + restOfText;
Thanks,
Don

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----

[Don]

On Tue, 08 Mar 2005 11:55:54 -0700, Don <[e-mail]> wrote:

With the following, I'm trying to display numberOne and numberTwo, each as a two digit character
group, such as "nn". If numberOne or numberTwo is less than 10, "bn" will be displayed (where "b"
is a space character). In other words, I always want the second digit of each number to be in the
same column, so that the beginning of "restOfText" will start in the same column for each record
produced by the following code.

I've tried several things, but can't seem to come up with the answer. Any help would be
appreciated.
var numberOne = numberOne.toString();
if(numberOne.length == 1)
numberOne = " "+numberOne;

var numberTwo = numberTwo.toString();
if(numberTwo.length == 1)
numberTwo = " "+numberTwo;
var htmlString = '<font face="Arial" size="2" color="#0000FF">' + numberOne + '<font
color="#FF0000">' + numbertwo + '</font></font>' + restOfText;
Thanks,
Don

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----

By the way, "restOfText" is setup to display in "Verdana" font (proportional font). I'm displaying
"numberOne" and "numberTwo" in "Arial" (mono-spaced font).

Don

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----

[RobB]

Don wrote:

With the following, I'm trying to display numberOne and numberTwo, each as a two digit character group, such as "nn". If numberOne or numberTwo is less than 10, "bn" will be displayed (where "b" is a space character). In other words, I always want the second digit of each number to be in the same column, so that the beginning of "restOfText" will start in the same column for each record produced by the following code.

I've tried several things, but can't seem to come up with the answer. Any help would be appreciated.
var numberOne = numberOne.toString();
if(numberOne.length == 1)
numberOne = " "+numberOne;

var numberTwo = numberTwo.toString();
if(numberTwo.length == 1)
numberTwo = " "+numberTwo;
var htmlString = '<font face="Arial" size="2" color="#0000FF">' + numberOne + '<font color="#FF0000">' + numbertwo + '</font></font>' + restOfText;
Thanks,
Don

The <font> tag was deprecated ages ago. This is really a layout
(HTML/CSS) question, impossible to answer as you've given no details
relating to how the page is set up. 'column' suggests a table, and you
can use CSS 'text-align' to right-justify data.

[Evertjan.]

Don wrote on 08 mrt 2005 in comp.lang.javascript:

var numberOne = numberOne.toString();
if(numberOne.length == 1)
numberOne = " "+numberOne;

function TwoPlacesAtLeast(x){
return ((x+'').length==1)?'&nbsp;'+x:''+x
}

sp1 = '<span style="font-family:courier;">'
sp2 = '</span><br>'

document.write(sp1+TwoPlacesAtLeast(1)+sp2);
document.write(sp1+TwoPlacesAtLeast(12)+sp2);
document.write(sp1+TwoPlacesAtLeast(3)+sp2);
document.write(sp1+TwoPlacesAtLeast(99)+sp2);

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Grant Wagner]

"Don" <[e-mail]> wrote in message
news:v4********************************@4ax.com...

With the following, I'm trying to display numberOne and numberTwo,
each as a two digit character
group, such as "nn". If numberOne or numberTwo is less than 10, "bn"
will be displayed (where "b"
is a space character). In other words, I always want the second digit
of each number to be in the
same column, so that the beginning of "restOfText" will start in the
same column for each record
produced by the following code.

I've tried several things, but can't seem to come up with the answer.
Any help would be
appreciated.
var numberOne = numberOne.toString();
if(numberOne.length == 1)
numberOne = " "+numberOne;

var numberTwo = numberTwo.toString();
if(numberTwo.length == 1)
numberTwo = " "+numberTwo;
var htmlString = '<font face="Arial" size="2" color="#0000FF">' +
numberOne + '<font
color="#FF0000">' + numbertwo + '</font></font>' + restOfText;
Thanks,
Don

If you're using a variable width font then a space isn't necessarily the
same width as a numerical digit character. Also, HTML turns multiple
whitespace into a single space and removes leaving whitespace. If you
want stuff to line up, use <pre></pre> and a fixed width font:

<script type="text/javascript">
function leadingPad(n, d)
{
if (n < (Math.pow(10, d - 1)))
{
return (new Array(d - String(n).length + 1)).join(' ') + n;
}
return n;
}

var numberOne = 1;
var numberTwo = 20;

var htmlString =
'<pre style="font-family:monospace;">' +
leadingPad(numberOne, 2) + '\n' +
leadingPad(numberTwo, 2) +
'</pre>';

document.write(htmlString);
</script>

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

[Don]

On Tue, 08 Mar 2005 19:43:01 GMT, "Grant Wagner" <gw*****@agricoreunited.com> wrote:

"Don" <[e-mail]> wrote in message
news:v4********************************@4ax.com.. .

With the following, I'm trying to display numberOne and numberTwo,
each as a two digit character
group, such as "nn". If numberOne or numberTwo is less than 10, "bn"
will be displayed (where "b"
is a space character). In other words, I always want the second digit
of each number to be in the
same column, so that the beginning of "restOfText" will start in the
same column for each record
produced by the following code.

I've tried several things, but can't seem to come up with the answer.
Any help would be
appreciated.
var numberOne = numberOne.toString();
if(numberOne.length == 1)
numberOne = " "+numberOne;

var numberTwo = numberTwo.toString();
if(numberTwo.length == 1)
numberTwo = " "+numberTwo;
var htmlString = '<font face="Arial" size="2" color="#0000FF">' +
numberOne + '<font
color="#FF0000">' + numbertwo + '</font></font>' + restOfText;
Thanks,
Don

If you're using a variable width font then a space isn't necessarily the
same width as a numerical digit character. Also, HTML turns multiple
whitespace into a single space and removes leaving whitespace. If you
want stuff to line up, use <pre></pre> and a fixed width font:

<script type="text/javascript">
function leadingPad(n, d)
{
if (n < (Math.pow(10, d - 1)))
{
return (new Array(d - String(n).length + 1)).join(' ') + n;
}
return n;
}

var numberOne = 1;
var numberTwo = 20;

var htmlString =
'<pre style="font-family:monospace;">' +
leadingPad(numberOne, 2) + '\n' +
leadingPad(numberTwo, 2) +
'</pre>';

document.write(htmlString);
</script>

Ok, given the following, how do I display "numberOne", "numberTwo", and "restOfText" each in
different colors and the entire thing on just one line? In other words, how do I change the
"inline" style to reflect those changes? Guess I've got a lot to learn about styles.

function leadingPad(n, d)
{
if (n < (Math.pow(10, d - 1)))
{
return (new Array(d - String(n).length + 1)).join(' ') + n;
}
return n;
}

var numberOne = 1;
var numberTwo = 10;
var restOfText = "Hello there!";

htmlString = '<pre style="font-family:monospace; color:blue; font-size:x-small">' +
leadingPad(numberOne, 2) + leadingPad(numberTwo, 2) + restOfText + '</pre>';
Thanks everyone for your help.
Don

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----

[RobG]

Don wrote:
[...]

Ok, given the following, how do I display "numberOne", "numberTwo", and "restOfText" each in
different colors and the entire thing on just one line? In other words, how do I change the
"inline" style to reflect those changes? Guess I've got a lot to learn about styles.

Learn about the <span> tag and CSS. A useful introduction is
here:

<URL:http://www.w3schools.com/css/default.asp>

Briefly, use a style sheet to define classes with the
characteristics that you want, then apply the classes using
<span> tags around text as required.

[...]
--
Rob

[RobG]

Don wrote:
[...]

<script type="text/javascript">
function leadingPad(n, d)
{
if (n < (Math.pow(10, d - 1)))
{
return (new Array(d - String(n).length + 1)).join(' ') + n;
}
return n;
}

If the intention is simply to put one space in front of single
digit numbers, then try:

function leadingPad(n) {
return ( n < 10 )? '&nbsp;' + n : n;
}

Or for numbers up to and including 999 that need one or two
spaces:

function leadingPad(n) {
return (n<10)? '&nbsp;&nbsp;'+n : (n<100)? '&nbsp;'+n : n;
}

Grant's routine will put a specified number of ' ' characters in
front of the digit, but they will likely be stripped out by the
HTML parser, so maybe use:

return (new Array(d - String(n).length+1)).join('&nbsp;')+n;

[...] Ok, given the following, how do I display "numberOne", "numberTwo", and "restOfText" each in
different colors and the entire thing on just one line? In other words, how do I change the
"inline" style to reflect those changes? Guess I've got a lot to learn about styles.
[...]

Define some classes:

<style type="text/css">
.style1, .style2
{
font-family: monospace;
color: blue;
font-size: x-small;
}
.style2
{
color: red;
}
</style>
htmlString = '<pre style="font-family:monospace; color:blue; font-size:x-small">' +
leadingPad(numberOne, 2) + leadingPad(numberTwo, 2) + restOfText + '</pre>';

Then apply them to your HTML:

htmlString = '<span class="style1">'
+ leadingPad(numberOne, 2)
+ '</span>'
+ '<span class="style2">'
+ leadingPad(numberTwo, 2)
+ '</span>'
+ restOfText;

For the sake of speed, you may consider using an array (this is
much faster where you have a lot of HTML to concatenate into
your string):

htmlString = [
'<span class="style1">',
leadingPad(numberOne, 2),
'</span>',
'<span class="style2">',
'leadingPad(numberTwo, 2),
'</span>',
restOfText // no comma after last element
];
....

document.write(htmlString.join(''));

or maybe:

elementReference.innerHTML = htmlString.join('');

There is a useful introduction to HTML and CSS here:

<URL:http://www.w3schools.com>

You seem to have used '\n' for line breaks, which will work in
some instances (e.g. textarea, alert) but you need '<br>' if you
want a line break in HTML.
--
Rob

[RobG]

RobG wrote:
[...]

For the sake of speed, you may consider using an array (this is
much faster where you have a lot of HTML to concatenate into
your string):

htmlString = [
'<span class="style1">',
leadingPad(numberOne, 2),
'</span>',
'<span class="style2">',
'leadingPad(numberTwo, 2),
Oops, a bit keen with quotes:

leadingPad(numberTwo, 2),
'</span>',
restOfText // no comma after last element
];

[...]
--
Rob

[Don]

On Tue, 08 Mar 2005 23:45:24 GMT, RobG <rg***@iinet.net.auau> wrote:

RobG wrote:
[...]

For the sake of speed, you may consider using an array (this is
much faster where you have a lot of HTML to concatenate into
your string):

htmlString = [
'<span class="style1">',
leadingPad(numberOne, 2),
'</span>',
'<span class="style2">',
'leadingPad(numberTwo, 2),

Oops, a bit keen with quotes:

leadingPad(numberTwo, 2),

'</span>',
restOfText // no comma after last element
];

[...]

Lots of good stuff for me to learn here! I think I've got the idea now. Thank you very much Rob
for your help. I appreciate it very much.

Regards,
Don

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----

[Dr John Stockton]

JRS: In article <v4********************************@4ax.com>, dated
Tue, 8 Mar 2005 11:55:54, seen in news:comp.lang.javascript, Don
<[e-mail]> posted :

With the following, I'm trying to display numberOne and numberTwo, each as a two
digit character
group, such as "nn". If numberOne or numberTwo is less than 10, "bn" will be
displayed (where "b"
is a space character).

function Pad(S, K) { S += '' // Inputs expected to be numeric.
K -= S.length ; while ( K-->0 ) S = '#' + S ; return S }

var htmlString =
'<font face="Arial" size="2" color="#0000FF">' + Pad(numberOne, 2) +
'<font color="#FF0000">' + Pad(numberTwo, 2) + '</font></font>' +
restOfText;
Since you want to pad at least two variables, a function is appropriate.
If it is absolutely certain that (for K=2) Pad will never ever be called
on a number outside 0..99, the >0 can be omitted. Parameter K can be
omitted and var K set by K = 2 - S.length ; for fixed width.

As written, Pad pads with a # character, for test. With a fixed pitch
font in <pre>, a space can be used; otherwise, you can use &nbsp; and
hope that it gives about the right width. In a rational world, all
characters which can be a part of a number, including separators, would
have the same width as each of the digits - that means that 0 1 2 3 4 5
6 7 8 9 . , + - a b c d e f A B C D E F x X space would all have the
same width as each other.

For perfect alignment, however, you could instead write into a right-
justified field.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[Ivan Marsh]

On Wed, 09 Mar 2005 14:54:21 +0000, Dr John Stockton wrote:

JRS: In article <v4********************************@4ax.com>, dated
Tue, 8 Mar 2005 11:55:54, seen in news:comp.lang.javascript, Don
<[e-mail]> posted :

With the following, I'm trying to display numberOne and numberTwo, each as a two
digit character
group, such as "nn". If numberOne or numberTwo is less than 10, "bn" will be
displayed (where "b"
is a space character).

<snip> As written, Pad pads with a # character, for test. With a fixed pitch font in <pre>, a space can be used; otherwise, you can use &nbsp; and
hope that it gives about the right width. In a rational world, all
characters which can be a part of a number, including separators, would
have the same width as each of the digits - that means that 0 1 2 3 4 5
6 7 8 9 . , + - a b c d e f A B C D E F x X space would all have the
same width as each other.

For perfect alignment, however, you could instead write into a right-
justified field.

....or put each digit of each number into a fixed-width cell of a
fixed-with table.

--
Life is short, but wide. -KV

[Don]

On Tue, 08 Mar 2005 11:55:54 -0700, Don <[e-mail]> wrote:

With the following, I'm trying to display numberOne and numberTwo, each as a two digit character
group, such as "nn". If numberOne or numberTwo is less than 10, "bn" will be displayed (where "b"
is a space character). In other words, I always want the second digit of each number to be in the
same column, so that the beginning of "restOfText" will start in the same column for each record
produced by the following code.

I've tried several things, but can't seem to come up with the answer. Any help would be
appreciated.
var numberOne = numberOne.toString();
if(numberOne.length == 1)
numberOne = " "+numberOne;

var numberTwo = numberTwo.toString();
if(numberTwo.length == 1)
numberTwo = " "+numberTwo;
var htmlString = '<font face="Arial" size="2" color="#0000FF">' + numberOne + '<font
color="#FF0000">' + numbertwo + '</font></font>' + restOfText;
Thanks,
Don

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----

Thanks everyone for your excellent help!

Regards,
Don

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----