可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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!
回答1:
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"].
回答2:
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>
回答3:
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
回答4:
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.
回答5:
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>
回答6:
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 {
}
