RareWords函式庫 介紹

RareWords是一套JavaScript函式庫,為網頁顯示地政罕用字的解決方案,其原理是透過JavaScript來動態變更網頁元素的屬性,並運用CSS(Cascading Style Sheets,網頁樣式技術)來取得罕用字查詢網站提供的Woff字型檔,開發廠商先在應用系統的網頁上引用RareWords函式庫,再宣告要套用罕用字的元素名稱以及罕用字所屬的縣市代碼,RareWords隨即向罕用字查詢網站要求指定縣市的Woff字型檔,而執行網頁的瀏覽器則自動依據Woff字型檔的字型進行文字的繪製以顯示罕用字。
Responsive image

RareWords函式庫 介面說明

RareWords是一隻獨立的JavaScript函式庫,無須配合其它函式庫即可使用,其使用方式與一般JavaScript函式庫相同,先在網頁的head標籤中加入script引用語法,如下所示。
<script src="http://RareWords.land.moi.gov.tw/Scripts/RareWords/RareWords.js"> </script>
接著在適當的地方初始化RareWords後,即可以操作RareWords提供的方法來進行罕用字的套用,RareWords一共提供以下兩個方法供使用:

RenderByName(Name, CountyCode)

尋找網頁中與指定名稱(Name)相同的元素,並設定該元素的樣式,套用指定縣市(CountyCode)的罕用字集。
使用方式舉例如下,在呼叫RenderByName方法後,RareWords會尋找整份HTML文件中,屬性name的值等於「SectionName」的標籤,以這個例子會找到一個 div 標籤,並將套用縣市代碼為B的罕用字woff檔到此標籤上,即完成這個方法的工作。

<html>
<head>
    <meta charset="UTF-8">
    <title>罕用字 Web Font </title>
    <script src="http://RareWords.land.moi.gov.tw/Scripts/RareWords/RareWords.js"></script>
</head>
<body>
    <div name="SectionName">麻 埔段 及  子段</div>
    <script type="javascript">
	
        var rwObj = new RareWords();
        rwObj.RenderByName("SectionName", "B");
    </script>
</body>
</html>

RenderByCSS(Selector, CountyCode)

尋找網頁中符合CSS選擇器(Selector)條件的元素,並設定該元素的樣式,套用指定縣市(CountyCode)的罕用字集。
在呼叫RenderByCss方法後,RareWords會透過CSS 選擇器語法對整份HTML文件進行搜尋 (語法規則請參考W3C說明),以下面的例子來看,#Section 表示要尋找HTML文件中,屬性id的值等於「Section」的標籤,以這個例子會找到一個 select 標籤,找到後即將套用縣市代碼為H的罕用字woff檔到此標籤上,即完成這個方法的工作。

<html>
<head>
    <meta charset="UTF-8">
    <title>罕用字 Web Font </title>
    <script src="http://RareWords.land.moi.gov.tw/Scripts/RareWords/RareWords.js"></script>
</head>
<body>
    <select id="Section">
        <option>  頭洲段 頭洲小段</option>
        <option>番婆 段</option>
        <option>賴厝 段</option>
        <option> 榔段下 榔小段</option>
    </select>
    <div id="SectionDiv">
        <span class="section">頭洲段</span>以及 頭洲小段
    </div>
	
    <script>
        var rwObj = new RareWords();
        rwObj.RenderByCss("#Section", "H");
        rwObj.RenderByCss("#SectionDiv span.section", "H");
    </script>
</body>
</html>



RareWords函式庫 範例程式

為了協助開發者順利上手使用RareWords函式庫,提供以下範例程式供開發者自由取用參考。