Scalable Font Sizes in Internet Explorer

Wednesday, April 7, 2004

A few weeks ago I doscovered that font sizes specified in the stylesheet in points (ie, “font-size: 10pt;”) will not scale in Internet Explorer. (IE 5.5 and 6.0 for Windows are the only ones I’ve tested.) Meaning: If I format all of my paragraph text to be 7pts tall, going up to the View > Text Size menu and selecting Largest will not affect the size of the text displayed in the browser. It should. And it does in recent versions of Safari, Firefox, Mozilla, and Netscape.

Fonts specified in pixels (ie, “font-size: 12px;”) will also not scale.

Percentages (“font-size: 120%;”) and em-widths (“font-size: 1.2em;”) will scale, but they calculate the font size based on the size fo the parent — not ideal because someone using my stylesheet might, for example, nest several unordered lists. And I don’t want the fonts growing or shrinking to absurb levels if the nests go three or four levels deep.

The only way to specify a font size that is not dependant on the parent and that will change when the user selects View > Text Size in IE is to use the text labels: xx-small, x-small, small, medium, large, x-large, and xx-large.

Here’s what they look like:

xx-large

x-large

large

medium

small

x-small

xx-small

“Medium” is about as large as any text on this page, meaning that if I use this method, I am limited to five usable sizes. It seems like a lot, but it’s not enough to get the level of precision I want with my font size choices. Especially for my job, where we need to strike a careful balance between packing lots of stuff on the screen and making everything readable. I do not consider “xx-small” above to be readable enough under normal browser conditions.

So what to do? The visual designers I’m working with (self included) would prefer to have more control over their designs. They always do. But the folks who make sure we remain accessable want us to make sure that the View > Text Size menu will work properly in IE.

Any suggestions? I really am quite puzzled about what to do.

And let me say once more that the more I use Internet Explorer for Windows the more frustrated I get with it. If we could develop for only Netscape/Mozilla our productivity over here would probably double.

Comments

DXImageTransform in IE

Wednesday, March 31, 2004

(Note: The tricks detailed on this page only work with Internet Explorer 4.0 and later. If you use another browser, please congratulate yourself for making the better choice.)

If it’s okay to make a page that functions well in all browsers but that offers a bit of extra razzamatazz for users with browsers with excellent CSS handling, then why not use some proprietary Microsoft Internet Explorer styles to and an extra bit of spunk to a page when it renders in IE? If you know your clients or users will most likely use IE to view your work, maybe you can raise some eyebrows and a get a little extra “hey, wow!” attention flowing your way.

Enter DXImageTransform. Or rather: Remember DXImageTransform? Microsoft included these tools with IE4.0, released back in go-go 1998. Designed as a way for designers to spice up their design, they instead quickly fell into the realm of “obnoxious web tricks for newbies” and have been scarcely heard from since.

(Check out the MSDN library page about this.)

But! It turns out that new versions of Internet Explorer still support DXImageTransform, something I figured out while researching whether a form button could use a background image.

Check it out:

Here’s your basic boring submit button:

You could style this with standard CSS styles, but the most you could do would be change the colors and sizes of the different parts. You could make the text red and the bevelled borders dark blue and maybe the button panel itself bright orange. That’d be ugly. But you couldn’t, say, shade the button from top to bottom with a nice gradient.

With DXImageTransform (and Internet Explorer), you can. Take a look:

Or:

(You could use this in conjunction with Safari’s “drop-shadow” attribute.)

You can also make things blurry:

Or wig ‘em out:

Of course, you can see how DXImageTransform got a bad wrap…

But. When used subtley and properly, it can make a nice accent for web pages you know will be used primary with Internet Explorer (like many corporate intranet sites or business tools). Especially for form elements that are otherwise difficult to format.

(DXImageTransform can be applied to most HTML elements.)

Take a look at Microsofts DXImageTransform pages for the full details.

Woot!

Comments

The Resurrection

Sunday, March 28, 2004

A going away surprise. More...

So Auscillate has been down for the past two weeks. Spaceship.com, my excellent host, moved their computers while I was away in Europe and I didn’t get the chance to start setting up my domain service again until a week after I returned. And then it turned out that my registrar had been bought or something by another company, so I had to wait for them to get back to me with the info I needed to be able to access my account. And then this and then that and then, well, here we are. Tada. Jack Miller over at Spaceship has been incredibly helpful through this, so I must send his way a huge public thanks. Thanks!

So.

I’m back from Europe (obviously). That’s really the only Josh-related news of note. Some photos will come online shortly, including some fabulous monkey shots. At this point, everyone I see on a regular basis who cares has heard the highlights, so I won’t go over them again right now. AMODA had a Digital Showcase the Tuesday after I returned, including an awesome set by Richard Divine. And I utterly ignored SXSW, out of exhaustion and just a bit of boredom about the whole affair. To be honest, Austin doesn’t have any dearth of live music during the other 51 weeks of the year, and I’d just as much prefer to avoid all of the hassles that come along with SXSW. If I didn’t live here, I’m sure I’d love it, but, well. You know. Anyway, I got my music fest bug out at the CMJ Music Marathon last October. Their line-up was much more to my tastes. And then exactly a week ago, Saturday night, I played a set at Trey Smith’s place, a.k.a. Rancho Relaxo. I was pretty sick that night, unfortunately, so my punk-rock ass laptop-rocked out with a hot chocolate and a cookie. Instead of the usual the usual beer and fig newton filled with concentrated loathing. A couple people who listened closely to the set said some really good things, though, which made me happy.

Anyway. The title makes reference to how I spent my Saturday evening: Curiousity finally got the better of me so I checked out The Passion of the Christ. Not being especially religious, I don’t know the full story of the Passion very well. In fact, most of what I did know before this film I learned at the Easter service at my grandparents’ church in Pennsylvania last spring. So. I did enjoy learning a little more about the story of the Christ. Which leads me to my main criticism: With all of the flaying and cross-bearing and extended scenes of rather uncomfortable brutality, not much of his story could actually be told. It’s one very tight snapshot that contains a great deal of sensory detail, but very little actual story.

On the other hand, I felt it tried to give to the audience the experience of the death of the Christ as if to say, You think you know the horrors of what happened to this man because of some lines of text in a book, but here’s what it really means to punish someone in this way. And to try to deliver such an experience takes time and money — and filmmakers do not have an unlimited supply of either. In this way, the film reminded my of Irreversible (which, coincidentally enough, also starred Monica Bellucci). Irreversible tried to unpack the horrifying reality of the word “rape” that most of us only know so casually. Both of these films also included scenes of such realistic and brutal violence that I had a hard time keeping my eyes on the screen.

Yeah. My two cents. I’d recommend it.

Comments

Eurotrip 2004: East Berlin

Sunday, March 7, 2004

So I’m in Berlin, now, and have been for about twenty-four hours. I arrived at Tegel airport yesterday afternoon.

I haven’t done much so far. Yesterday I fell asleep a couple of hours after getting in, waking up this morning at about 5AM. It’s been snowing intermittenly since my arrival, and I got myself cleaned up early this morning and wandered around it, finding a park with a lake to photograph and some cafe’s to order a breakfast of rolls and tea from in stammering, butchered German.

I’ve been puttering around for the past couple of hours while Brenna waits for her turn in the shower. Then we’re off to a museum she wants to visit to check out the Gates of Babylon. And probably get some food.

About her place: She lives in an old Soviet apartment building in the former East Berlin. It’s been remodeled and is actually quite comfortable. She normally has three flatmates, but she’s moving out this week so the new residents, a couple of French guys who speak no English, are staying in the living room.

East Berlin doesn’t look that bad, though there are plenty of stark and blocky apartment complexes littering the area.

No photos as my computer won’t yet connect to the internet.

That is all.

Comments

Blizzard 2004

Thursday, March 4, 2004

Christian con Snowman.

Friday evening, February 13th, I spent working on my computer until about midnight. When I opened the door to go down to KVRX, holy crap… Snow everywhere.

Campus was full of kids freaking out at the sight, throwing snowballs, streaking near the Tower, etc.

Below is a picture of the street in front of my apartment and above is Christian at KVRX, holding a small snowman.

Enfield Road.

Comments

Wolfram Automata + Flash MX

Tuesday, March 2, 2004

Flashtastic.

I’ve been writing simple Macromedia Flash MX programs exploring some cellular automata from Stephen Wolfram’s A New Kind of Science.

Anyway, these are three of the more interesting results.

To see my inspiration, check out page 157 of NKS online — Wolfram has the whole tome up for free, now.

Comments

Germany

Wednesday, February 25, 2004

Would you believe I once knew all of the German province names and their capitols? Austrian, also. Nerd.

Whelp, I’m leaving the continent in about ten days. Going to Berlin to stay with Brenna for a little over a week (with a couple days bumming around in Prague). Should be awesome.

Anyway, I’m leaving Friday evening, March 5th, and will return Sunday night, March 14th.

If anyone has any suggestions for things to check out while I’m over there, let me know. Kurt has already given me the heads-up on a couple of good places to go get a drink and listen to music. The only other person I can think of who’s intimately familiar with the area would be Hana, who grew up in Prague. Otherwise, I’m probably the most familiar with Germany of people I see regularly these days, having been over on about a half-dozen different occasions over the years (though only once to Berlin, and that was back in, like, 1993). Anyway, Brenna will of course be on-hand for advice.

That last trip to Berlin, by the way, was a short exchange program between LBJ High (my school) and La Grange High here in Texas and the Kaiserin Augusta Schule in Köln. A bunch of us went over with our teacher, Frau Hastay, and travelled around the country for a week, went to school with the Kölners for a week, and then travelled around for another week.

Anyway, one afternoon in Berlin in a patio area at a bar, some of us were playing cards — hearts, probably — and someone accused Zane of cheating (hiding cards). Zane flipped out, jumped on the table, and started ripping his clothes off until he was down to his underwear, loudly proving his innocence. I stilll remember that pretty well. Good times.

Very well, then.

Comments

Orderly Form Layout

Tuesday, February 24, 2004

Making a form layout in two columns — with the names of the fields on the left and the input fields on the right in nice columns — has been a small challenge. Not extremely difficult, but also non-obvious. So I thought I’d share my solution here. Maybe if you come across this problem I can save you a couple of minutes.

Also: If you use a browser that doesn’t display my CSS the way I think it should, you can (please) let me know. The educational street should run both ways…

The Result

First, here’s the final result. The CSS info is included in the header (so just view the source).

And a screenshot:

This has been tested and displays well in IE 5.5/Win, Firefox 0.82/Win, and Safari 1.2/Mac. Slight layout problems occur in IE 5.0/Mac, but they don’t affect the usability of the form.

Notes

Most developers would just use a table to handle this sort of layout, which would probably be just fine. (And you could argue that this is tabular data so there wouldn’t be a semantic problem.) Since I’m trying to fully explore content-style seperation techniques, I thought I’d challenge myself to figure out a way to do this using just the CSS box model.

So. First I chose to use headers to label the input fields because HTML doesn’t yet have a specific “label” tag. Since both headers and paragraphs are block elements, for layout purposes they’re interchangable. (The only different being semantic, obviously, and that browsers automatically add style to headers to make them distinct.)

I wrapped each header and input field pair in a div tag, figuring I could force the width of the input headers (h3) and then use the display: inline; attribute with the div to force the input field to come right after the fixed-width header. Seemed like a good idea.

(Zane asked me this weekend why I thought CSS was so counter-intuitive sometimes. I don’t have a good answer, but I have to admit after getting deep into the standard that it’s an absolute mess: it doesn’t allow designers to easily achieve what should be very simple layout goals (like this one — and just wait until I get to write about my latest headache). And then no two browsers support it in the same way, making it that much more useless if you are trying to design something more than a standard webpage template — unless you plan to spend hours on end ironing out all of the issues.)

Back to the issue at hand…

This didn’t work. One of my Windows browsers did a fine job laying out the code while the other seemed to just ignore my attempt to fix the width of the h4. Some online hunting taught me that I needed to, instead, use the float attribute inside the input header and input p tags to float those blocks left and right (respectively). (Note that float doesn’t affect the alignment of the text inside the block.) Then I needed to use clear: both; to force both boxes to align against the top of the div that encased them (instead of stacking). (I’m sure this is pretty confusing unless you’re looking at the source code.)

Getting to know how to properly use float and clear, by the way, is an important first step to understanding how to acheive complex visual design with CSS.

The only other problem I encountered was that the headers were vertically a few pixels off from the input fields, a problem remedied simply by placing vertical-align: top; attribute in the h3 tag.

And there you go (hopefully).

Anyway. Let me know if you found this useful and if I should continue doing these little write-ups. Thanks!

Comments