473,699 Members | 2,746 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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><ti tle>Font size test</title>
<style type="text/css">
td { border: 1px solid #000000; font-size: 75%;}
</style></head>
<body>
<form><table><t r>
<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:1i n'>
This is a test line that exceeds 1 inch</textarea>
</td></tr></table></form>

<script type='text/javascript'>
document.getEle mentById('ta1') .style.fontSize = "75%";
</script></body><html>
Jul 20 '05 #1
4 16711
"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><t itle>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><textare a id=ta1 name=foo2 style='width:1i n'>
This is a test line that exceeds 1 inch</textarea>
</td></tr></table></form>

<script type='text/javascript'>
document.getEl ementById('ta1' ).style.fontSiz e = "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.c om...
"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><t itle>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><textare a id=ta1 name=foo2 style='width:1i n'>
This is a test line that exceeds 1 inch</textarea>
</td></tr></table></form>

<script type='text/javascript'>
document.getEl ementById('ta1' ).style.fontSiz e = "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>Fo nt 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><t r>
<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.getEle mentById('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><t itle>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.c om...
"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 getComputedStyl e, 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
700
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 font-sizes - optional support for embedded pictures
7
19479
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
23722
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 this is normal behaviour, but it looks poor, and I don't want our website to look that way (to out of the box browsers). How would I set textarea's 'like' input, or how would I determine (Javascript?) what's being used by an input field, to set...
14
2655
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 (which is a work in progress) as an example. If I don't put the font attributes in the <body> <p> and <td> tags, the font will not appear the way I want (when I work in FrontPage, anyway). It doesn't seem to be enough to put the font attributes in...
4
1669
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, 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...
9
4524
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 inside of <INPUTtags. My question is, is there a way in HTML or StyleSheet language to say something like this: <h4>Here are some values - some are hardcoded, and others are input feilds:</h4> <FONT face="same as user's input font preference"...
30
4531
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 work: ;;; p {
18
24974
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, that IE7 does not seem to offer any way to control the font size of a text input element.
8
2678
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 be able to receive forminformation and store that in a database and later produce it on screen on the client (just plain HTML).
0
8704
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8623
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9187
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9053
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8894
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6540
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5879
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4636
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2360
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.