多語言網站和RTL方向 - 最佳實踐

Question

您能分享在多語言網站中支持RTL方向的任何提示嗎？

除了文字方向之外，是否有任何更改，例如菜單標記？ rtl CSS應該包含在一個單獨的文件中（比如「layout-rtl.css」）或者一個「rtl」類應該被添加到body標籤中？我想知道這樣的東西。

我發現了一些提示here，但我真的很感謝某人的建議（一個已經用rtl語言啓動了網站的人）。

Answer 1

我們做的是在PHP聲明一些參數：

SIDE : right 
OPOSIDE : left 
DIR : rtl 
OPODIR : ltr 

每個站點的語言。

，我們只處理一個CSS文件，並用div的一個模板， 我們添加CSS或模板文件替換佔位

，如：

float : {SIDE} 
... 

，我們產生一個真正的css文件PHP（替換所有需要替換的）， 和該網站採取屬於他的CSS文件。

現在

您就可以使用CSS框架做到這一點： LESS，圖紙，XCC

Answer 2

來自官方的W3C：

• Internationalization Best Practices: Handling Right-to-left Scripts in XHTML and HTML Content

Answer 3

只要你不指定文字方向=在你的CSS升的任何地方，在人體內類設置應該足夠在CSS問題方面。

有些事情要考慮。圖像中的文本使得本地化在編輯圖像，獲取翻譯等方面更耗費時間。雖然將文本屬性設置爲rtl相當容易，但重新創建圖像更困難。請記住，rtl語言用戶閱讀的方向相反，因此在ltr語言中出現在右側的菜單應該出現在rtl語言的左側。

在ltr語言中朝一個方向移動的代碼在rtl代碼中相反地移動。

Answer 4

，因爲我的工作雙向網站很多，我要告訴你的最佳實踐（形成我的觀點），在此，這幾乎是什麼提到@Haim Evgi關於CSS預處理器

所以我做了以下工具來幫助緩解這件事，你可以在那裏找到更多的細節..

• Bi App Sass
• Bi App Less

我要去演示如何使用的Sass預處理器&我的工具bi-app-sass要做到這一點，但你可以參考前面鏈接，減版

簡單的想法是創建三個文件（基本上，它們可以隨意增長..）

app-ltr.scss // ltr interface to be compiled 
app-rtl.scss // rtl interface 
_app.scss  // private file where you will write your styles (won't be compiled) 

在 app-rtl.scss

包括以下

@import 'bi-app-rtl'; 
@import 'app'; 

同爲app-ltr.scss

@import 'bi-app-ltr'; 
@import 'app'; 

現在所有你需要做的就是寫你的風格在_app.scss，但在這裏，唯一不同的是，任何財產，可以有right/left值，你需要使用自定義混合編寫它們如下。

.foo { 
    display: block; 
    @include float(left); 
    @include border-left(1px solid white); 
} 

一旦你編譯它們，你將有兩個不同版本的樣式表app-rtl.css & app-ltr.css你就完成了！

希望幫助:)