Hi all
This weekend I've been working on a way of getting complete control
over font sizes without IE's text-resize shrinking text beyond all
readable sizes.
What I discovered was:
px - perfect control using px's to define font sizes, however
prevents IE/Win from text resizing.
em - almost perfect control using em, although when text-resizing in
IE/Win to small and extra small can cause unreadibility.
keywords - less than perfect control, however IE/Win never text-
resizes smaller than 9px.
So while playing around with various options, I discovered a way that
we might be able to fix IE/Win's text-resizing problems while still
having 'almost' perfect control over font sizes.
My solution at presents includes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Resize</title>
<style type="text/css" media="screen">
html {
/* prevents IE shrinking font-size beyond readable size */
font: normal small/1.5 "Lucida Grande", Lucida, Verdana, sans-serif;
}
</style>
<script type="text/javascript">
var fontSize = "0.95em"
function fontResize() {
if (!document.getElementsByTagName) return false;
var bodyElement = document.getElementsByTagName("body")[0];
bodyElement.style.fontSize = fontSize;
}
window.onload = fontResize;
</script>
</head>
<body>
<h3>H3 - Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
pellentesque interdum augue. Aenean a ante. Pellentesque ut nulla in
dui lacinia ultricies. Nam nibh metus, venenatis nec, eleifend non,
feugiat non, nibh. Maecenas commodo fermentum magna. Duis tincidunt
viverra sem. Donec id orci.</p>
</body>
</html>
I understand the solution involves using javascript to achieve a
solution, however when the document is viewed by browsers that do not
support the DOM, it simply reverts back the 'small' keyword, which is
only a fraction larger than the font-size we're defining in the
javascript. So understandably, you'd select the closest size keyword
to the default font-size you're allocating in the javascript.
I believe the solution fixes the IE/Win text resizing issue, while
providing control over our default font size.
I'd be interested in hearing anyones results / bugs / opinions about
this.
Cheers
Lee Powell
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
