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!
Don't use fixed css units like px and pt. Use em or ex.
em 1em is equal to the current font size. 2em means 2 times the size of the current font.
E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em'
is a very useful unit in CSS, since it can adapt automatically to the font that the
reader uses
ex one ex is the x-height of a font (x-height is usually about half the font-size)
use units of em rather than px. em is relative to the current font size, so to do what you're trying to do, just change your div to something like this:
<div class="dwarfer" style="height: 1.2em;line-height:1.2em;">Whoa?</div>
No javascript required. That div will always be just tall enough to hold one line of text -- when the font gets bigger, the div will get taller to accommodate it, and when the font gets smaller the div will get smaller.
I think that's what you're looking for.
A little additional information about the em unit:
You can use em pretty much anywhere that you would use px. That includes the font-size rule. So:
<div style="font-size: 2em;">Twice as big</div>
The text contained in that div would be twice as big as the text of its parent.