Multi-language Web Site and Background Images

When one wants to replace text with an image, she uses some image replacement technique (I personally prefer Mike Rundle’s, but it’s really just a matter of taste). However, at the multi-language web site it could be a real trouble—you will have to make different background images for each language anyway, but let’s see if we can make multi-language CSS at least a little bit easier to manage. With the launch day knocking on a door, it’s not uncommon to make a mistake in language-specific CSS rules. With server-side parsing, you don’t have to worry about multiple rules. Parsing and gzipping of CSS files with PHP (or ASP) is nothing new, but with web.burza, we went a step further.

Hey! Server-side parsing is new to me!

It’s okay, we are going from the beginning : )

To force parsing of CSS file, we save it as PHP/ASP file, for example: instead of style.css, we save it as style.php or style.asp, depending whether we host on the Apache with PHP or on the Windows server with ASP. We call CSS in HTML as usual:

<link rel="stylesheet" type="text/css" href="style.php" /><!-- or  style.asp -->

Browsers don’t recognize just any file as CSS, so we must ‘tell’ browser that this is CSS file. We send the header information by placing following lines at the top of the server-side parsed CSS file:

<?php header ("Content-type: text/css"); ?>

or for ASP:

<% Response.ContentType = "text/css" %>

This should do just fine for the starters. You want more? Google it.

I already learned about server-side parsing, tell me about multi-language trick

Since the CSS file is parsed, we can also send queries either by GET or POST method. If those words are nothing familiar to you, let’s just say—we can make some conditions when requesting CSS file. If we call our CSS like:

<link rel="stylesheet" type="text/css" href="style.php?language=en" /><!-- or  style.asp?language=en -->

we have sent the query string. Next, we modify CSS file so it ‘understands’ this query, by adding following line:

<?php
    header ("Content-type: text/css"); 
    $language = (isset($_GET['language']) && $_GET['language'] == 'en') ? 'en' : 'other_language';
?>

or for ASP:

<%
    Response.ContentType = "text/css"
    If Request.QueryString("language") = "en" Then
        language = "en"
    Else
        language = "other_language"
    End if
%>

Now that we set our language variable, we can write it anywhere in the CSS file, for example:

<?php
    header ("Content-type: text/css"); 
    $language = (isset($_GET['language']) && $_GET['language'] == 'en') ? 'en' : 'other_language';
?>
/* CSS rules */
body { background-image: url(text_in_an_image_<? echo $language; ?>.gif) }

or for ASP:

<%
    Response.ContentType = "text/css"
    If Request.QueryString("language") = "en" Then
        language = "en"
    Else
        language = "other_language"
    End if
%>
/* CSS rules */
body { background-image: url(text_in_an_image_<% Response.Write(language) %>.gif) }

See how it works at web.burza’s English and Croatian CSS files.

This trick is pretty simple and it makes your life easier if you’re just coder. If you also do graphics—well, I’m sorry… you’ll have to make images for each language manually : ).

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?