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?

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.

13.2k

Evgeny

answered 13 years ago, updated 13 years ago

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 (13 years ago)

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

Evgeny (13 years ago)

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

piskvorky (13 years ago)

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

Basel Shishani (13 years ago)

see more comments

How to create localization language-specific css? savecancel

Comments

1 Answer

Comments

How to create localization language-specific css?