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> 4  16646 
"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.
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.
"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.
"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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
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...
|
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;
|
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...
|
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...
|
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,...
|
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...
|
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...
|
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,...
|
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...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
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,...
|
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...
|
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...
|
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...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
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...
|
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...
| |
