CSS Font Size EM

[Jerry62712]

Is it possible to use units when making a CSS style with font size? I'm looking to use "em" so the fonts will be sizable by the user with CTRL- or CTRL+ or the menu choices.

I understand that "x-small" type of units can be used and the result is a sizable font, but I'd like to use "em" or any available proportional unit of measure.

[Peter Cowling]

Never seen em font specification work in flex css, which is pseudo not literal css; never heard of altering font size with ctrl - or ctrl +.

Keyboard events can be worked with, and you could develop keyboard font size alteration via this approach - just toggle px size up and down accordingly. But something that is baked-in flex <=3, well never say never but I'll venture doubtful :)

[Jerry62712]

Thanks for the quick reply. Firefox uses CNTL+ or CNTL- as shortcut keys for View | Zoom | Zoom in or Zoom out. I may have to go with the listener and change sizes, but I'm hoping to let it all be automatic.

My understanding is "em" won't work and the Flex help specifically says it won't. I had an email from Chris Howell that SSB Bart Group said to use it. As a web developer I've always used proportional units for my web pages to pass 508 rules.

A fellow developer here used "x-small, small, medium, large, x-large" literals and she said her app is automatically adjustable. If it works for me I'll post it here.

===-===-===-===-===-===-===-===-===-===
Edit:
My fellow developer just informed me that she didn't make the sized change. Darn. What was suggested to her was the different style sheets method.

As an alternative, and to be more generic, it would be nice to have a class that traveled the whole application and changed the fontSize up or down if it were a label (to start with) and perhaps down the road everything that could have text in it.

[Peter Cowling]

Firefox uses CNTL+ or CNTL- as shortcut keys for View | Zoom | Zoom in or Zoom out. I may have to go with the listener and change sizes, but I'm hoping to let it all be automatic.


With you on that, but will any solution break with other browsers? And does that register with a swf, well I would be interested to hear that is the case.

A fellow developer here used "x-small, small, medium, large, x-large" literals and she said her app is automatically adjustable. If it works for me I'll post it here.

I think that sort of granularity is more manageable, but things like labels will need extending if they are to play well with adjustable font sizes. Quite a bit of work there potentially. Flex 4 will play better, though.

Be interested to see what comes out of your experiments.

[wvxvw]

I think you may make StyleManager listen to keyboard events and thus cause revalidation of all styles, thus all font sizes in those styles. Although, in complicated layout there may be unpredictable results... Another thought is that §508 has really little to do with Flash / Flex, it was written having in mind HTML pages and trying to comply with it in Flex app makes your life very difficult while doesn't make the app any better...

And, speaking of em... it isn't really applicable in Flex, unless you make lots of efforts to fit Flex to it... This is because it is not necessary for parent control to define any style for text, neither children controls may always be aware of the styles of their parents.

[Jerry62712]

If we are going to use Flex for web pages, and what other purpose is there, then we have to meet web standards. Those that decide these things (above my pay grade) have ruled that pages must be valid (vis-a-vis 508) or they will not be accepted.

I suspect if Flex wants to become a serious player in the web market they will have to move in that direction, but that is also above my pay grade.

I'm not familiar with StyleManager as it was excluded from the class I took (probably for time reasons). I just bought a couple of books on Flex so I may find it.

[Peter Cowling]

If we are going to use Flex for web pages, and what other purpose is there, then we have to meet web standards. Those that decide these things (above my pay grade) have ruled that pages must be valid (vis-a-vis 508) or they will not be accepted.

The Queen in the UK reserves a Royal 'we' too - that is where we means me ;) Outside of .gov organisation it is not compulsory to meet 508 standards.


I suspect if Flex wants to become a serious player in the web market they will have to move in that direction, but that is also above my pay grade.

If flex wants to be a serious player in the .gov web market it may need to plug some gaps not discussed in this thread so far, because you can provide alternate formats with flex, just not how you were looking to do it. Note that to pass a 508 style audit (*1), you simply need to provide large size font as an option - one other large size, as an option.

(*1) Which is to say a compliance audit. Compliance auditors are not rewarded, in general, for creative thinking. They are paid to put ticks in boxes, and you cannot get two ticks in one box i.e. exceeding all standards but one is not as good as meeting all standards.

[Jerry62712]

I work for the government, but I'd have to follow the rules for any organization. When I say "we", I mean me and my team for this project. Not large (only three others), but more than "I". <g>

After I get the font size fixed, we will have to work on high contrast which is also part of 508. As is (in our case) JAWS.

I got the first state looking pretty good. I just change the panels (there are three) and the component panel. But the second (and last) state is more of a problem.

Just off the top of your head, what (VBox, etc) will pass on (inherit) the style to the objects on the page? "Panel" does work, but I'm not having much luck with VBox, Canvas or HBox.

[wvxvw]

If you want to find out the dependencies in styles you need to look into the sources, where they have [Style] meta. The inheritance is defined there. The StyleManager then reads that meta and through the complicated logistics decides for each component which style to use (it's own, it's parent's, it's grand-parent's etc).
You can also override those styles when you extend the classes defining styles, this is one way to do it. Another way - the StyleManager has it's implementation, which means that, technically, you can write another stylemanager that will recognize "em" units for example and handle them as you see proper.

[Jerry62712]

Thanks for the info. Guess I got to find out about the stylemanager. I take it you like it?

[wvxvw]

I'm not a big fan of Flex Framework as a whole, and, if I had time to do it, I would definitely rewrite the StyleManager :) However, I never had a task, which would make that change a necessity :)