Localize images via css

Question

The site I work on has a lot of images that contain text. This includes buttons and navigation.

To support localization I include 2 css-files. One that has non language specific properties (font, colour ...) and one that has language specific properties. There is only 1 language specific file served to the user depending on his choosen language.

The language specific file (/content/en/Site.css , /content/de/Site.css ..) has information about background images

div.topHeader  p#searchHeader
{ 
  background: url(/images/de/headers/search_lo.gif) no-repeat scroll center center;
}

This works smoothly but I will have a lot of duplicate code. In english the css will be:

div.topHeader  p#searchHeader
{ 
  background: url(/images/en/headers/search_lo.gif) no-repeat scroll center center;
}

I will have a couple of languages thats why it would realy pay out to optimize this. Is there a better way to do this?

Answer 1

You can try consolidating all external graphics references in separate CSS and referencing it separately in your code.

If you mean form paths in your CSS dynamically, well, you could write a handler to process this particular request for your CSS, read it on the server-side from the file, replacing all language marker parts as required (document.Replace("{lang}", "de")) and then serve the modified CSS back. But it would require some work.

Answer 2

Just extract out only language specific part from the main CSS to a new CSS for each language and include that CSS in your page dynamically. In this way do don't have to manage lots of CSS classes.

Answer 3

Rather than having different CSS files for each language you could one file, site.css.aspx or similar and process the file, output the paths based on the language supplied POST/GET variables or in the accept headers.

See similar question here

Answer 4

For a start you could use background-image instead of background to save repeating the repeat, positioning, scrolling and colour information.

To really optimise it I would simply dynamically serve the css based on the user's localisation. eg: through a php script or something. You could just do something like background-image: url(/images/<?=$lang ?>/headers/search_lo.gif).

Answer 5

not sure but u can have something like this ,

div.topHeader  p#searchHeader   { 
 background: url(/images/headers/search_lo__en.gif) no-repeat scroll center center; }


div.topHeader  p#searchHeader   { 
 background: url(/images/headers/search_lo__de.gif) no-repeat scroll center center; }

where last word after __(dauble underscore) will added dynamically

as

div.topHeader  p#searchHeader   { 
 background: url(/images/headers/search_lo__{%lang%}.gif) no-repeat scroll center center; }

Answer 6

An easy solution would be to apply a class or ID to the body tag in the HTML based on their locale. Then in the stylesheet you could do something like:

div.topHeader  p#searchHeader
{
   background: no-repeat scroll center center;
}

body.en div.topHeader p#searchHeader
{
   background-image: url(/images/en/headers/search_lo.gif);
}

body.de div.topHeader p#searchHeader
{
   background-image: url(/images/de/headers/search_lo.gif);
}

There's still going to be a bit of duplication, but you've reduced the amount of CSS you have to write for each localisation.

Answer 7

You can create dynamic CSS with PHP or similar. Here's a PHP example:

index.html:

<link rel="stylesheet" type="text/css" media="screen" href="style.php">

style.php:

  <?php
    header("Content-type: text/css");
    $lang = $_SESSION['however_you_are_detecting_lang'];
  ?>
  body {
   background-image:url(images/<?=$lang?>/image.png);
  }

that will fetch images/en/image.png or images/de/image.png