CODEWITHSUNDEEP
asp.nethtmlasp.net-mvccsslocalization
Mathias F
Mathias F

Reputation: 15891

Localize images via css

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?

Upvotes: 2

Views: 1689

Answers (7)

doctororange
doctororange

Reputation: 11810

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

Upvotes: 0

Joe Sergeant
Joe Sergeant

Reputation: 141

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.

Upvotes: 0

Posto
Posto

Reputation: 7550

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; }

Upvotes: 0

dampkwab
dampkwab

Reputation: 668

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

Upvotes: 1

beggs
beggs

Reputation: 4195

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

Upvotes: 1

Ramesh Soni
Ramesh Soni

Reputation: 16077

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.

Upvotes: 4

User
User

Reputation: 30945

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.

Upvotes: 2

Related Questions