RE: Text sizing

Sam
Thu, 06 Jul 2006 02:15:07 -0000

I wrote a test scrip which I''ve included below.  I was curious how
Firefox
and IE handled default text sizes and the user changing the text size.

Here''s the beef:

Default font sizes: Firefox 18px, IE 16pt.  This amounts to about 2px of
difference in the defaults  No percentage, e.g., body {font-size:76%} will
ever make IE and Firefox identical only closer.

Setting the css body {font-size: 12px} or {font-size: 12pt} will cause IE to
disable the browser''s "View Text Size" control.  I guess this
is why
percentages are preferred over px/pt in CSS-only solutions.  (Crippling the
view text-size reduces the accessibility for persons with poor vision, or
unusual monitor resolutions.).

Some good news:

Setting body {font-size:12px} (or any fixed size) will set both IE and
Firefox identical display sizes.  To avoid diminishing the accessibility, a
user control should be provided on the page to increase or decrease the
font-size for IE.  This is the path I am planning to take since there are no
other effective solutions.

I''m trying to decide if a slider or some other UI mechanism e.g. plus
(+)
and minus(-) controls might be better or more obvious.

Sam

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
Untitled Document

body {
	font-family:Arial, Helvetica, sans-serif;
	}

<script type="text/javascript"
src="javascripts/prototype.js">


getStyle(''body'', ''font-size'')=





$(''getstyle'').innerHTML =
Element.getStyle(''body'', ''font-size'');

var sTable = ''\n<table id="mytable" border="0"
cellspacing="0"
cellpadding="0" style="margin-left:50px;">'';
for (var i=8; i < 20; i++) {
sTable += ''\n <td align="right"
style="font-size:'' +
i.toString() + ''px">'' + i.toString() +  ''px
[ ] '' +
i.toString() + '' '';
	sTable += ''<td align="right"
style="font-size:'' + i.toString() +
''pt">'' + i.toString() +  ''pt
[ ] '' + i.toString() +
'' '';
}
$(''mydiv'').innerHTML = sTable +
''\n '';