Cfrgtkky

I am creating multilingual site and I have realized that some languages such as French are quite wordy which breaks my design which was done using English copy. So I have been trying to use the :lang css directive mainly to reduce the font-size across the board for French landing page. But the results are quite counter-intuitive. A percentage reduction by a small amount results in a big reduction in actual size.

Perhaps my understanding is incorrect. Here is an example code that explains this phenomenon

:lang(fr)

{

  font-size:90%;

}

h1 {

  font-size:3em;

}

<h1>

This is my heading

</h1>

<h1 lang="fr">

This is my very very long verbose heading in French

</h1>

As you can see, my French headline became very small with only 10% reduction in font-size.

'Perhaps my understanding is incorrect." yes I think so. You expecting font size for French will show 90% of 3em which you defined for h1 { font-size:3em;}.

But keep your mind when you set something like that font-size:90% means font size will inherit 90% from immediate parent where we already set the font size. From your given code you not set the font size for <h1 lang="fr"> container (in this case it is 'body').

If we not set the font-size for body browser by default set 16px (in chrome but it can vary browser to browser). So pseudo-class :lang(fr) selector is higher priority than only tag selector h1 and it is inheriting from it's container body tag means "14.4px".

My suggestion is to overcome this situation apply the em unit. em unit inherit from top most parent. See following approach, it may be can give you a way.

body {

  font-size: 16px;

}

h1 { 

  font-size:3em; /* means 16*3 = 48px; */

}

h1:lang(fr) {

  font-size:2.7em; /* (48*90)/100 = 43.2px/16px = 2.7em */

}

<h1>Actual Font Size</h1>

<h1 lang="fr">French Font Size</h1>