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";>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript" src="javascripts/prototype.js"></script>
</head>
<body id='body'>
<div>getStyle('body', 'font-size')= <span id='getstyle'></span></div>
<div id='mydiv'></div>
<script type="text/javascript">
$('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 <tr><td align="right" style="font-size:' +
i.toString() + 'px">' + i.toString() + 'px [</td><td align="left">] ' +
i.toString() + '</td>';
sTable += '<td align="right" style="font-size:' + i.toString() +
'pt">' + i.toString() + 'pt [</td><td align="left">] ' + i.toString() +
'</td></tr>';
}
$('mydiv').innerHTML = sTable + '\n</table>';
</script>
</body>
</html>
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
