Pseudo class - Reducing font by %

HTML & CSS
1

Hi, just wondering, whilst making a multilingual site, can i reduce font globally via css depending on language?

For example, Russian can be a nightmare, due to its character length, in menus and titles…in my html,

   <div id="page" lang="ru">

…then in the css ive changed each required element individually…

:lang(ru).cattit h1, .cattit h2 {
	font-size: 2em;
}

…can i do it by percent, i.e all font-size reduced to 80% or similar with the the :lang class?

2

Have you tried it?

:lang(ru).cattit h1, .cattit h2 {
	font-size: 2em;
}

You need to make sure you do the :lang(ru) with .cattit h2{} as well. You are only doing that for the h1, as it is now.

3

Hi Ryan, sorry the incorrect class…it was just an example…I’m wondering if I can apply a global reduction ( by percent or set reduction) on the font size stipluated in the initial class, rather than applying another list of site wide classes per each language.

4

What about something like this?

<html lang="it">

</html>

CSS:

html:lang(it) { 
   font-size: 80%;
}

or even this:

html[lang="ru"] {
    font-size: 80%;
}

As long as all your font sizes are set in relative units, everything will scale proportionally. Just beware of container measurements etc.

5

I would have suggested something similar and there is a strong case for using rems these days as you can simply scale the html element and reduce/enlarge the whole page in one fell swoop.

barney0o0 did state that the site was a ‘multilingual’ site so I assume there are different languages in various divs which will need to be controlled individually.

1 Like
6

Thanks, thats the ticket…the only exception to the rule would’ve have been to the main body text, so ill add an additional css condition to reset it after the reduction…

Thanks very much

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.