By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,550 Members | 2,757 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,550 IT Pros & Developers. It's quick & easy.

How to set the font of a TEXTAREA

P: n/a
What I'd like to do is to be able to set the font of a
textarea element to the same font that another element
is using (say, for example, an <INPUT type=text ...>
element, but if that's a no go, then a generic element's
font will do OK, too. What's the correct way to do
this, please (so that it will also work for IE 6)?

The motivation for this is that I have some text on the
screen and I want to insert a textarea element between
the text and its containing element. If I don't fiddle
with the font, the large courier font the textarea element
is using will really reduce the visible characters within
the textarea.
The example below shows really whacky behaviour
in setting the font size. On my IE6 on Win 2K, if
I bring up the page below the font if the textarea
seems tiny and mangled. If I comment out the
single javascript line, the textarea seems normal.
Any explanations?

Thanks,
Csaba Gabor
<html><head><title>Font size test</title>
<style type="text/css">
td { border: 1px solid #000000; font-size: 75%;}
</style></head>
<body>
<form><table><tr>
<td><input name=foo1 type=text style='font-size:75%;width:1in'
value='This is a test line that exceeds 1 inch'></td>
<td><textarea id=ta1 name=foo2 style='width:1in'>
This is a test line that exceeds 1 inch</textarea>
</td></tr></table></form>

<script type='text/javascript'>
document.getElementById('ta1').style.fontSize = "75%";
</script></body><html>
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"Csaba Gabor" <Cs***@z6.com> wrote:
What I'd like to do is to be able to set the font of a
textarea element to the same font that another element
is using (say, for example, an <INPUT type=text ...>
element, but if that's a no go, then a generic element's
font will do OK, too. What's the correct way to do
this, please (so that it will also work for IE 6)?

The motivation for this is that I have some text on the
screen and I want to insert a textarea element between
the text and its containing element. If I don't fiddle
with the font, the large courier font the textarea element
is using will really reduce the visible characters within
the textarea.
The example below shows really whacky behaviour
in setting the font size. On my IE6 on Win 2K, if
I bring up the page below the font if the textarea
seems tiny and mangled. If I comment out the
single javascript line, the textarea seems normal.
Any explanations?

<html><head><title>Font size test</title>
<style type="text/css">
td { border: 1px solid #000000; font-size: 75%;}
</style></head>
<body>
<form><table><tr>
<td><input name=foo1 type=text style='font-size:75%;width:1in'
value='This is a test line that exceeds 1 inch'></td>
Do you really want the size to be 75% of the size of the TD's font,
which is already 75% of the default font size?
<td><textarea id=ta1 name=foo2 style='width:1in'>
This is a test line that exceeds 1 inch</textarea>
</td></tr></table></form>

<script type='text/javascript'>
document.getElementById('ta1').style.fontSize = "75%";
</script></body><html>


What's wrong with

<style type="text/css">
input, textarea { font-size: 75%; width: 1in; }
textarea { width: 1in; }
</style>
....
<input name=foo1 type=text value='This is a test line that exceeds 1
inch'>
....
<textarea id=ta1 name=foo2>
This is a test line that exceeds 1 inch
</textarea>

?

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
Jul 20 '05 #2

P: n/a
My comments interspersed in two sections.

"Harlan Messinger" <hm*******************@comcast.net> wrote in message
news:vk********************************@4ax.com...
"Csaba Gabor" <Cs***@z6.com> wrote:
The example below shows really whacky behaviour
in setting the font size. On my IE6 on Win 2K, if
I bring up the page below the font if the textarea
seems tiny and mangled. If I comment out the
single javascript line, the textarea seems normal.
Any explanations?

<html><head><title>Font size test</title>
<style type="text/css">
td { border: 1px solid #000000; font-size: 75%;}
</style></head>
<body>
<form><table><tr>
<td><input name=foo1 type=text style='font-size:75%;width:1in'
value='This is a test line that exceeds 1 inch'></td>
Do you really want the size to be 75% of the size of the TD's font,
which is already 75% of the default font size?


The second part of my post was for understanding - is the specific
behaviour buggy or is it my understanding that is buggy? But to
address your question, the size that I want in my final application is
motivated by the following (which is where my real question in the
original post stems from): The text in the table has a certain size.
Now I wish to make part of the table editable, and I'm not going to
use contentEditable (which, besides being IE specific, has some other
issues I won't get into here).

Therefore, I'm going to surround the content to be edited with either
input/text elements or textarea elements, which I'd like to do in such a
fashion as to be minimally invasive to the rest of the table. That means
not changing the size of the table cells (much, if at all). I haven't
figured
out how to make this reasonable with multiline input/text elements, but
for single line input/text elements, I had to make the text size smaller to
get a similar fit. It's quite legible (for me) at View/Text Size/Medium.
(At this point, this is destined for a single user app).

For multiline TDs, I should use textarea (since I can't seem to get
input/text to work nicely). Unfortunately, the same (font-size)
mechanism that I used for the input/text element does not work here,
apparently because the font (courier) is just plain not suited for smaller
sizes (on my screen, anyway. On Opera it is at least tolerable).
Ultimately, the point is that the user should feel like they are editing
the original text in place (though minor appearance variations are fine).
<td><textarea id=ta1 name=foo2 style='width:1in'>
This is a test line that exceeds 1 inch</textarea>
</td></tr></table></form>

<script type='text/javascript'>
document.getElementById('ta1').style.fontSize = "75%";
</script></body><html>


What's wrong with

OK, you had a good idea here, especially with your above
remark about 75% of 75% so I've incorporated your suggestion
into my example, and I discuss it below.

<head><title>Font size test</title>
<style type="text/css">
input, textarea { font-size: 75%; width: 1in; }
td { border: 1px solid #000000; font-size: 75%;}
</style></head>
<body>
<form><table><tr>
<td><input id=ta1 name=foo1 type=text
value='This is a test line that exceeds 1 inch'></td>
<td><textarea id=ta2 name=foo2>
This is a test line that exceeds 1 inch</textarea>
</td></tr>
<tr><td colspan=2 align=left>This
is a test line that exceeds 1 inch</td></tr>
</table>
This is a test line that exceeds 1 inch<br>
<input name=foo3 type=text
value='This is a test line that exceeds 1 inch'>
</form>

First off, on Opera we are getting a legible 75% of 75%
for the input/text element in the table. On the textarea side,
we get better legibility than on my IE6 (but Opera seems to
have a bug of inserting a blank starting line), but still have
the issue that that font is just not right (for my purposes).

IE textarea: ouch. On the input/text and tables we see that
the text of the TD is smaller than the same external text, and
both the input/text's texts are about the same size as that of
the TD's text (on Opera, the size of the input/text element in
the TD is smaller). Finally, use of the
document.getElementById('ta1').style.fontSize = "75%";
does not seem to make a difference in the above page.

The conclusion is that while this gives us good comparisons,
it still leaves me with my original problem of getting something
other than that ugly small courier font into the textarea element.

Thanks for your comments,
Csaba Gabor

PS. In addition to the reason above for why I want to use another
element's font (similar appearance), I also prefer it because the
font has good chances of being acceptible to the user in terms of
character support (since they're already using it).

<style type="text/css">
input, textarea { font-size: 75%; width: 1in; }
textarea { width: 1in; }
</style>
...
<input name=foo1 type=text value='This is a test line that exceeds 1
inch'>
...
<textarea id=ta1 name=foo2>
This is a test line that exceeds 1 inch
</textarea>

?

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Jul 20 '05 #3

P: n/a
"Csaba Gabor" <Cs***@z6.com> wrote:
My comments interspersed in two sections.

"Harlan Messinger" <hm*******************@comcast.net> wrote in message
news:vk********************************@4ax.com.. .
"Csaba Gabor" <Cs***@z6.com> wrote:
>The example below shows really whacky behaviour
>in setting the font size. On my IE6 on Win 2K, if
>I bring up the page below the font if the textarea
>seems tiny and mangled. If I comment out the
>single javascript line, the textarea seems normal.
>Any explanations?
>
><html><head><title>Font size test</title>
><style type="text/css">
>td { border: 1px solid #000000; font-size: 75%;}
></style></head>
><body>
><form><table><tr>
><td><input name=foo1 type=text style='font-size:75%;width:1in'
>value='This is a test line that exceeds 1 inch'></td>


Do you really want the size to be 75% of the size of the TD's font,
which is already 75% of the default font size?


The second part of my post was for understanding - is the specific
behaviour buggy or is it my understanding that is buggy? But to
address your question, the size that I want in my final application is
motivated by the following (which is where my real question in the
original post stems from): The text in the table has a certain size.
Now I wish to make part of the table editable, and I'm not going to
use contentEditable (which, besides being IE specific, has some other
issues I won't get into here).

Therefore, I'm going to surround the content to be edited with either
input/text elements or textarea elements, which I'd like to do in such a
fashion as to be minimally invasive to the rest of the table. That means
not changing the size of the table cells (much, if at all). I haven't
figured
out how to make this reasonable with multiline input/text elements, but
for single line input/text elements, I had to make the text size smaller to
get a similar fit. It's quite legible (for me) at View/Text Size/Medium.
(At this point, this is destined for a single user app).

For multiline TDs, I should use textarea (since I can't seem to get
input/text to work nicely). Unfortunately, the same (font-size)
mechanism that I used for the input/text element does not work here,
apparently because the font (courier) is just plain not suited for smaller
sizes (on my screen, anyway. On Opera it is at least tolerable).


Then why are you using Courier? Use the same font as the rest of the
page. Use your styles.

td, input, textarea { font-family: sans-serif; }

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
Jul 20 '05 #4

P: n/a

"Harlan Messinger" <hm*******************@comcast.net> wrote in message
news:86********************************@4ax.com...
"Csaba Gabor" <Cs***@z6.com> wrote:

"Harlan Messinger" <hm*******************@comcast.net> wrote in message
news:vk********************************@4ax.com.. .
"Csaba Gabor" <Cs***@z6.com> wrote:
....For multiline TDs, I should use textarea (since I can't seem to get
input/text to work nicely). Unfortunately, the same (font-size)
mechanism that I used for the input/text element does not work here,
apparently because the font (courier) is just plain not suited for smallersizes (on my screen, anyway. On Opera it is at least tolerable).
Then why are you using Courier? Use the same font as the rest of the
page. Use your styles.


Yes, but how to do that? Properly, that is. The example below assumes
a certain style in my page (indeed, my page might have several -
sans serif for input/text elements, serif for normal text).
I'd been using Courier because that's what the default was, and I
hadn't changed anything yet.
td, input, textarea { font-family: sans-serif; }


Yes, I am currently doing this type of solution (I said Times to get it
similar
to the table's text), but it strikes me as not very nice. Somewhere in the
docs
or specs for stylesheets, I think I read that this is a last resort type of
thing
(for the reason that I mentioned earlier in the thread:) since the font the
system selects may be something which will materially alter the appearance
of the table.
What I'd really like is to be able to get the font face from a given
element,
but as I've mentioned I'm not clear (read I don't know) on how to do that.
IE6 doesn't know getComputedStyle, for example.

Csaba Gabor
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.