Hackpad 封存器 - g0vbeta

千影(chikage) - HTML5 GlyphWiki Editor

最後編輯：2015-06-13 建立：2015-04-18 歷史紀錄

 

    IPA C專案簡介

 

ET B緣由

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

 

IPA C要解決的問題

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

 

ET B預定使用者

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

 

LI-HSIN W可能的延伸功能

 

    蒐集未收錄到Unicode裡的字

  • 哪些字被造出來
  • 出自何處
  • 整理後可以提交Unicode Consortium/ISO IEC JTC1 SC2...IRG

 

    整理成IVD

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

 

IPA C預定功能

ET B（成品要有哪些功能來滿足上述使用情境）

 

CHIA-LIANG K現有類似專案

 

ET B相關專案

 

CAASI H參考資料

  • 投影片第七頁解釋了筆畫格式，第九頁解釋了組件格式。
  • 第四頁解釋了 name rules 。

 

資源與授權方式

 

ET B專案目前狀態

  • JSON => kage
  • API server
  • HTML5 editor

     

ET B利益揭露

YAP S提供造字服務的公司。

 

    IPA C徵求協作者

 

LANFON發起人/拋磚人：

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

 

 

    ET B實作細節（非技術背景可跳填）

 

ET B協作工具

 

進度與 to-do

  • product planning（recommanded procedure from justin lee / 李易修）
    • strategy
    • scope
    • structure
    • wireframe
    • visual
  • web front-end
  • web back-end
  • ui / visual design

 

YAP SGlyphWiki Editor 功能簡介

http://glyphwiki.org/wiki/GlyphWiki:GlyphDesignMethod 官方英文簡介

 

http://glyphwiki.org/wiki/u65e5?action=edit 末級部件 點 「専用エディタで編集する」

進入後點英文介面。

筆劃編輯：

  • 點一個筆劃(日第一豎筆)，可以選筆劃類別：(straight line, curve, bend line ,etc)
  • 每種筆劃有不同的head 和 tail 可選。
  • head/tail 設定決定了筆劃的修飾(起筆、收筆)以及和其他筆劃的連繫。

字框編輯：

 

其他功能

按 Freedraw 可以用手繪方式寫字，系統會自動產生合適的筆劃。

  • 實作：應該是用 Path Simplification ，先把輸入的很多點轉成2~4個控制點。再找出最可能的筆劃。

 

技術規劃

前端：

 

  • CAASI HKAGE/engine 已經實作了輸出 SVG 的工具， 剎那工坊的 kzy 專案藉此完成了字型繪製。

 

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

 

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

 

  • YAP S此編輯器必須很容易嵌入，在任何網頁或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 取得的應用例(如古書某一頁)。
  • CAASI H目前有兩個可能的方向，一是在 server 展開所有的 link （99 開頭的部件），成末級部件，編輯器只要 request 一次就好。或者在編輯器 pipeline request ，減少 request 次數，例如 `https://server/glyph/?json[]=u8279-03&json[]=u660e` 。
  • YAP Sdatabase engine: 未決定。(Redis ? LY 則建議 http://www.rethinkdb.com/ )
  • YUAN C目前已經用 redis 先弄了一個：https://github.com/g0v/kage.json/commit/4c3a8f064497e9f325f955267bfd62b88b161283

 

CAASI H線條種類與頭尾形狀

  • 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

 

    ET B成果展示（規劃文件、雛形/草稿、原型/初稿、正式發佈/完稿）