SVGフォントを使った外字表現
2011年1月27日

W3C SVG WG 藤沢 淳
fujisawa.jun@canon.co.jp
外字とは何か


外字のカテゴリ






JIS X 0208に含まれない表外字(絵文字など)
同じ符号位置を持つが字形の異なる異体字
符号位置を持たない文字やグラフィックイメージ

外字に対するニーズ変化





昔の...
外字処理の課題


プライベートコードの問題







既存の符号位置を流用した外字フォントによる文字化け
Unicode私用領域の利用による相互運用性の低下
符号位置のない文字の表示には恣意的な符号が必要
電子政府や電子出版で...
HTML5とWebフォント


HTML5の概要






EPUB 3.0で採用予定のHTMLの10年振り
の新バージョン(2011年にLast Call予定)
www.w3.org/TR/html5/
広義のHTML5はHTML5...
SVGとSVGフォント


SVGの概要






PDF相当の描画機能とFlash相当のアニメー
ション機能を備えたベクトルグラフィック形式
www.w3.org/TR/SVG/
主要なWebブラウザとEPUB電子書籍リーダ
が対応...
SVGフォントの埋込み


SVGフォントの定義






’font’要素で全体、’glyph’
要素で個々のグリフを定義
’d’属性にベジェ曲線を記述
’unicode’属性に符号位置
を指定(符号列を使用可能)

2つの埋込み...
既存フォントの拡張


SVG外字の追加







@font-faceルールを複数
使用して既存フォントに外字
を追加定義
’unicode-range’プロパティ
で適用符号範囲を指定
後で定義したルールが優先

拡張フォント...
絵文字とSVGフォント


SVGフォントを使ったソリューション






カラーやアニメーションなどのSVG描画機能を活用したスケー
ラブルなSVG絵文字フォントを提供
既存フォントをSVG絵文字フォント
で拡張して利用
Unic...
異体字とSVGフォント


SVGフォントを使ったソリューション






異体字未対応のシステムで必要な異体字のみを提供
既存フォントをSVG異体字フォントで拡張して利用
異体字のUnicode属性値にはIVSシーケンスを設定

...
符号のない外字とSVGフォント


SVGフォントを使ったソリューション






書体ごとにSVG外字フォントを提供([例] IPAMincho.svg)
外字の識別名でフォントファミリを定義([例] HiraganaNO)
外字...
Webブラウザの対応状況


Webフォントの次世代標準フォーマットはWOFF


外字処理機能の強化にはSVGフォント対応も重要
Webブラウザ

TrueType
OpenType

EOT

WOFF

IE

IE9

a

IE9...
Upcoming SlideShare
Loading in …5
×

SVGフォントを使った外字表現

1,291 views
1,152 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,291
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

SVGフォントを使った外字表現

  1. 1. SVGフォントを使った外字表現 2011年1月27日 W3C SVG WG 藤沢 淳 fujisawa.jun@canon.co.jp
  2. 2. 外字とは何か  外字のカテゴリ     JIS X 0208に含まれない表外字(絵文字など) 同じ符号位置を持つが字形の異なる異体字 符号位置を持たない文字やグラフィックイメージ 外字に対するニーズ変化     昔のベンダー定義文字(NEC特殊文字やIBM 拡張文字)はUnicode標準の一部として共通化 携帯電話の絵文字もUnicode 6.0に収録済 電子政府の戸籍データ処理では異体字が課題 EPUBなどの電子出版では出版物に依存して ごく少数出現する符号化できない文字が課題
  3. 3. 外字処理の課題  プライベートコードの問題      既存の符号位置を流用した外字フォントによる文字化け Unicode私用領域の利用による相互運用性の低下 符号位置のない文字の表示には恣意的な符号が必要 電子政府や電子出版では幅広いシステム間でネットワーク を介した精度の高い日本語データ交換が必要 フォントデータサイズと実装コストの問題    ごく少数の外字に対応するためにシステムの 文字集合を拡大することは容易ではない 携帯機器へのフルセットの多国語フォント データの搭載はコスト的にも困難 異体字への対応には大きな実装コストが必要
  4. 4. HTML5とWebフォント  HTML5の概要    EPUB 3.0で採用予定のHTMLの10年振り の新バージョン(2011年にLast Call予定) www.w3.org/TR/html5/ 広義のHTML5はHTML5/CSS/SVG/WOFF から構成されるOpen Web Platformを指す Webフォントとは    CSSフォント機構(@font-face)によりWeb ブラウザからダウンロード表示可能なフォント 対応フォントフォーマットはOpenType、SVG フォント、WOFFフォントなど EPUB電子書籍のパッケージにも格納可能
  5. 5. SVGとSVGフォント  SVGの概要    PDF相当の描画機能とFlash相当のアニメー ション機能を備えたベクトルグラフィック形式 www.w3.org/TR/SVG/ 主要なWebブラウザとEPUB電子書籍リーダ が対応済(HTML5対応の一部) SVGフォントとは    ベジェ曲線で定義されたグリフにTrueTypeフォント相当の メタデータを加えたSVGベースのフォントフォーマット カラー、グラデーション、アニメーションなど任意のSVG描画 機能を利用したスケーラブルなフォント定義が可能 OpenTypeフォントの高度な機能やヒンティングには未対応
  6. 6. SVGフォントの埋込み  SVGフォントの定義     ’font’要素で全体、’glyph’ 要素で個々のグリフを定義 ’d’属性にベジェ曲線を記述 ’unicode’属性に符号位置 を指定(符号列を使用可能) 2つの埋込み方法   HTMLファイルにSVG フォントをインライン記述 ’font-face-uri’要素で HTMLファイルからSVG フォントファイルをリンク参照 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <defs><font horiz-adv-x="500"> <font-face font-family="Vera" units-per-em="1000"/> <glyph unicode="S" glyph-name="S" d="…"> <glyph unicode="V" glyph-name="V" d="…"> <glyph unicode="G" glyph-name="G" d="…"> </font></defs> </svg> <defs><font horiz-adv-x="500"> <font-face font-family="Vera"> <font-face-src> <font-face-uri xlink:href="Vera.svg#f"/> </font-face-src> </font-face> </font></defs>
  7. 7. 既存フォントの拡張  SVG外字の追加     @font-faceルールを複数 使用して既存フォントに外字 を追加定義 ’unicode-range’プロパティ で適用符号範囲を指定 後で定義したルールが優先 拡張フォントの利用   既存のシステムフォントと と区別なく利用可能 マルチウェイトフォントや複合 フォントも同様に定義可能 @font-face { font-family:Helvetica; src:local(Arial); } @font-face { font-family:Helvetica; src:url(HelveticaEx01.svg#f); unicode-range:U+E758; } @font-face { font-family:Helvetica; src:url(HelveticaEx02.svg#f); unicode-range:U+E759; } <html> <body style="font-family:Helvetica;"> <div>SVG </div> </body> </html>
  8. 8. 絵文字とSVGフォント  SVGフォントを使ったソリューション     カラーやアニメーションなどのSVG描画機能を活用したスケー ラブルなSVG絵文字フォントを提供 既存フォントをSVG絵文字フォント で拡張して利用 Unicode 6.0未対応のシステム でも正規の符号が利用可能 Unicode 6.0の絵文字    日本の携帯電話由来の722文字 ケータイ小説の表示に不可欠 従来のフォントを超える表現力を 要求(現状はビットマップ形式)
  9. 9. 異体字とSVGフォント  SVGフォントを使ったソリューション     異体字未対応のシステムで必要な異体字のみを提供 既存フォントをSVG異体字フォントで拡張して利用 異体字のUnicode属性値にはIVSシーケンスを設定 [例] 葛飾区と   城市 符号位置はどちらも U+845Bに統合 異体字セレクタで区別 U+E0101 U+E0100 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <defs> <font horiz-origin-x="0" horiz-adv-x="1000" id="IPAMincho"> <font-face font-family="IPAMincho" units-per-em="1000" ascent="880" descent="120"/> <glyph unicode="葛󠄀" glyph-name ="Katsura" vert-origin-y="786" vert-adv-y="870" d="M505 683 Q512 642 512 585…"/> </font> </defs> </svg>
  10. 10. 符号のない外字とSVGフォント  SVGフォントを使ったソリューション     書体ごとにSVG外字フォントを提供([例] IPAMincho.svg) 外字の識別名でフォントファミリを定義([例] HiraganaNO) 外字のUnicode属性値には下駄記号(U+3013)を常に設定 HTMLからの参照    外字の表示位置に 下駄記号を記述 外字に対応するフォ ントファミリを指定 該当グリフがない時 は下駄文字が表示 <html xmlns="http://www.w3.org/1999/xhtml"> <head><style> @font-face { font-family:HiraganaNO; src:url("IPAMincho.svg#HiraganaNO"); } </style></head> <body> <div style="font-size:100px;">SVG外字 <span style="font-family:HiraganaNO;"> 〓</span>表示 </div> </body> </html>
  11. 11. Webブラウザの対応状況  Webフォントの次世代標準フォーマットはWOFF  外字処理機能の強化にはSVGフォント対応も重要 Webブラウザ TrueType OpenType EOT WOFF IE IE9 a IE9 Safari Firefox Opera Chrome a a a a WebKit SVGフォント a a a a a a

×