Home/ Questions/Q 1114863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T03:04:15+00:00

Answerers: How does one literally detect the user’s font scale, so that it may

  • 0

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{' . "\n" . 'height:' . $divheight; . "\n" . '}'
  //end styles
?>

Code comments are GREATLY appreciated! Thank you!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)
    • 0