Использование CSS-файла для локализации сайта - PullRequest
Новая
       21

Использование CSS-файла для локализации сайта

8 голосов
/ 22 июля 2010

Я создаю сайт с ASP.net MVC 2.0, который использует два разных языка (английский и персидский). Я хочу иметь два разных макета для этих языков: английский имеет слева направо, а персидский - справа налево.

Что мне пришло в голову, так это то, что если у меня могут быть два разных файла css, например, когда вы делаете это с помощью локализации строк или изображений, то вы должны знать, как это сделать!

Любые другие предложения о том, как это сделать, будут полезны.

Ответы [ 3 ]

9 голосов
/ 23 июля 2010

Вы можете прочитать о:

На ваших страницах:

  • каждое изображение с текстом должно быть переведено (изображение и alt); каждое изображение с направленностью должно быть обращено (например, стрелка)
  • старайтесь избегать именования классов, например class="left", если вы не хотите, чтобы в будущем у вас были головные боли Сверху, снизу, до или после все в порядке, но не влево / вправо (правка: start и end теперь используются в CSS3, чтобы избежать этой точной проблемы ltr и rtl. Может быть лучше, чем *-before и *-after уже используется для псевдо с двоеточиями).
  • вам нужно будет проверить каждую инструкцию CSS о text-align, background-position, float, clear и, очевидно, left и right с помощью position: absolute/relative;. Также должны быть рассмотрены новые инструкции CSS3 (анимация и т. Д.).
  • разные шрифты нуждаются в разном размере шрифта (хотя эта проблема в основном касается азиатских шрифтов)
  • как и для любого другого поддерживаемого языка, многие биты текста в шаблонах должны быть переведены.

Как отмечено в ссылках выше, используется атрибут HTML dir="rtl". Вам также понадобится класс (для body или класс, содержащий div, который будет действовать как гигантский переключатель для ваших нужд проектирования. Например, 

.en .yourclass { background: url(images/en/bg.jpg) } 
.ar .yourclass { background: url(images/ar/bg.jpg) }

Селектор атрибутов делает то же самое, поскольку IE8 включен. 

:lang(ar) .yourclass { background: url(images/ar/bg.jpg) }
or
[lang|="ar"] .yourclass { background: url(images/ar/bg.jpg) }
0 голосов
/ 23 июля 2010

Не уверен, что вы ищете именно это, но я сделал это несколько лет назад в VBScript. Не идеально, но у меня это работает:

Разберитесь с языком: 

<%
Dim sLanguage
sLanguage = Request.QueryString("lang")

Dim userLocale
userLocale=Request.ServerVariables("HTTP_ACCEPT_LANGUAGE")

Dim sDomain
sDomain = Request.ServerVariables("HTTP_HOST")

Dim languages
languages = Split(userLocale, ",", -1)


...

Установить таблицу стилей ... 

<% select case MasterLanguage
    case "PORTUGUESE"%>
        <style media="screen" type="text/css">@import "/Includes/css/a_formatting.css";</style>
        <style media="screen" type="text/css">@import "/includes/langs/br/languageSpecific.css";</style>
        <link type="text/css" media="print" rel="stylesheet" href="/Includes/css/print.css" />
<%
case "SIMPCHINESE"
%>
        <style media="screen" type="text/css">@import "/Includes/css/a_formatting_zh-cn.css";</style>
        <style media="screen" type="text/css">@import "/includes/langs/zh-cn/languageSpecific.css";</style>
        <link type="text/css" media="print" rel="stylesheet" href="/Includes/css/print_zh-cn.css" />
<%

Я могу опубликовать больше фрагментов, если это будет полезно.

0 голосов
/ 22 июля 2010

Это код, который вы можете использовать, чтобы получить Locale на стороне клиента. Как только вы определили локаль, вы можете динамически включать таблицу стилей в заголовок. 

if ( navigator ) {
    if ( navigator.language ) {
        return navigator.language;
    }
    else if ( navigator.browserLanguage ) {
        return navigator.browserLanguage;
    }
    else if ( navigator.systemLanguage ) {
        return navigator.systemLanguage;
    }
    else if ( navigator.userLanguage ) {
        return navigator.userLanguage;
    }
}
...