背景
- 阿拉伯語適配是一個比較麻煩的事情蟆豫，不僅僅在于它文案的適配，更多的是在于其語言習慣的變化。由從左到右(LeftToRight)的布局習慣變?yōu)榱藦挠蚁蜃?RightToLeft)的布局習慣尊剔。
https://sabq.org/
http://wam.ae/ar - 通過上面的網(wǎng)站，可以很直觀地看出像阿拉伯語菱皆，典型 RTL 布局網(wǎng)站的特點：
- 文字都是右對齊须误，并且是從右往左閱讀的
- 排版都是從右到左的，在一個產(chǎn)品列表中仇轻，右邊第一個商品是第一個
- 箭頭代表的意義剛好相反京痢，比如在輪播圖中，向左箭頭代表下一幀篷店，而向右箭頭則代表查看上一張圖片
思考
對于rtl網(wǎng)站的適配祭椰，這里有兩種方案參考
1、direction 布局方案
2疲陕、transform鏡像翻轉(zhuǎn)方案
direction 布局方案
- direction是css屬性畜眨，css手冊中對direction的描述：該屬性指定了塊的基本書寫方向扯躺，以及正對Unicode雙向算法的嵌入和覆蓋方向。
- 通俗的講就是：
1、定義過 direction:rtl 的元素晦墙，如果沒有預先定義過 text-align，那么這個元素的 text-align 的值就變成了 right粤剧，如果設(shè)置了 left/center 則無效
2奕污、對于數(shù)字和標點符號以外的編碼，順序仍然是從左到右的
3按厘、改變了 inline-block 元素的書寫順序 - direction適配方案借助rtlcss 模塊來完成医吊。
.test: {
direction: rtl;
margin-right: 10px;
float: left;
}
通過rtlcss模塊處理后
.test: {
direction: ltr;
margin-left: 10px;
float: right;
}
最后通過一套代碼編譯成一套 html，多套 css逮京，一套 js 文件卿堂，區(qū)分國家用戶來進行訪問。
transform鏡像翻轉(zhuǎn)方案
transform鏡像翻轉(zhuǎn)通過一套html懒棉，一套css草描，一套js文件既可完成ltr和rtl適配
- 對比了一下direction和transform的方案，最終我在項目中選擇了transform方案策严，transform實現(xiàn)起來比較簡單穗慕，但是也存在缺陷，這個下面會提到妻导。
- transform鏡像翻轉(zhuǎn)實現(xiàn)rlt和ltr原理：
- transform: scaleX(-1); 以使頁面沿著中軸進行水平翻轉(zhuǎn)逛绵，通過水平翻轉(zhuǎn)怀各，原本 LTR 的布局頁面會變成RTL布局頁面，但圖片和文字會被相對于的翻轉(zhuǎn)了术浪，這時候在被翻轉(zhuǎn)的文字和圖片上設(shè)定transform: scaleX(-1)鏡像翻轉(zhuǎn)回來就完美實現(xiàn)了瓢对，理論看似很簡單，實際上會遇到一些問題;
下面介紹一下我在項目中的實現(xiàn)（react中臺項目）
封裝一個FlipBox組件用來包裹需要翻轉(zhuǎn)的text和img（FlipBox 可以替換頁面中的span標簽胰苏，img通過div包裹）硕蛹，獲取url中的locale字段，locale字段來判定LTR布局還是RTL布局硕并。
const locale = localeDeal() || 'en-US';
export const FlipBox = ({ children, ...props }) => {
if(typeof children === 'string') {
return (
<span
{...props}
style={{ transform: (locale === 'he-IL' || locale === 'ar-EG') ? 'scaleX(-1)' : 'none' }}
>{ children }</span>
)
}
return (
<div
{...props}
style={{
display: 'inline-block',
transform: (locale === 'he-IL' || locale === 'ar-EG') ? 'scaleX(-1)' : 'none',
}}
>
{ children }
</div>
)
}
- 獲取根元素dom（root）妓美，然后進行翻轉(zhuǎn)。
注意：這里為什么不能獲取html或者body標簽來進行翻轉(zhuǎn)呢鲤孵？
因為通過html壶栋、body在翻轉(zhuǎn)會影響到modle彈框以及message的翻轉(zhuǎn)，這個導致了很嚴重的問題普监，不說解決不了贵试，因為沒必要。
if(locale === 'he-IL' || locale === 'ar-EG') {
const domeRoot = document.getElementById('root');
domeRoot.style.transform="scaleX(-1)";
}
- 在頁面中引用FlipBox組件凯正，然后包裹需要翻轉(zhuǎn)的圖片和文字
<div className={styles.formItemTitle}>
<FlipBox>我的滑板鞋毙玻，時尚時尚最時尚 {''}</FlipBox>
<FlipBox>
<img className={styles.modalImg} src={imgList.bills} alt="" />
</FlipBox>
</div>
這種方式可以實現(xiàn)圖片和文字的正常顯示±壬ⅲ看似結(jié)束了桑滩，好像完美解決了。但是我們忽略了input這個標簽
input經(jīng)過root的transform翻轉(zhuǎn)和自身的transform翻轉(zhuǎn)后會回復到之前的狀態(tài)允睹，簡單來說負負的正运准。還是LTR布局格式，所以還要借助direction特定對input(這里的input是antd中的缭受，原理一樣)設(shè)定一個rtl來適配胁澳。
export const isLeftType = locale !== 'he-IL' && locale !== 'ar-EG';
<FlipBox>
<input
dir={isLeftType ? "ltr" : "rtl"}
value={value}
onChange={onChange}/>
</FlipBox>
這里可以解決input的RTL適配。
當前頁面為狀態(tài)頁面的時候米者，可能存在LTR布局和RTL布局無差異的情況韭畸，這個時候可以通過transform: scaleX(-1)把整個頁面翻轉(zhuǎn)回來，這樣可以做到減少入侵代碼蔓搞，提高代碼的可讀性胰丁。
transform: scaleX(-1)方案來解決RTL布局的適配優(yōu)缺點都很明顯
優(yōu)點：
1、transform翻轉(zhuǎn)是兼容原來的css和js邏輯的喂分。翻轉(zhuǎn)后margin-left: 10px;在瀏覽器的理解下是向右的锦庸，而direction 方案只是針對 CSS，JS 邏輯需要調(diào)整兼容妻顶。
2酸员、transform不需要考慮 CSS 命名，CDN 部署等一系列工程問題讳嘱，因為它是劃分 CSS 作用域的方式幔嗦，針對 LTR/RTL 布局進行隔離適配。
3沥潭、內(nèi)嵌樣式 transform 方案也可以很好地做到兼容邀泉，而 direction 方案是針對 CSS 文件的，如果要針對 html 文件則需要另外額外的工作钝鸽。
缺點：
1汇恤、transform 翻轉(zhuǎn)的方案，需要嵌入很多入侵業(yè)務(wù)的代碼拔恰，耦合度較高因谎，復用性較低。如果頁面復雜颜懊，不建議使用這種方案财岔。
