Ask Your Question

How to create localization language-specific css?

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

piskvorky's avatar

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

Evgeny's avatar

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:

    width: 50px;

    width: 59px;

    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

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

Evgeny's avatar

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


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's avatar piskvorky  ( 2011-12-11 10:05:58 -0600 )edit

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

Evgeny's avatar Evgeny  ( 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's avatar piskvorky  ( 2011-12-11 12:56:51 -0600 )edit

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

Basel Shishani's avatar Basel 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


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

Seen: 1,015 times

Last updated: Dec 10 '11