此特徵可以指定區塊元素的文字書寫方向，及文字行（inline）元素的展現方向。unicode-bidi 必須設為 embed 或 bidi-override 才能使此特徵產生效果。
- ltr：文字或其它元素 由左向右 展現，此為預設值。
- rtl：文字或其它元素 由右向左 展現。
- inherit：繼承父元素的特徵值。
- 風格用法：
<style type='text/css'>
.rtl {direction:rtl;
unicode-bidi:bidi-override;
width:200px
}
</style>
<div class='rtl'>
John F. Kennedy said:
<p>ask not what your country can do for you -
<i>1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i>
</p>
ask what you can do for your country.
<i>1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i>
</div> - 執行結果：
John F. Kennedy said:
ask not what your country can do for you - 1 2 3 4 5
ask what you can do for your country. 1 2 3 4 5
- 上例，IE6, Firefox 成功；Safari, Chrome 失敗，必須拿掉 P 元素改為文字行元素，例如 SPAN，就能成功。
配合 direction 決定文字的書寫方向，及文字行元素的展現方向。可設為：
- normal：元素不開放一個新增的雙向規則植入層，此為預設值。元素以預設的方向展現。
- embed：元素開放一個新增的雙向規則植入層，用 direction 設定其展現方向。元素的內容則以預設的方向展現。
- bidi-override：與 embed 相同，加上如果元素的內容只有文字行元素，會完全依據 direction 改寫其內容的書寫方向。此特徵值會蓋過預設的雙向規則。前面的範例在元素中加入區塊元素，IE6, Firefox 可以執行；但是 Safari, Chrome 會失敗。
- inherit：繼承父元素的特徵值。
測試 embed。下面例子顯示，四個連續的 SPAN 都設為 embed，這四個元素會由右向左排列。其中 12 34 56 會展示成 56 34 12。實測時，在四個元素間加入不同類別的元素，會使其分成兩組。
- 風格用法：
<style type='text/css'>
.emb {direction:rtl;
unicode-bidi:embed;
width:200px
}
.emb:before {content:' / '; color:red}
</style>
<span class=emb>12 34 56</span>
<span class=emb>ab cd ef</span>
<span class=emb>好玩遊戲 射擊遊戲</span>
<span class=emb>孔子 老子</span> - 執行結果： 12 34 56 ab cd ef 好玩遊戲 射擊遊戲 孔子 老子
測試 bidi-override。下面例子顯示，連續的 SPAN 會由右向左排列。其內容文字也是由右向左書寫。實測時，在四個元素間加入不同類別的元素，會使其分成兩組。
- 風格用法：
<style type='text/css'>
.bdo {direction:rtl;
unicode-bidi:bidi-override;
}
.bdo:before {content:' / '; color:red}
</style>
<span class=bdo>12 34 56</span>
<span class=bdo>ab cd ef</span>
<span class=bdo>好玩遊戲 射擊遊戲</span>
<span class=bdo>孔子 老子</span> - 執行結果： 12 34 56 ab cd ef 好玩遊戲 射擊遊戲 孔子 老子
測試 TABLE。改變其展現方向。
- 風格用法：
<style type='text/css'>
.tbl {direction:rtl;
unicode-bidi:embed;
}
</style>
<table>
<tr><td>1<td>2<td>3<td>4
<tr><td>A<td>B<td>C<td>D
</table>
<p>
<table class=tbl>
<tr><td>1<td>2<td>3<td>4
<tr><td>A<td>B<td>C<td>D
</table> - 執行結果：
1 2 3 4 A B C D 1 2 3 4 A B C D
測試區塊元素。改變其對齊方向。
- 風格用法：
<style type='text/css'>
.blk {direction:rtl;
unicode-bidi:embed;
text-align:justify;
}
</style>
<p>益智遊戲 賽車遊戲 武打遊戲</p>
<p class=blk>益智遊戲 賽車遊戲 武打遊戲</p> - 執行結果：
益智遊戲 賽車遊戲 武打遊戲
益智遊戲 賽車遊戲 武打遊戲
- 在部落格必須加上 text-align:justify，否則看不出靠右的效果。
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {direction:rtl;
unicode-bidi:bidi-override;
width:80%;
background:blue;
text-align:justify;
}
.hvr:hover {unicode-bidi:embed;
direction:rtl;
}
.hvr:active {direction:ltr;}
</style>
<p class='hvr'>
射擊遊戲, 好玩遊戲, 賽車遊戲.
</p> - 執行結果：
射擊遊戲, 好玩遊戲, 賽車遊戲.
- 上例，Firefox 完全成功；Safari, Chrome 第一次沒法進入 :hover 風格；然後 :active 之後無法退回一般狀態。
javascript 應用。可以用 style 物件 的特徵 direction, unicodeBidi 作動態變化。此範例使用到 toggleCSS()。
- 風格用法：
<div id='test' style='direction:rtl; unicode-bidi:bidi-override; background:red; width:200px; height:150px'>
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
</div>
<script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
}
toggleCSS("test", "direction", "ltr", "rtl", 1000);
</script> - 執行結果：射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
