First time here? Check out the FAQ!
1

How to create localization language-specific css?

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?

piskvorky's avatar
350
piskvorky
asked 2011-12-10 19:26:25 -0500
Evgeny's avatar
13.2k
Evgeny
updated 2011-12-10 22:29:19 -0500
edit flag offensive 0 remove flag close merge delete

Comments

add a comment see more comments

1 Answer

1

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.

Evgeny's avatar
13.2k
Evgeny
answered 2011-12-10 22:27:47 -0500, updated 2011-12-10 23:18:33 -0500
edit flag offensive 0 remove flag delete link

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

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 -0500) edit
add a comment see more comments