Answerers: How does one literally detect the user's font scale, so that it may be used as a variable?
I am trying to create some if/else statements based on the user's font scaling (not browser zooming), to extend the usability of my sites.
The two given answers are workarounds for a single case (the scenario described). The scenario I initially presented was not the best selection on my part. Still, it is usable, and it's the easiest-to-understand scenario I could come up with on the fly.
"If the font size is changed the value of the offsetWidth/Height properties of elements that are either sized in relation to their text contents or CSS sized with font size related units (em, ex, etc.) will change."
I am trying to figure a way to base my layout/css on font size, as set by the user in his or her browser settings. For example, in Chrome, if a user has set his or her primary font size to 24--
Chrome: "Wrench">"Options">"Under the Hood">"Change Font and Language Settings">"Fonts and Encoding">Serif Font>"Change">Font Size="24".
--
How can I pick up the event? Working with an example..., let's say I have some DIV's with a set height, 60px:
<div class="dwarfer" style="height: 60px;">Whoa?</div>
Default font size is 9 pt. If the user sets his or her font size to 24 pt (not very high for someone who is visually impaired), ctrl+'mousewheeling down' to the minimum font size may not cause the text to reveal. So, it's best to adjust the height by a variable:
$divheight = 5px/1em
If you know what the event is or how to find it, please find the event. Then, please create an example in PHP that uses $divheight to adjust the height based on the user-selected browser font size.
The closest solution I have found for detecting font changes is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; » charset=utf-8">
<title>Font Resizer Demo</title>
<script type="text/javascript" src=" » textresizedetector.js"></script>
</head>
<body>
<h1>Resize me, now!</h1>
</body>
</html>
AND
<script type="text/javascript" » src="textresizedetector.js"></script>
<script type="text/javascript">
// <![CDATA[
/* id of element to check for and insert test SPAN into */
TextResizeDetector.TARGET_ELEMENT_ID = 'header';
/* function to call once TextResizeDetector was initialized */
TextResizeDetector.USER_INIT_FUNC = init;
// ]]>
</script>
As seen and tutorialized at http://www.alistapart.com/articles/fontresizing/.
Even using this code, I am having trouble incorporating $divheight directly into my CSS file:
/* CSS */
<?php
//variables
$divheight = 5px/1em
//end variables
//styles
echo '.dwarfer{' . "
" . 'height:' . $divheight; . "
" . '}'
//end styles
?>
Code comments are GREATLY appreciated! Thank you!
