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 : ).