16

So i have read a few suggestions with the css language tag, but it seems like everything requires placing the language in the tag in advanced. I am not able to change the html tags around the korean language, it has the same h1 tag as the english. It is because it is a translated version of the same website.

I want to have a different font and font size for the korean version than the english. Can i do this by just knowing the language? I found some other questions dealing with the unicode range that used @font-face { } , for one, I cant figure out what unicode range Korean is, i have tried looking at all the documentation but i just dont comprehend how unicode ranges are calculated and written. Also, i was hoping there was an option like, 

h1{
unicode-range: korean;
font-size: 10px;
}

h1{
unicode-range: english;
font-size 20px;
}

Can this be done?

Thanks!

user-2147482637
  • 2,115
  • 8
  • 35
  • 56
  • possible duplicate of [Assigining different font-size per each font in one font-family](http://stackoverflow.com/questions/10153403/assigining-different-font-size-per-each-font-in-one-font-family) – Jukka K. Korpela Mar 07 '13 at 09:33
  • There are various questions that deal with the same basic topic, see also e.g. http://stackoverflow.com/questions/535616/can-css-choose-a-different-default-font-and-size-depending-on-language – Jukka K. Korpela Mar 07 '13 at 09:34
  • my question is different, considering the answer to that was find one font that works on all languages... korean and english are very different styles and design wise requires specific fonts – user-2147482637 Mar 07 '13 at 09:39
  • the second link is actually what i had seen and am referencing in my comment, i wanted to know if there was a way to do it based on a heading tag as opposed to a font-face and using the font family – user-2147482637 Mar 07 '13 at 09:41
  • There is a way to do it, as pointed in my answer. The way your website switches languages, it assignes an attribute to the `html` tag. – Sunyatasattva Mar 07 '13 at 09:42

6 Answers6

19

In your case the lang attribute is set on the html tag, so you could style all the elements you need based on that using the rules:

html:lang(en) h1{
    font-size: 20px;
}

html:lang(ko) h1{
    font-size: 10px;
}

Be careful, though, the the :lang pseudo-class is supported only in IE8+. Should you need support in IE7+, your best bet is going for the syntax of this type: a[lang="en"].

Sunyatasattva
  • 5,619
  • 3
  • 27
  • 37
  • so your saying that because the language is korean the html is automatically given a html:lang(ko) tag? – user-2147482637 Mar 07 '13 at 09:45
  • That is how your website handles language switching. I tried myself using *developer tools* to add those rules and they work. You can see inspecting your website that the `` tag (i.e. the main wrapper of your code) is being added the attribute `lang=en-US` or `lang=ko-KR`. – Sunyatasattva Mar 07 '13 at 09:47
6

You could use the CSS :lang pseudo class if you set the lang attribute in your HTML to alter the style. For example see demo or the following code:

CSS

:lang(en) {
    font-size:20px;
}

:lang(fr) {
    font-size:10px;
}

HTML

<p lang="en">Lorem</p>
<p lang="fr">Lorem</p>
andyb
  • 43,435
  • 12
  • 121
  • 150
  • the website is written in english, it then has a translated version which is exactly the same, except the words are translated to korean. if i wrap the original in a lang attribute, the korean translation will have the same lang attribute, so i wont be able to reference it – user-2147482637 Mar 07 '13 at 09:31
  • The question states that modifying the HTML markup is not possible. – James Donnelly Mar 07 '13 at 09:31
  • it is using wpml from wordpress, www.sarahleejs.com is the actual website if it helps make sense of what i am talking about – user-2147482637 Mar 07 '13 at 09:32
  • Yes it helps, since you can see that the `lang` attribute on the `` element is altered. So we can use this approach. – andyb Mar 07 '13 at 09:58
  • @JamesDonnelly but `lang` changes on the `` element are automatic with the site in question so this approach will still work. – andyb Mar 07 '13 at 09:58
2

This might be helpful: http://billposer.org/Linguistics/Computation/UnicodeRanges.html

You're looking for Hangul which is "The Korean alphabet, also known as Hangul,[nb 1] or Chosongul"

Regards

Ivan Pidov
  • 66
  • 1
  • 6
1

If you're using some dynamic language as server side of your website, you can simply do a dynamic CSS loading based on the Locale.

E.g. you have, in css folder, the following:

style.css        // this is the default
style_en_US.css
style_ko_KR.css

So you can have a separation of global settings from locale-specific ones and can load the required style dynamically with ease.

If you have a static HTML page instead, you can have JavaScript to load the CSS dynamically or you can use the

:lang

pseudo-class as pointed by others as well.

Whatever solution you choose, remember to keep an eye on browser-compatibility.

NOTE: Often it is a better solution to have the user explicitly select his/her preferred locale instead of automatically setting one based on the client's system information.

Powerslave
  • 1,408
  • 15
  • 16
0

Change the style sheet on language select

<body onload="set_style_from_cookie()">

//style sheet
<link rel="stylesheet" type="text/css" title="korean"
    href="http://example.com/css/korean.css">
<link rel="alternate stylesheet" type="text/css" title="english"
    href="http://example.com/css/english.css">

//form to select language using button
<form>
<input type="submit"
  onclick="switch_style('korean');return false;"
  name="theme" value="korean Language" id="korean">
<input type="submit"
  onclick="switch_style('english');return false;"
  name="theme" value="english language" id="english">
</form>

//javascript
<script>
// *** TO BE CUSTOMISED ***

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;

// *** END OF CUSTOMISABLE SECTION ***

function switch_style ( css_title )
{

  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration );
  }
}
function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
{

    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                       24 * lifespan_in_days +
                       "; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{

    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                        '(^|;)[\s]*' +
                        cookie_name +
                        '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}
</script>
Nishant Kumar Verma
  • 424
  • 7
  • 18
0

you could use something similar to:

h1[lang=en] {
  font-size: 10px;
}

h1[lang=kr] {
  font-size: 14px;
}

or if you would like to only specify lang="" once, instead of on every element, you could do

#content[lang=en] h1 {

}

#content[lang=en] p {

}

#content[lang=kr] h1 {

}

#content[lang=kr] p {

}
bizzehdee
  • 20,289
  • 11
  • 46
  • 76