font size in px

[ez4ne12c]

what does font size in px mean?
the characters are all different sizes so if i have a 100px wide box does that mean i can fit 10 characters of font-size 10px across the box?
im confused
ez:confused:

[mouse]

Height of characters in pixels

[cg9com]

Specifying a pixel size for a font makes it non resizable in IE. :(

[Mhtml]

Pixel stands for picture element.

[ez4ne12c]

Dont lament cg9com size WILL be user adjustable, via outerHTML..

users have all kinds of screen resolution..

i guess what i want to do is make a variable amount of text fit in an area by adjusting the font-size, does anyone know a way to do this??

i guess i need to do this with px rather tham ems or pt but i need to know the either how much space the text is gonna take up at a certain size ..Or ??

I thought of using an iframe.. but that just frames the same basic problem...

i guess i could count the number of characters and assume they are all [whatever] px wide and hazard a guess..
ez

[brothercake]

You can't calculate a box size from knowing the font size, because a character of x pixels is not necessarily x pixels high or wide - it depends on the font. Beetle explained it very well in this thread (http://www.codingforums.com/showthread.php?s=&threadid=13420)

Please don't use pixels - they don't resize in IE, and javascript text-resizing is (imo) a gimmick which does not serve genuine accessibility - what about users who have javascript disabled? That's 10% of all your visitors. Browsers already have a mechanism for changing the view > text-size; we should respect that semantic and use a unit which is resizeable with it.

Try "em" it will give you absolute sizing and positioning, but is still resizeable.

[ez4ne12c]

hmmmmm ok i take that peice of advice and try to use ems..
you are right the js resize and font selection is a bit gimmicky..

Will this sort of approach work?

i make a text area and specify the width and height,
the browser will respect the width but of the font is too large it will trash the height and do its own thing and put all the text down by just extending the height to make it fit...
so i
create a first guess as a hidden object
detect the resultant textarea height <--- can this be done???
adjust the font size using ems
until the text fits in the box..
then unhide it... presto
then the user can resize, his/her screen or font if they wish..

ez

[beetle]

I use small as my base font size, and use percentages from there. However, if you don't use an XHTML doctype, IE will render 'small' as 'medium' :rolleyes:

[brothercake]

Originally posted by ez4ne12c
Will this sort of approach work? ... [stuff] ...
It all seems a bit excessive to me; is it really such a big deal that the textarea is not a predictable height?

Well maybe it is; I'd let go of that if it were me, but then I've never encountered the problem you're talking about - I've seen textareas not respect the set width, because there are long unbreakable lines in it, but I've never seen one not respect the height.

Can you show us a page where this happens?

[brothercake]

Originally posted by beetle
However, if you don't use an XHTML doctype, IE will render 'small' as 'medium' :rolleyes:
Interesting ... it's the doctype that makes a difference. I wondered about that ...

Dang DOCTYPE sniffing ... does my head in

[cg9com]

thanks for the info. beetle, so much IE stuff to remember. :(

[beetle]

I know :cool:

Lord help us when IE 7 comes out ;)

[liorean]

See this: <http://www.meyerweb.com/eric/articles/webrev/199908a.html> for an explanation of why this mess appeared.

There's another difference though: IE does in some cases default to small instead of medium - in other words it can throw the font sizes in both directions depending on install and doctype in combination.

[beetle]

Interesting.

Why does he mention that these 'absolute' font-sizes won't resize, even with browser controls? Is that for like IE4? I've never had trouble using the browser to resize text that is sized with 'small' or whatever.

[ez4ne12c]

Hi :)
Here is a clunky example of IE disrespect for my text area height
...........
<html>

<table align=left>
<tr><td><img src='up_menu.jpg'></img><img src='space.gif'></img></td></tr>
<tr><td><img src='up_read.jpg'></img><img src='space.gif'></img></td></tr>
<tr><td><img src='up_back.jpg'></img><img src='space.gif'></img></td></tr>
<tr><td><img src='up_foreward.jpg'></img><img src='space.gif'></img></td></tr>
</table>


<table align=center>
<td><img src='up_foreward.jpg' border=1 width=420 height=300></img></td>
</table>
<center>
<SPAN ID="copytext" STYLE="height:120;width:500; background-color: blue; text-align: left; font-size: 10em; font-family: Comic Sans MS, sans-serif,times;'>">
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
Dad said, "Today is Thursday. I have made, hamburgers, and hot chips!"
</SPAN>
</center>
</html>


I guess i could just let the browser do this but i really would like to exercise some control because

User will have different screen resolution settings....

- i want to make sure all the text gets onto the page at the highest available font size.... for that screen resolution..
i am already resizing the images and buttons based on the screen resolution...

- some of my users have very poor fine motor skill and dragging a small browser slider is at the very limit of their skills, it is much easier to click and point than drag ...if you have poor fine or gross motor skills (and some dont know you can press the arrow or page down keys)

Other users with more pronounced intellectual disability may not even realise that there is more text to see ...

i need to know the size so i can accomodate users with reduced vision by making the font as big as i can .. or splitting the text over 2 pages if the font gets too small

so im really keen for all the text to get on a screen or to know the size

I would like to do this for even the default font, say comic sans MS and if the users want to change stuff then they can but it should at least work for the default font...

Thats kind of my justification for wanting to do this..
ez :)

late edit ... hmmmm i didnt know about overflow: hidden in the textarea style.. oops

[brothercake]

That's not a textarea - I thought you meant <textarea>. Every browser will expand an element if there's too much content, unless you take control of the overflow property.

So firstly - you have no unit on your height definition - it should be "120px"; then you change the SPAN for DIV you can use overflow:scroll on that.

[ez4ne12c]

Thanks i will try that
i am also looking into currentStyle to see if i can get it to report the rendered status of the text..
ez

[beetle]

currentStyle should do it.

Often in x-browser environments, I'll do this

obj.readStyle = obj.currentStyle || obj.style;

And then just use obj.readStyle for style-reading.

[liorean]

Well, sometimes you have to use runtimeStyle instead of currentStyle in IE to get what you want. You can't get everything, either. Mozilla uses W3C equivalents for it, see DOM2 CSS 2.2.1. Override and computed style sheet (http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-OverrideAndComputed-h3) (these aren't complete, either). I don't think Opera 7 has any other interface to styles than style, and I would assume that is the case with Safari/Konqueror as well, unless they use the DOM method.

[beetle]

Ya, I even made this page (http://www.peterbailey.net/dhtml/styles.htm) a while back to help some folks understand runtimeStyle. However, in IE, currentStyle will always read all style properties. runtimeStyle just provides a 2nd writable style object that overrides the regular style object.

[liorean]

Beetle - currentStyle sometimes displays the style value even when a runtimeStyle value exists. I've not seen any reason as to why.

[beetle]

Likewise, I've never seen currentStyle mis-report anything. But, I hardly ever use runtimeStyle so that's not saying much.