Ask Your Question
1

How to create localization language-specific css?

asked 2011-12-10 19:26:25 -0600

piskvorky gravatar image

updated 2011-12-10 22:29:19 -0600

Evgeny gravatar image

The navigation icons (tags, people, badges) combine sprites + text.

When the text gets sufficiently long, the sprite regions overlap, and the last one continues on to show white space. I think this is a bug. It happens with german words, which can get very long.

My fix was to set a fixed width, in skins/default/media/style/style.less:

#navTags{
    .sprites(-50px,-5px);
    width: 50px;
}

#navUsers{
    .sprites(-125px,-5px);
    width: 59px;
}

#navBadges{
    .sprites(-210px,-5px);
    width: 47px;
}

But I don't know much CSS... I guess there must be a better way to clip the visible sprite region, and fall back to the background color outside of it. Ideas?

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
1

answered 2011-12-10 22:27:47 -0600

Evgeny gravatar image

updated 2011-12-10 23:18:33 -0600

Now we have language code included as class on the html body element, so for languages other than english just add another class qualifier to the style source code.

For example:

body.lang-de #navBadges {
       width:   60px;
}

We should really have these fixes in the default skin.

edit flag offensive delete link more

Comments

but that's basically the same solution... isn't there a way to only show the image background with fixed width, and if the text is longer, leave transparent background? that would be more flexible.

piskvorky gravatar imagepiskvorky ( 2011-12-11 10:05:58 -0600 )edit

Ah, ok, we should just restructure the sprites - probably should make them laid out vertically.

Evgeny gravatar imageEvgeny ( 2011-12-11 11:40:11 -0600 )edit

yes, that's also a solution :) to make the horizontal spacing between individual sprites larger, or even place them vertically

piskvorky gravatar imagepiskvorky ( 2011-12-11 12:56:51 -0600 )edit
1

And don't forget about RTL, text should be able to fit on either side.

Basel Shishani gravatar imageBasel Shishani ( 2012-01-27 06:12:47 -0600 )edit

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Question Tools

Stats

Asked: 2011-12-10 19:26:25 -0600

Seen: 710 times

Last updated: Dec 10 '11