473,241 Members | 1,533 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 software developers and data experts.

How to set the font of a TEXTAREA

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
4 16629
"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
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
"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

"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Nuke van Dyke | last post by:
Hi, I'm searching for an advanced TextArea GUI Component. Should be written in Swing. Possible open source!! It should handle - stylings like underline, bold, italic, colors - different...
7
by: Fabian Neumann | last post by:
Hi! I got a problem with font-family inheritance. Let's say I have CSS definitions like: p { font:normal 10pt Verdana; } strong { font:normal 14pt inherit;
4
by: Chris Sharman | last post by:
I haven't specified fonts, leaving the user to have their chosen font. However, different tags render in different default fonts: text, input, & textarea all different from one another. I guess...
14
by: Viken Karaguesian | last post by:
Hello all, It stinks being a newbie! One thing that I'm not sure about with CSS is: where is the "proper" place to put font attibutes? This has me a little confused. Take the below style sheet...
4
by: Csaba Gabor | last post by:
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,...
9
by: MadingS | last post by:
Is there an HTML (or CSS) way to say "use the user's INPUT font, whatever that might be."? Most browsers have the ability for the user to pick his or her own preference for what font to use...
30
by: Takehiko Abe | last post by:
I have a <pelement with <ttinside: ;;; <p>A paragraph contains <tt>tt element</tt>.</p> I would like to set the font-size of the TT to the same as the containing <p>. This does not seem to...
18
by: Diogenes | last post by:
Hi All; I, like others, have been frustrated with designing forms that look and flow the same in both IE and Firefox. They simply did not scale the same. I have discovered, to my chagrin,...
8
by: Erwin Moller | last post by:
Hi group, I could use a bit of guidance on the following matter. I am starting a new project now and must make some decisions regarding encoding. Environment: PHP4.3, Postgres7.4.3 I must...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.