Custom graphics with overlaid text? 1

[tomouse]

I have a website which I recently made bilingual. All translatable text is held in resource files. For graphics that contain translatable text (such as buttons and page titles), we have a version for each language and path to each language graphic is held in the resource file as well. This all works nicely.

But now I've been told that since the site will be expanding rapidly in the coming months, they want to eliminate the work of constantly creating alternate graphics for each new button or page heading. Instead I've been asked to find a way to replace all these graphics with a plain graphic and actual text (a label I guess) superimposed over the top.

My immediate reaction was that the difficult aspect of this would be to get a solution that would look *exactly* the same in all browsers. That's why we use graphics right? Anyway, I was just wondering what you other, more experienced people think about this? Has anyone tried this before? Do you think it is achievable? Or should I go back to them and suggest we try another approach? Just asking for an opinion or two really. Thanks, Tom

 

[jmeckley]

Why not use CSS to style the site instead of graphics? this way the layout is the same and you can localize the text.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[tomouse]

Hey Jason, thanks for this. I guess using CSS is the way I was thinking it might be done. But I have had a few issues where I'm developing/testing in IE8 and get everything looking nice, then I check it in IE7 and things look wonky or out of alignment. And then there's Firefox, Chrome, etc.

But are you saying I could do away with the graphics entirely? As you can see, I'm really just starting to learn about CSS. But we have graphical bars which have graduated shading and rounded corners. Sorry to display my complete ignorance, but is that possible using CSS and no graphics? Or is the idea that I have a blank graphic and use CSS to position the graphic with a label over the top of it? (This is what I had been envisioning originally, but was concerned about getting the positioning perfect for all browsers)

 

[jmeckley]

yes, I think you could replace most of your graphics with CSS. I'm not a CSS jedi either. I rely on jquery UI for my styling needs. what I jquery UI can produce is very impressive. drop shawdows, modals, rounded corners and browser agnostic.

There are some graphics used by jquery UI. they use sprites to decrease the number of images required.

That would be another benefit to CSS or graphics; decreased load times.

check out jquery theme roller as an example of what's possible with css and javascript.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[tomouse]

Wooo, this is great, thanks!