ansaurus

Question

How do I set up an if/or condition, such that my design changes based on the user's browser's font size?

Answer 1

+2 A:

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)

sheeks06 2010-09-14 02:17:09

Thank you, sheeks06. I greatly appreciate the criticism/feedback. I've changed px to em where appropriate. If you know, please include an answer to the question: how do I detect the user-selected/browser-set/device-set font size?

Fohsap 2010-09-14 02:33:33

Do you mean how do you detect the font-size?

sheeks06 2010-09-14 02:54:01

Yes. How do you detect the BROWSER's font scale? I'm trying to create code that accommodates font-only scaling and not just 'browser zooming'. Ctrl+mwheelUp is not very usable, at all. I always want to make my websites more accessible. It's one of my main focuses. I'd really appreciate an answer as to how one might actually pick up the font scale the user has selected. :)

Fohsap 2010-09-14 07:27:35

What are you going to use that for? If your going to use em or ex as a css unit, your layout will be will always be relative to the font-size. Also, have only 1 font-size with a fixed unit declared in your css (prefered if declare to the body). the others will use em or ex. This concept is called liquid design. look it up. http://www.maxdesign.com.au/articles/css-layouts/three-liquid/

sheeks06 2010-09-14 08:21:43

A lack of creativity doesn't change the validity or content of the question, or the need for a precise answer. Here's one of perhaps as many as a billion different applications: there is a list of 30 short div's stacked in a page that uses pagination. For every increase of two font sizes, remove 1 div. At the very least, you will have 3 div's. The user can still use the pagination features. They can quickly scroll the page, using only the home and end keys to see all content. The dynamic browsing experience, as intended: fun, consisting of very few keystrokes.

Fohsap 2010-09-14 11:56:13

Not to mention, it's an instant indicator that the viewer is a low-vision user. And because I am always trying to make the browsing experience as personal as possible--trying to help the viewer/reader out; basically, kissing my customer's butter--, it would be a huge advantage just to know. To know who is using, what they need, why they need what they need, etc. And overall, the more usable, the better.

Fohsap 2010-09-14 12:02:14

I'm not referring to the application.. I'm saying what are you going to do with the font-size (as a value. ex. 12 pt)? Are you going to use it in a computation? If so, you can do it but not directly. 1em = current font size, right? Assign this unit to an HTML element with texts inside. Then, get the height of the element using javascipt. You'll get an APPROX. font-size in px.

sheeks06 2010-09-15 01:48:50

Yes, I've been thinking the same thing, sheeks06. That seems to be the best generic solution. Thank you.

Fohsap 2010-09-15 02:33:46

And yes, computation. Thank you. This is very helpful.

Fohsap 2010-09-15 02:35:12

It's going to be a lot more complicated than you think though. Because users can still change font-size even when the page is already rendered without firing any javascript event(might). My suggestion is approach this problem using pure CSS rather than involving javascript...

sheeks06 2010-09-15 02:46:22

I was thinking of using jQuery and CSS or ajax and CSS.

Fohsap 2010-09-15 16:27:01

Ok. B) what ever makes you happy :)

sheeks06 2010-09-16 01:20:30

Answer 2

+1 A:

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.

Lee 2010-09-14 02:23:37

That's great info, Lee. I'll try to adjust according to your specifications. What I'm trying to create, though, is not something that forces the font size to go up. I'm trying to increase div size based on the user-selected/browser-set font size. I hope you understand?

Fohsap 2010-09-14 02:29:46

The first example I provided shows what you're looking for. I edited my answer to improve clarity.

Lee 2010-09-14 02:40:49

Follow-up question: I would still like to constrain the number of words and possibly even the number of <div>'s that are printed in accordance with the browser's font size settings. If there's any way to pick up the font size the user has set, please include it in your answer. Thank you very much for the information. It's extremely useful for this case.

Fohsap 2010-09-14 02:49:37

There's no way that I'm aware of to get the actual font-size that the user has set. But if you have a div, whose height is set to `1em`, then you use javascript to get the height of that div, then you'll have an pixel amount that is, in some way, proportional to the font-size (don't know if that will be useful to you or not though). Of course, if you're just looking for a way to respect the user's default font settings -- the key is to specify your font-sizes using `em`s, rather than px - if you do this everywhere, then all your page's text will be sized relative to the user's defaults.

Lee 2010-09-14 23:51:07

@Fohsap - After reading your comments on @sheeks06's post above, I'm hesitant to chime in, lest I be called uncreative... but consider this: If you have "30 short divs stacked in a page", size those divs in css using `em` units (as @sheeks06 and I have suggested). When the page loads, have some javascript that sums the height of all the divs. Based on the total height, just hide some number of divs. This *is* the strategy of [Progressive Enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement). It *does* accommodate "font-only scaling" (like ctl+mouse_wheel). It works. Try it.

Lee 2010-09-15 00:06:03

Good point. I shouldn't have said that. Anyway, I think that your answer is very creative. I'll try it. Thank you.

Fohsap 2010-09-15 02:34:45

ansaurus

tags:

views:

answers:

How do I set up an if/or condition, such that my design changes based on the user's browser's font size?

related questions