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/

Reply via email to