[Notes] Something you must know when fighting with IE7

Image Credit

全世界 Browsers 的使用率 (July 2012 ~ July 2013)

最近剛好有一些實戰機會可以和 IE7 來奮鬥,身為 FED 卻一直 skip 掉 IE7 好像不太好,有種沒有實戰過的感覺 xD … 現在想要把一些小細節記下來,希望能幫到想要和 IE7 奮戰的隊友們 xDD

δ 前情提要,如果是要解 IE6 的話 … 我只能請你自求多福。不過至少你能先叫做這個決定的豬腦去看一下微軟官方做的網站 IE6 Countdown,如果他發現自己做錯事的話,說不定問題就迎刃而解了呢 hahah。

奮戰流程:

  1. 如果你的作業系統不是 Windows 的話 (就算是 Windows 也是可以),那真的要先感謝一下佛心微軟放出來的 modern.IE ,因為你可以在上面找到各個作業系統上,各個虛擬化平台上內建好各個 IE 版本的虛擬硬碟。你就不用只為了測 IE 再來個什麼雙系統、三系統了,掛個 VirtualBox 就可以省下很多空間還有時間。( 因為我是用 128GB 的 SSD,所以空間有限,我個人的作法是把虛擬硬碟全部丟去行動硬碟上面,跑的很順也省下很多空間,可以參考一下)
  2. 在 fight with IE7 之前,先把戰力放在 Modern browsers。我特別去網路上找有關 browser 市佔率的各種資料,而資料整體上都是呈現出如本文一開始那張長條圖一樣的分佈。所以切記,時間就是金錢,特別是如果整個團隊就只有你這位 FED 的話,真的要先把事情都搞定後,再來打 Boss 呀。
  3. 終於要打 Boss 怪了,FED 們都知道(只有你家的 Boss 不知道) IE7 最強的攻擊技就是「完全沒有 Developer Tool」,這招真的強到讓人完全沒有還擊能力,因為通常 IE7 最大的問題就是 Layout 的不一致,尤其是對 IE7 完全沒有經驗的人來說特別如此,所以總是會很頻繁的手動調整 Layout。不過我找了一陣子後發現其實微軟有開發自己的 Developer Tool 給 IE7,只是並沒有內建在 IE7 裡面,而是需要自己手動下載來安裝,所以切記一定要先把你的 IE7 裝上 Developer Tool 呀。
  4. Let’s fight !!
  5. 特別開一個 IE7 fix,然後透過 Conditional Comments 來引入相關的 CSS / JS 檔案,這樣可以讓你原本的程式碼抽離於這些 hack 之外(我真的認為這些都是 dirty hack),所以不要 pollute 太多東西進去原本的 CSS / JS,這會造成維護上的困難也沒必要。
  6. 如果你使用到一些 CSS3 的東西像是 border-radius 或是 box-shadow 之類的屬性,記得搭配 CSS3Pie 來服用,通常可以解掉 90% 以上的 CSS3 問題,雖然好用但是要記得一些小事,就是有一些屬性只支援 shorthand version,請自行查閱一下 document 別寫得太開心到最後 Pie 看不懂就囧了。
  7. 通常 IE7 Layout 最大的問題是發生在 hasLayout 這個屬性上,根據 Sitepoint 這篇文章的解釋, 可以了解到這個是 IE 賦與元素的一個內部屬性,它的用處是「讓該元素本身及其孫元素(descendant)具有處理定位 (Positioning)及大小(sizing)的能力,而不是依賴於它的祖元素們(ancestors)」。而該文有列出幾個元素像是 img … 等。那為什麼會和這個屬性有關係?因為除了 IE 預設清單內的元素們具有這個屬性外,其他的元素是沒有這個屬性的,文章內有提到幾個常見的現象,像是「元素部分內容存在但是部分卻消失」或是「畫面只出現一半」。而要從 CSS 讓元素強制具有這個屬性有許多做法,最常見的做法就是設定一個 zoom: 1; 就可以了,這就是為什麼我們很常看到很多 3rd party libraries 在 CSS 中會加入這個東西的原因。不過這背後還有很多細節及一些奇特情況,可以參考微軟的這篇
  8. 如果你有使用 font-awesome 的話,請記得加入 font-awesome-ie7.min.css 的 hack,你會發現他都是在利用 zoom: 1; 來解 hasLayout,還有加入 innerHTML workaround 來解 IE7 不支援 pseudo element selector 的問題 xDDD
  9. 如果你有使用 bootstrap 的話(我是用 2.3),我發現如果用組合式 grid 來達成滿版的話(我這邊碰到的情況是 span6 + span6 或是 span4 + span8),整個 Layout 就會炸掉,所以要特別手動調整 width ,這邊要特別留意一下。
  10. 利用 zoom: 1;*display: inline; 來解原本被我們套用 display: inline-block; 的元素們(在 Modern browsers 我們用太習慣了,所以這個問題很多)。
  11. 如果你有用 <ul><li> 的話,不要用 list-style-image 來客製化他的樣式,因為如果有 position 上的需求,並沒有 CSS 可以直接控制這個值,可能會調到死,取而代之的你可以改用 background-imagebackground-position 搭配 padding 來手動 position,效果佳。
  12. … 未完待續

以上是和 IE7 奮鬥過的一些心路歷程,希望能幫到一些人,未來如果還有什麼有趣的狀況也會更新在這個清單內,Rock 😛

[Note] Missing part in Jade template

Image Credit

I have used Jade template for few projects and I really like it ! Its simplicity and indentation are key features to me compared with the other template engines. But recently, I have to build a website which can change layouts easily ( maybe by backend settings or routes ) to extend. But after trial and error and searching from the internet, I have concluded that it is one of important features lost in Jade.

Yeah, it is called “Dynamic Inheritance”.

According to this issue, you can find out that this is a known issue right now in Jade because of performance issues. (when writing this article, its version is 0.31.0) Because right now in the new design of Jade, you have to define your layout to extend in children pages, it is hard ( impossible ) to change layouts dynamically like what Twig or the other templates do.

So if you really want to do that right now in Jade, there is a workaround which you have to define two pages extending different layouts and trigger the right page in controller like this :

https://gist.github.com/EragonJ/5723087.js

That’s it, hope one day Jade can support this feature 😛

[Notes] MOPCON 2012

mopcon

剛從 MOPCON  回來,想說趁著對幾個議題還有些印象的時候記錄一下當時做的筆記:

  1. Registrano by hlb
    • 自訂表單 
      滿足使用者客製化的需求,這個困難點應該是在於如何把「使用者自訂的表單」儲存在現有的資料庫結構之下,應該要設計出一個特定(或統一)的格式(類似 JSON or ? )來達到真正的「客製化」。
    • 超賣
      票券類型的服務大多時候都會有名額上的限制,所以要避免超賣(Oversell )的問題。關鍵字:Table Lock, Row Lock, Unique Sequential Number
  2. Firefox OS by Cervantes
    • Gaia
      The UI for Boot to Gecko ( B2G ) ,前端工程師可以參考他們的 UI 設計細節
    • 備註
      給予 Web App 使用更進階 API 的權限來存取 Device 底層的資訊(Web App can work like Native App now )
  3. pjax by XDite
    • What is pjax
      HTML5 pushState +  ajax
    • 備註
      • 解決 ajax 動態載入但是無法 prev / next 的問題(因為透過 ajax 方式載入的內容是沒有辦法被記錄在 History 裡面的)
      • 解決 Twitter 以前透過 #! hashchange 的方式來達成 prev / next  但是不夠 SEO Friendly 的問題
      • jQuery pjax 可以依 browser 支援程度來做到相對應的 fallback,堪稱神器。
  4. 行動網路上 API 設計準則 by gslin
    • 前提
      行動網路上的先天限制,就是很容易斷線、不穩、電量不足、速度慢。
    • API redesign
      因為 device 的差異所以要調整 API 以降低 request 次數。實作則是可以透過 extra parameters 把額外的 API 做一個整合,雖然 dirty 但是可以省 request。要注意的部份有:透過某種 Serial 的值讓 Server Side 知道該 device 的某個一次性行為曾經執行過,以「確保」不會被重覆執行。
    • Atomic API
      對 mobile 的 API 設計時,要盡量以 Atomic 的方式設計,讓很多關聯性的動作 ( 例如開專輯、設定歌、 …  ) 一次做完,不要分開做。這個 Atomic 的思惟有幾個層面,就 Server Side 來說,只要回傳「必要的」資料就好,同時在傳遞資料前要先做一層壓縮以加快傳輸的速度,「即使」 Client Side 要多花 effort 來做解壓的動作,但是總比維持在一個「不穩定」的連線上面瘋狂 retry 好,因為總的來說,其相對所花的時間也會比較少。(請參考前提)

以上就是這次活動讓我收獲比較多的部份,也歡迎留下你的看法 😉

[Notes] CSS Cross-Country

Image Credit

最近為了讓自己保持繼續學習的動機,所以就很衝動的花了 25 USD 買了一個月份的 Code School 資格,而首當其衝的課程就是身為 Front-End 不能不了解的 CSS。

雖然不是說完全不了解 CSS,但是我很想知道如果是付費教學的話,它會怎麼樣「教」CSS 這種很難以捉摸的東西?(你說 CSS 簡單它還真的可以很簡單,但是在這著重視覺特效還有正在經歷瀏覽器大戰的世界,CSS 還是真的可以他媽的難。)

最後証實沒有白花錢,因為這個教材也直接切入很多 CSS 技巧的核心,都是我在外面亂撞好幾十次得到的慘痛教訓,除此之外也有一些我沒有留意過的細節,看完整個教材加上 Challenge 的練習之後整個就是對 CSS 的掌握更多了一點,以下就是我由 Level 1 ~ Level 8 覺得很重要的筆記:

  1. Non-Conflicting properties will be combined
  2. 浮動的元素如果超過了 parent 的寬就會被擠到下一個「可能的」位置,這個時候如果元素之間的高度不同,就會影響被擺放的位置(可以想像一下 Pinterest 的 Layout ,他不是依照由左到右的順序擺放格子,而是會去尋找「上一層高度最小」的位置去插入來達到不規則的瀑布流,它的演算法下次再來開新文章分享。)
  3. 同時有多個 float : left | right; 的元素「會依 DOM 的先後順序」來決定誰在最左或最右邊
  4. 如果子元素有 float 的話,要記得在 parent 設定 clearfix (參考 Bootstrap 很有名的 clearfix 方法,我在面試 T 公司的時候就是用這個方法來解決 floating 的問題)
  5. CSS 的 Specificity 計算( 0, 0, 0, 0 → inline style, # of ID selectors, # of class selectors, # of element selectors )
  6. 不要用 !important 讓未來的自己後悔 …
  7. Box Model 還有 width / height 的計算(因為和我們直覺想的完全不一樣,所以要留意。)
  8. 父元素 postion : relative 搭配子元素 position : absolute 是一個超重要也常用的排版技巧
  9. Z-index 要發揮效用的前提是該元素一定要被 positioned
  10. CSS property shorthands
  11. Block element / Inline element / Inline-Block element 的差異
  12. 置中 Block element 的方法 – margin : 0 auto;
  13. 置中 Inline / Inline-Block element 的方法 – text-align : center;
  14. Collapsing margins
  15. Content 用的 images 和 裝飾 Layout 用的 images 要用不同的形式呈現,前者建議是以 inline images 的形式,而後者建議是用 background images 的形式
  16. Image Crop with overflow hack
  17. 增加「說明用的文字」在要被 image 替換的元素上,利用 text-indent : -99999px 的 hack
  18. CSS Sprites 好處:減少和 Server 的溝通次數、避免 :hover 等事件出現閃圖的情況
  19. 善用 Pseudo Class (有些真的很強大 … )

以上,特別筆記一下!

[Note] Mongodb – tiny and elegant database

Image Credit  :  1 , 2

最近在開發一個分享書籍資訊的服務,因為想要試著單靠 JavaScript 去征服這個世界,所以我就選定了以下的開發環境及工具:

  • Node.js ( server side javascript )
  • Express.js ( web framework based on Node.js )
  • MongoDB

因為書藉的資訊在這個服務中沒有太大的關聯性,同時我也懶得搞一個複雜的資料庫出來,所以在大量的 Survey 後,我發現 MongoDB 很適合當這個服務的資料庫後端 。

使用原因

所謂事出必有因,我特別列出幾個它吸引我的原因如下:

  1. JSON-style documents
    Document 在 MongoDB 裡的名詞定義就是一組一組的資料集合,而它有一個很棒的特色,就是所有的 Document 都是以 JSON 的風格存儲 ,所以在存儲資料的時候可以很方便的統一格式。
  2. Dynamic Schema
    我們在操作資料庫的時候可以不用操心 Schema 的問題,因為 Collection (等同於 RDBMS 中的 Table)的 Schema 是在你存入 Document 的時候依其型態決定的,所以還可以做到同一個 Collection 的 Document 有不同的資料型態(雖然這通常不會是我們允許的情況,但是做的到)。
  3. Easy Querying
    在操作 MongoDB 的時候,我們可以不用和一堆複雜的 SQL 語法打交道(如: CREATE TABLE / ALTER TABLE …),而是透過多個 Query Object 來存取資料,所以這對於熟悉 JavaScript 的開發者來說,真的是很直覺的操作方式。

善用 Modules

而在開發服務的時候,為了找到好用的 Node Modules 來操作 MongoDB,我就到處在 npm 尋找可行的 MongoDB modules,但是幾本上都不方便使用,光是原生的 MongoDB-native 也因為要寫一堆 callback function 而被我打槍…

就在萬念具灰的時候,我發現了一個名為「Mongolian」的 Module。

比較 Modules 差異

不用一段 Source Code 很難明確的點出 MongoDB-native 和 Mongolian 的落差,所以先來看一段 VCR(註解在程式碼裡):

https://gist.github.com/2957876.js

如果你還看不出 MongoDB-native 的 callback 大軍的話,那再看另一段從官方範例中完整取出的 VCR:

https://gist.github.com/2957935.js

這真的是太噁心了,我實在是沒有辦法使用這一串 callback 海來操作資料庫,所以我最後選用了還在這個還在開發階段中的 Mongolian,不單單只是因為操作簡單,還因為它完整的提供了和 MongoDB shell 一樣的操作流程,這對開發者來說真的是好事呀,這就是所謂的一魚兩吃!

Mongolian DeadBeef is an awesome Mongo DB node.js driver that attempts to closely approximate the mongodb shell.

而使用方式就不詳述了,因為這個去看 Document 還有 Example 甚至是多玩幾次 MongoDB shell 就會了,就請自己多方嘗試吧。

BSON ObjectId

我還要特別記錄一下這個叫做 ObjectId 的東西,如果你仔細去印出存在於 Collection 中的 Document 的話,你會發現每一組 Document 都會有一個 _id 的欄位存放著 ObjectId,原先我單單以為這只不過是一個類似 unique id 的機制,可以讓你明確的區分出各個 Document ,結果我錯了,因為他還有更深層的含意在背後。

BSON ObjectId 是一個大小為 12 bytes 的資料型態,從下表可以看出他每個資料區段所代表的意義。經過我的研究後發現,後三個資料區段主要是在提供 ObjectId 的獨特性以避免 Collision 的情況發生,所以其實並沒有太大的實質意義,真正特別的是 time 那個資料區段。

TimeStamp. This is a unix style timestamp. It is a signed int representing the number of seconds before or after January 1st 1970 (UTC).

WTF,他們聰明到把 Timestamp 藏在一個原本只是為了 Uniqueness (唯一性) 而存在的欄位,不僅因為 Timestamp 本身就具有唯一性,還具有實質上的意義呀!如果我們的 Document 存的是使用者的個人資訊,那你的 ObjectId 本身就代表著這個使用者創立帳號的時間,你就不需要再另外設計一個多餘的欄位來做這件事情,你只要這樣做就可以得到這個資訊:

o.getTimestamp() // ISODate("2012-06-20T03:40:58Z")

是不是很驚人?對我來說,真正驚人的是它背後的設計理念,這就像是 reCaptcha 為 Captcha 附予附加意義一樣,讓原本的惱人的 Captcha 驗証行為變成利用眾人的智慧去辨識無法辨別的古書,改變了原本被視為理所當然的事物,同時也附予其更深層的意義。

這才是所謂的「創新」,在你附予那些被視為理所當然的事物更深層意義之後。

以上就是這次的記錄,下次我們再來更深入了解 MongoDB 吧!

[Notes] How to embed Disqus into Blogger

Image Credit

因為受人之托,所以這幾天就利用空閒的時間在研究 Blogger 的 Layout Data Tags,而這次主要的問題就是要如何把 Disqus 嵌入在 Blogger theme 裡面,不過因為整個過程發生了一些問題,因此特別做一個記錄。

*我 Blogger 上的主題是:Carmen

一開始當然是先去 Disqus 設定好 Blogger 的相關資訊,然後根據官方的教學,我可以利用它們設計好的一個按鈕來掛載 Disqus(圖如下)

這邊的設計我覺得非常有趣,因為 Blogger 允計開發者以小組件(Widget)的方式快速分享、掛載,而 Disqus 掛載的東西就是一段會直接插入範本(Template)的標記(雖然標記又分 Layouts Widget TagsLayouts Data Tags 兩種,不過彼此都會互相使用到,前者主要是可以和 Widget 做互動、邏輯判斷、以及操縱迴圈,而後者則是可以取得各式各樣你可能會用到的「資料」,例如 Comments / Posts … 等)。

OK,接下來就是一連串的惡夢。

當我安裝好 Disqus Widget 後,我發現 Disqus Comment System 並沒有啟用,還是原本的樣子,所以我就開始很困惑,而透過 Chrome 的 Developer Tool 也沒有發現任何從 Disqus 載入的資源,整個就是相當無奈呀 …

而在經過不斷的碰壁之後,發現 Disqus 有寫一份 Help 可供參考,而文件的內容是一串假設,Disqus 會以這些假設為前提來載入 Comment System,如果有假設不符的話,那就可能是造成它無法正確載入的原因。

看著看著,我發現最後一點和我的情況好像有點衝突,它是這樣寫的:

There is a div with id comments. This is the div that the gadget will use include the Disqus comment embed. Blogger uses this div for its own native comment display. The gadget clears Blogger’s native comments and replaces it with Disqus’s comments …

中文版大意:

有一個 div 的 id 為 ‘comments’,而當 Disqus 掛載 widget 的時候,這個 div 會被用來載入 Disqus 的留言系統。而原本 Blogger 的留言系統也是採用這個 div ,所以當你掛載 Disqus widget 之後,我們會清掉 Blogger 原生的留言系統並取代成 Disqus 的留言系統。

Jesus,就在我爬過了整個 Carmen.xml 之後,我發現問題就真的發生在這個 div 身上,因為 Carmen 在它的 xml 裡面寫了這麼一段 code :

https://gist.github.com/1564894.js?file=gistfile1.html

問題就是出在這個 Template 做了一個很奇怪的設計,它的 #comments DOM 出現的時機竟然是在該篇文章的 Comment 不為零的時候!!所以如果這一篇文章沒有人留言,就不會有 #comments 的出現,又因為沒有 #comments,所以 Disqus 無法載入它們的 Comment System!

What the fuck ???

所以只好直接 Hack Carmen.xml,去 「Blogger >> 設定 >> 文章和留言 >> 留言 >> 留言位置 >> 隱藏」把原生的 Comment System 關掉,然後再另外插入一段 div:


<div class='comments' id='comments'>

如此一來,它可以延續 .class 的樣式,而且又能夠讓 disqus 載入 Comment System,接下來就是要調整如何秀出 Comment Count 。

很簡單,就短短的一行:


<a class='comment-link' expr:href='data:post.url + &quot;#disqus_thread&quot;'/>

但是這一行我搞了好久。

一開始當然也是先參考 Disqus 官方的 Example,之後可以發現 Disqus 會去爬行 Anchor tags,然後找出以「#disqus_thread」結尾的 Anchor 做替換,換成你在 Disqus 設定的 Comment Counts(可以在 Disqus 設定欲呈現的樣式及文字)。

這樣很 OK,離成功不遠了,但,麻煩的是在 Layouts Data Tags …

因為我們知道 Disqus 是利用當下的 URL 當做 Identifier 來判斷要載入相對應的留言串,但是我們要怎麼把當下 Post 的 URL 當做 href 的值塞進 Anchor Tag ?

這邊就要參考 Blogger 的 Layouts Widget TagsLayouts Data Tags 說明。

正如先前我寫的那一段 Code,我們可以利用「expr:href」的方式在 href 中塞值,別小看這個「expr:__HTML_ATTRIBUTE__」,因為官方沒有任何文件有解釋這個語法,我一開始就是因為不知道如何把 Post URL 與 #disqus_thread 這兩個字串串接起來而 Error 很久。

而這個「expr:」全名應該是 Expression,你可以在裡面寫入相關的表達式,以剛剛的 Code 為例,我就可以在經由 expr: 表達的 Attribute 中操縱 Layouts Data Tags,透過 data:post.url 取得該 Post 的 URL,然後再利用「+」串接 #disqus_thread 這個字串以得到最終結果。

不過這邊有一個要注意的,就是如果你要在 expr: 中表示字串的話,要用 &quot; 把它包住(因為已經被 expr: 的「’」 包住一層了,裡面就要跳脫「’」),不然的話會造成 parser 混淆,產生一堆 Error 呀!

以上就是這次為了 Disqus 所玩的 Hacking,如果要說心得的話,就是 Blogger 真的很屌,一個 Template xml 就可以搞定整個主題的樣式,然後搭配 Layouts Widget Tags 及 Layouts Data Tags 就能完成你所有想要做到的事情,雖然所有的東西都要塞到一個 xml 裡面會讓人看的有點難過(真的很髒),不過它也把原本在 WordPress 很不容易做到的事情簡化了許多,讓我覺得 Blogger 真的很用心在做這個事業。

加油!期待 Blogger 有更多令人驚艷的東西 :]

[Note] Useful tools for F2E

這篇用來整理一下與 F2E 相關的 tool,以供日後參考用(持續更新):

Javscript | CSS Compressor(壓縮器)

  • YUI compressor
  • 好用的 YUI compressor ,支援 JS | CSS 的壓縮,使用說明載點

Obfuscator(混淆器)

Test(測試)

  • Qunit
  • Javascript 單元測試的 Framework,適用於 jQuery plugin,使用說明載點

[WordPress] Coding Standards

這裡面的Coding Standards講到很多以前看到還蠻重要的東西,

像是下面這個做法可以避免”==”寫成”=”所產生的BUG,算是還蠻好用的。


if('abc' == $var) ...

另外還有一個也還重要的就是

Self-explanatory flag values for function arguments

這幾個點大家可以看一下,其他的就比較偏個人的習慣了。

Source

[Notes] unicode編碼區對照表

0000-007F Basic Latin 基本拉丁字母
0080-00FF Latin-1 Supplement 拉丁字母補充-1
0100-017F Latin Extended-A 拉丁字母擴充-A
0180-024F Latin Extended-B 拉丁字母擴充-B
0250-02AF IPA Extensions 國際音標擴充
02B0-02FF Spacing Modifier Letters 進格修飾字元
0300-036F Combining Diacritical Marks 組合音標附加符號
0370-03FF Greek and Coptic 希臘字母
0400-04FF Cyrillic 西里爾字母
0500-052F Cyrillic Supplement 西里爾字母補充
0530-058F Armenian 亞美尼亞文
0590-05FF Hebrew 希伯來文
0600-06FF Arabic 基本阿拉伯文
0700-074F Syriac 敘利亞文
0750-077F Arabic Supplement 阿拉伯文補充
0780-07BF Thaana 塔納文
07C0-07FF N’Ko
0900-097F Devanagari 天城體梵文字母
0980-09FF Bengali 孟加拉文
0A00-0A7F Gurmukhi 古爾穆基文
0A80-0AFF Gujarati 古吉拉特文
0B00-0B7F Oriya 奧里亞文
0B80-0BFF Tamil 泰米爾文
0C00-0C7F Telugu 泰盧固文
0C80-0CFF Kannada 卡納達文
0D00-0D7F Malayalam 馬拉亞拉姆文
0D80-0DFF Sinhala 僧伽羅文
0E00-0E7F Thai 泰文
0E80-0EFF Lao 老撾文;寮國文
0F00-0FFF Tibetan 藏文
1000-109F Myanmar 緬甸文
10A0-10FF Georgian 格魯吉亞文
1100-11FF Hangul Jamo 諺文字母
1200-137F Ethiopic 埃塞俄比亞文
1380-139F Ethiopic Supplement 埃塞俄比亞文補充
13A0-13FF Cherokee 切羅基文
1400-167F Unified Canadian Aboriginal Syllabics 加拿大土著統一音節文字
1680-169F Ogham 歐甘文
16A0-16FF Runic 北歐古文
1700-171F Tagalog 他加祿文
1720-173F Hanunoo 哈努諾文
1740-175F Buhid 布希德文
1760-177F Tagbanwa 塔格巴努亞文
1780-17FF Khmer 高棉文
1800-18AF Mongolian 蒙古文
1900-194F Limbu 林布文
1950-197F Tai Le 傣哪文;德宏傣文
1980-19DF New Tai Lue 新傣仂文
19E0-19FF Khmer Symbols 高棉符號
1A00-1A1F Buginese 布吉文
1B00-1B7F Balinese 巴厘文
1D00-1D7F Phonetic Extensions 音標擴充
1D80-1DBF Phonetic Extensions Supplement 音標擴充補充
1DC0-1DFF Combining Diacritical Marks Supplement 組合音標附加符號
1E00-1EFF Latin Extended Additional 拉丁字母擴充附加
1F00-1FFF Greek Extended 希臘文擴充
2000-206F General Punctuation 一般標點符號
2070-209F Superscripts and Subscripts 下標及上標
20A0-20CF Currency Symbols 貨幣符號
20D0-20FF Combining Diacritical Marks for Symbols 符號用組合附加符號
2100-214F Letterlike Symbols 似字母符號
2150-218F Number Forms 數字形式
2190-21FF Arrows 箭頭符號
2200-22FF Mathematical Operators 數學運算符號
2300-23FF Miscellaneous Technical 混合專門符號
2400-243F Control Pictures 控制圖像
2440-245F Optical Character Recognition 光學字元識別
2460-24FF Enclosed Alphanumerics 括號字母數字
2500-257F Box Drawing 製表符
2580-259F Block Elements 區塊元件
25A0-25FF Geometric Shapes 幾何形狀
2600-26FF Miscellaneous Symbols 混合什錦符號
2700-27BF Dingbats 什錦符號
27C0-27EF Miscellaneous Mathematical Symbols-A 混合數學符號-A
27F0-27FF Supplemental Arrows-A 補充性箭頭符號-A
2800-28FF Braille Patterns 盲文;盲人點字
2900-297F Supplemental Arrows-B 補充性箭頭符號-B
2980-29FF Miscellaneous Mathematical Symbols-B 混合數學符號-B
2A00-2AFF Supplemental Mathematical Operators 補充性數學運算符號
2B00-2BFF Miscellaneous Symbols and Arrows 混合什錦符號和箭頭符號
2C00-2C5F Glagolitic 格拉戈爾字母
2C60-2C7F Latin Extended-C 拉丁字母擴充-C
2C80-2CFF Coptic 科普特文
2D00-2D2F Georgian Supplement 格魯吉亞文補充
2D30-2D7F Tifinagh 提非納格字母
2D80-2DDF Ethiopic Extended 埃塞俄比亞文擴充
2E00-2E7F Supplemental Punctuation 補充性標點符號
2E80-2EFF CJK Radicals Supplement 中日韓部首補充
2F00-2FDF Kangxi Radicals 康熙部首
2FF0-2FFF Ideographic Description Characters 漢字結構描述字符
3000-303F CJK Symbols and Punctuation 中日韓符號和標點
3040-309F Hiragana 平假名
30A0-30FF Katakana 片假名
3100-312F Bopomofo 注音符號
3130-318F Hangul Compatibility Jamo 諺文相容字母
3190-319F Kanbun 漢文標註號
31A0-31BF Bopomofo Extended 注音符號擴充
31C0-31EF CJK Strokes 中日韓筆畫部件
31F0-31FF Katakana Phonetic Extensions 片假名音標擴充
3200-32FF Enclosed CJK Letters and Months 中日韓括號字母及月份
3300-33FF CJK Compatibility 中日韓相容字元
3400-4DBF CJK Unified Ideographs Extension A 中日韓統一表意文字擴充A
4DC0-4DFF Yijing Hexagram Symbols 易經六十四卦象
4E00-9FFF CJK Unified Ideographs 中日韓統一表意文字
A000-A48F Yi Syllables 彝文音節
A490-A4CF Yi Radicals 彝文字母
A700-A71F Modifier Tone Letters 聲調符號
A720-A7FF Latin Extended-D 拉丁字母擴充-D
A800-A82F Syloti Nagri
A840-A87F Phags-pa 八思巴字母
AC00-D7AF Hangul Syllables 諺文音節
D800-DB7F High Surrogates 高半代用區
DB80-DBFF High Private Use Surrogates 高半專用代用區
DC00-DFFF Low Surrogates 低半代用區
E000-F8FF Private Use Area 專用區
F900-FAFF CJK Compatibility Ideographs 中日韓相容表意文字
FB00-FB4F Alphabetic Presentation Forms 字母變體顯現形式
FB50-FDFF Arabic Presentation Forms-A 阿拉伯文變體顯現形式-A
FE00-FE0F Variation Selectors 字型變換選取器
FE10-FE1F Vertical Forms 豎式標點
FE20-FE2F Combining Half Marks 組合半形標示
FE30-FE4F CJK Compatibility Forms 中日韓相容形式
FE50-FE6F Small Form Variants 小寫變體
FE70-FEFF Arabic Presentation Forms-B 阿拉伯文變體顯現形式-B
FF00-FFEF Halfwidth and Fullwidth Forms 半形及全形字符
FFF0-FFFF Specials 特殊區域
10000-1007F Linear B Syllabary 線形文字B音節文字
10080-100FF Linear B Ideograms 線形文字B表意文字
10100-1013F Aegean Numbers 愛琴數字
10140-1018F Ancient Greek Numbers 古希臘數字
10300-1032F Old Italic 古意大利文
10330-1034F Gothic 哥特文
10380-1039F Ugaritic 烏加里特楔形文字
103A0-103DF Old Persian 古波斯文
10400-1044F Deseret 猶他大學音標
10450-1047F Shavian 肅伯納字母
10480-104AF Osmanya
10800-1083F Cypriot Syllabary 塞浦路斯音節文字
10900-1091F Phoenician 腓尼基字母
10A00-10A5F Kharoshthi 佉盧字母
12000-123FF Cuneiform 楔形文字
12400-1247F Cuneiform Numbers and Punctuation 楔形文字數字及標點
1D000-1D0FF Byzantine Musical Symbols 東正教音樂符號
1D100-1D1FF Musical Symbols 音樂符號
1D200-1D24F Ancient Greek Musical Notation 古希臘音樂譜記號
1D300-1D35F Tai Xuan Jing Symbols 太玄經符號
1D360-1D37F Counting Rod Numerals 算籌記數式
1D400-1D7FF Mathematical Alphanumeric Symbols 數學用字母數字符號
20000-2A6DF CJK Unified Ideographs Extension B 中日韓統一表意文字擴充B
2F800-2FA1F CJK Compatibility Ideographs Supplement 中日韓相容表意文字補充
E0000-E007F Tags 語言編碼標籤
E0100-E01EF Variation Selectors Supplement 字型變換選取器補充
FFF80-FFFFF Supplementary Private Use Area-A 補充專用區-A
10FF80-10FFFF Supplementary Private Use Area-B 補充專用區-B

超實用的翻譯,這就知道哪些字是被放在哪區unicode內了

>>Fron : http://203.72.56.12/mt/Wu/2006/10/unicode.html
>>original version: http://www.unicode.org/Public/5.0.0/ucd/Blocks.txt