Hackpads are smart collaborative documents. Join Hackpad Now.
千影(chikage) - HTML5 GlyphWiki Editor

  • 專案簡介

緣由
  • GlyphWiki.org 目前39萬個中文字型,是花園字型(Hanazono Font) 的底層資料庫,唯其字型是採用日本規範。
  •  
  • 基於 Glyphwiki 現有的龐大部件庫(光一個木字就有數十種變體),以及Kage 字形產生引擎,打造一個符合台灣字形規範的群眾造字/調字平台。

要解決的問題
  • 一)動態組字 (從IDS產生字形) 的美觀度問題。
  • 二)GlyphWiki 提供的編輯器是以Flash開發,改為HTML5 之後可在更多平台使用。
  • 三)缺字IDS及組字資料交換平台,讓各種字典辭書的缺字有統一的交換碼。

預定使用者
  • 一)古文字、古文獻相關研究。(e.g. 合文、減字譜)
  • 二)字形設計者
  • 三)CJK電子書編輯者
  • 四)需要造新字表達新概念的場合。(如新的化學元素)

可能的延伸功能

  • 蒐集未收錄到Unicode裡的字
  • 哪些字被造出來
  • 出自何處
  • 整理後可以提交Unicode Consortium/ISO IEC JTC1 SC2...IRG

  • 整理成IVD
即Unicode Consortium的異體字資料庫,現在都是日文有註冊,中文只有香港要提出港台用字不同的異體字庫。台灣目前好像還沒有要做這件事的計劃。

預定功能
(成品要有哪些功能來滿足上述使用情境)

現有類似專案

相關專案
  • idskage Generate Kage glyph format from IDS
  • kage.json 將 KAGE system 的檔案格式轉換成 JSON ,方便 HTML5 工具使用
  • 篆刻網 站主曾向上地宏一先生當面請益缺字處理相關問題,這是他的 blog主要完成的七千多個缺字,收錄在「引得市」的「古文字缺字資料庫」,已經完成的缺字可以嘗試轉換直接取用,不需重複再造字。

參考資料
  • 投影片第七頁解釋了筆畫格式,第九頁解釋了組件格式。
  • 第四頁解釋了 name rules 。

資源與授權方式
  • GlyphWiki 有自己的授權
  • KAGE/engine 是 GPL

專案目前狀態
  • JSON => kage
  • API server
  • HTML5 editor
  •  
利益揭露
提供造字服務的公司。

  • 徵求協作者

發起人/拋磚人:
  • NeedsWritingSystemExperts: 需要文字學家,或對異體字有研究的人
  • NeedsDesigner: 需要介面設計
  • Glyph Editor
  • Website
  • NeedsData: 需要資料(擷取、清理)
  • KAGE <=> JSON
  • NeedsTech: 需要技術支援(程式、架站 etc)
  • API server
  • 把資料放在 firebase 等服務上的可能性
  • NeedsProcess: 需要幫忙設計作業流程
  • dump.tar.gz => KAGE => JSON
  • NeedsTalkingToRealPerson: 需要有人幫忙和其他機關聯絡
  • 連絡陳信良先生,詢問改良意見 (曾在Glyphwiki editor 造過數千字)


  • 細節(非技術背景可跳填)

協作工具
  • hackfoldr 工作資料夾網址:
  • google drive 共用資料夾網址:

進度與 to-do
  • product planning(recommanded procedure from justin lee / 李易修)
  • strategy
  • scope
  • structure
  • wireframe
  • visual
  • web front-end
  • web back-end
  • ui / visual design

GlyphWiki  Editor 功能簡介

http://glyphwiki.org/wiki/u65e5?action=edit 末級部件  點 「専用エディタで編集する」
進入後點英文介面。
筆劃編輯:
  • 點一個筆劃(日第一豎筆),可以選筆劃類別:(straight line, curve, bend line ,etc)
  • 每種筆劃有不同的head 和 tail 可選。
  • head/tail 設定決定了筆劃的修飾(起筆、收筆)以及和其他筆劃的連繫。
字框編輯:

其他功能
按 Freedraw 可以用手繪方式寫字,系統會自動產生合適的筆劃。
  • 實作:應該是用 Path Simplification ,先把輸入的很多點轉成2~4個控制點。再找出最可能的筆劃。

技術規劃
前端:


  • 以React撰寫,筆劃新增刪除、類型選取、移動控制點、字框調整、鄰近字選取等介面。將編輯中的字形,交由Kage 產生,繪製到 一個透明底的overlay SVG layer。SVG layer 純顯示編輯結果,不處理事件。

  • 目前已經可以從server讀取json資料,繪製出單線體。前端已改用ES6撰寫,不用學LiveScript。

  • 此編輯器必須很容易嵌入,在任何網頁或Web base App看到不夠漂亮的組字時,點一下即可開始編修,結果送回伺服器。

後端:
  • glyphid 每筆組字資訊的唯一代碼
  •  
  • API :
  • 1)以Unicode, IDS取得組字資訊,供Kage 於client side 組字。
  • 2)以Unicode取得所有glyphid (如「木」,取得「木-01」「木-02」。
  • 3) 以Unicode 取得 IDS (中研院or CHISE or other)
  • 4)以glyphid取得所有使用它的glyphid。例:「木-01」得「杉」「木-02」得「李」 (豎木旁和李字的木豎筆較短)
  • 4)寫入調整組字資訊。glyphid and glyphdata
  • 6)取得組字編修記錄。(contributor)
  • 7)以Unicode, IDS 取得的應用例(如古書某一頁)。
  •  
  • 目前有兩個可能的方向,一是在 server 展開所有的 link (99 開頭的部件),成末級部件,編輯器只要 request 一次就好。或者在編輯器 pipeline request ,減少 request 次數,例如 `https://server/glyph/?json[]=u8279-03&json[]=u660e`
  •  

線條種類與頭尾形狀
  • stroke types
  • straight line 2pts, 1
  • free, 0
  • free 1:0:0
  • connect(h) 1:0:2
  • connect(v) 1:0:32
  • L-btm corner 1:0:13
  • R-btm corner 1:0:23
  • slash left 1:0:4
  • L-btm(G/T) 1:0:313
  • connect(h), 2
  • free 1:2:0
  • connect(h) 1:2:2
  • connect(v) 1:2:32 illegal
  • L-btm corner 1:2:13 illegal
  • R-btm corner 1:2:32 illegal
  • slash left 1:2:4 illegal
  • L-btm(G/T) 1:2:313 illegal
  • connect(v)
  • free 1:32:0
  • connect(h) 1:32:2 illegal
  • connect(v) 1:32:32
  • L-btm corner 1:32:13
  • R-btm corner 1:32:23
  • slash left 1:32:4
  • L-btm(G/T) 1:32:313
  • L-top corner, 12
  • free 1:12:0
  • connect(h) 1:12:2 illegal
  • connect(v) 1:12:32
  • L-btm corner 1:12:13
  • R-btm corner 1:12:23
  • slash left 1:12:4 illegal
  • L-btm(G/T) 1:12:313
  • R-top corner
  • free 1:22:0
  • connect(h) 1:22:2 illegal
  • connect(v) 1:22:32
  • L-btm corner 1:22:13
  • R-btm corner 1:22:23
  • slash left 1:22:4
  • L-btm(G/T) 1:22:313
  • curve 3pts, 2
  • free
  • slash left 2:0:7
  • slash right 2:0:0 illegal
  • stop for dot 2:0:8 illegal
  • hook left 2:0:4 illegal
  • hook right 2:0:5
  • connect, 32
  • slash left 2:32:7
  • slash right 2:32:0 illegal
  • stop for dot 2:32:8 illegal
  • hook left 2:32:4
  • hook right 2:32:5
  • L-top corner, 12
  • slash left 2:12:7
  • slash right 2:12:0 illegal
  • stop for dot 2:12:8 illegal
  • hook left 2:12:4 illegal
  • hook right 2:12:5 illegal
  • R-top corner, 22
  • slash left 2:22:7
  • slash right 2:22:0 illegal
  • stop for dot 2:22:8 illegal
  • hook left 2:22:4
  • hook right 2:22:5
  • narrow for dot, 7
  • slash left 2:7:7 illegal
  • slash right 2:7:0
  • stop for dot 2:7:8
  • hook left 2:7:4
  • hook right 2:7:5 illegal
  • bend line 3pts, 3
  • free, 0
  • free 3:0:0
  • hook up 3:0:5
  • connect(v), 32
  • free 3:32:0
  • hook up 3:32:5
  • L-top corner, 12
  • free 3:12:0
  • hook up 3:12:5
  • R-top corner, 22
  • free 3:22:0 illegal
  • hook up 3:22:5
  • OTSU curve 3pts
  • free, 0
  • free 4:0:0
  • hook up 4:0:5
  • R-top corner, 22
  • free 4:22:0
  • hook up 4:22:5
  • complex curve 4pts, 6
  • free, 0
  • slash left 6:0:7 illegal
  • slash right 6:0:0 illegal
  • stop for dot 6:0:8 illegal
  • hook left 6:0:4 illegal
  • hook right 6:0:5
  • connect, 32
  • slash left 6:32:7
  • slash right 6:32:0 illegal
  • stop for dot 6:32:8 illegal
  • hook left 6:32:4
  • hook right 6:32:5
  • L-top corner, 12
  • slash left 6:12:7
  • slash right 6:12:0 illegal
  • stop for dot 6:12:8 illegal
  • hook left 6:12:4 illegal
  • hook right 6:12:5 illegal
  • R-top corner, 22
  • slash left 6:22:7
  • slash right 6:22:0 illegal
  • stop for dot 6:22:8 illegal
  • hook left 6:22:4
  • hook right 6:22:5
  • narrow for dot, 7
  • slash left 6:7:7 illegal
  • slash right 6:7:0
  • stop for dot 6:7:8
  • hook left 6:7:4
  • hook right 6:7:5 illegal
  • vert slash 4pts, 7
  • free, 0
  • slash left 7:0:7
  • connect, 32
  • slash left 7:32:7
  • L-top corner, 12
  • slash left 7:12:7
  • R-top corner, 22
  • slash left 7:22:7 illegal

  • 成果展示(規劃文件、雛形/草稿、原型/初稿、正式發佈/完稿)





Latest change 10 years ago

Reconnecting...

Disconnected

No Authorization

Connecting...
Reestablishing connection...

We're having trouble talking to the Hackpad synchronization server. You may be connecting through an incompatible firewall or proxy server.

We were unable to connect to the Hackpad synchronization server. This may be due to an incompatibility with your web browser or internet connection.

Lost connection with Hackpad. This may be due to a loss of network connectivity. If you close this window you may lose up to 30 seconds of unsaved work.

Server not responding. This may be due to network connectivity issues or high load on the server.

You are no longer allowed to access this pad. Reconnect to request access.

Failed to reconnect.

If this continues to happen, please let us know (opens in new window).

How embarrassing...

We experienced an error on the page that is causing problems with saving your work. Continuing to edit on the page without refreshing your browser would lead to some loss of your work.

If this continues to happen, please let us know (opens in new window).

Heads Up!

This pad is moderated. Your changes will require owner approval.

Insert an Image


or
Tip: you can simply drag&drop images into the editor from your desktop!

Cancel

Stop sharing with ?

This pad is shared with "", so will still be able to access it.
Cancel

Embed This Pad


Embed as

Log in / Sign up

Signing in using Facebook...

Contact Support



Please check out our How-to Guide and FAQ first to see if your question is already answered! :)

If you have a feature request, please add it to this pad. Thanks!