Fontaine: Web 文字画像化と行内レイアウトシステム

平成20年度
慶應義塾大学
卒業論文
Fontaine: Web文字画像化と行内レイアウトシステムの開発
環境情報学部4年
松田 聖大
小川克彦研究会
2009年1月
卒業論文　2008年度（平成20年度）
Fontaine: Web文字画像化と行内レイアウトシステムの開発
論文要旨
Web上の文字の外観は閲覧環境に左右され、制作者の意図するフォントを自由に用
いることはできない。書体を重要視する制作者たちは、局所的に文字画像を用いるこ
とで体裁を保ってきた。しかし、CMSのように更新頻度の高い動的なコンテンツを扱
う手法が普及してきた今では、これまでの手作業による文字画像の作成は難しい状況
にある。本研究は、以上の問題を解決するため、文字画像化と行内レイアウトを手段
としたシステムFontaineを提案する。これにより次の4項目の実現を目指す。(1)閲覧
環境にかかわらず文字が意図したフォントで表示されること、(2)可変な表示領域で通
常の文字と同等にレイアウトされること、(3)既存のWebモデルに対して透過的である
こと、(4)文字情報としてのユーザビリティを保つこと。本論では、提案する文字画像
利用モデルと手法､システムの設計と動作およびその実験･検証結果についての報告を
行う。
キーワード
インタフェース、ウェブデザイン、フォント埋め込み、タイポグラフィ、画像処理
慶應義塾大学 環境情報学部4年
松田 聖大
ii
Abstract of Graduation Thesis Academic Year 2008
Fontaine: An Automated Font Image Generation
and Inline Typesetting System for Web
Summary
Because typography on the web depends on the environment of viewers, many web designers
have been used text images for typographic consistency. With the applications of dynamic
contents are spreading in recent days, it becomes difficult to make and embed text images into
HTML document by hand. This study proposes an automated font image generation and inline
typesetting system named Fontaine and its architecture, which aims for the realization of the
following requirements: (1) cross-brower consistency and compatibility of typographic features,
(2) metrical layout within mutable viewports, (3) transparency to the existing web model, (4)
availability of literal information. In this paper, we will describe our proposed application of text
images, the detailed implementation of Fontaine, and the result of some practical experiments in
its performance.
Keywords
human interface, web design, font embedding, typography, image processing
Keio University, Faculty of Environment and Information Studies
Shota Matsuda
iii
目次
第1章
はじめに
1.1
Webフォントの現状と課題
1.2
文字画像の利点と問題
第2章
2.1
既存のWebフォント埋め込み技術と研究
既存の技術と研究
第3章
本研究のねらい
3.1
提案手法の説明
3.2
既存の技術との比較
第4章
提案手法の詳細
4.1
文字画像生成と行内レイアウト ̶ 文字として振る舞う画像の実現
4.2
ユーザビリティの確保 ̶ 閲覧者から見た使い易さの検討
4.3
利用透過性とCSS拡張属性 ̶ Web制作者から見た使い易さの検討
第5章
Fontaine: システムの開発
5.1
サーバ側プログラム
5.2
クライアント側プログラム
第6章
おわりに
6.1
研究成果のまとめ
6.2
今後の課題
iv
第1章　はじめに
1.1
Webフォントの現状と課題
現在、Web上の書体は閲覧環境に任されている。それは、文字をどのように表示す
るかについて閲覧者側に多くの自由度を与えているためだ。CSSではfont-family属性を
用いてフォントの指定を行うが、これはフォントの優先順位を列挙するものであっ
て、絶対的な指定ではない。これはフォント自体の通信が一般化していない状況下で
多種の閲覧環境に対応するためには良策と言えるだろう。しかしながら一方で、細か
なデザイン上の指定が行えなかったり、意図したように表示されないという問題も生
じる。これはCSSの標準化を行ったW3Cも認める点である[1]。
この閲覧環境に依存した仕様は、「最も普及していて誰でも持っている書体」を使
用しなければならないという制約をつくり出していると言える。
1.2
文字画像の利点と問題
文字画像が使われる理由
文字の書体は読みやすさや文章の受け取り方に関わる、デザイン上重要な要素であ
る[3][4] 。書体を重要視するWeb制作者たちは、局所的に文字画像を用いることで
Webフォントに一貫性と自由度を与えてきた。画像編集ソフトを用いて対応する文字
を好ましい書体とタイプセットにて描画し、適当な寸法で切り抜き、適当なフォー
マットで保存する。そしてHTMLにimgタグを挿入する。文字画像を用いることは閲
覧環境への依存性をほとんど無視することができる。また、 CSSには制定されていな
い柔軟なタイプセッティングも扱えるため、広く見受けられる方法である。
文字画像の利用にはもう一つの理由もある。それはアンチエイリアスを施した美し
いレンダリングを保てることにある。AdrianFrutigerが導き出した、判別性Legibility、
可読性Readability、誘目性Inducibilityという活字が備えるべき規範[7]は、スクリーン
上のビットマップフォントにも受け継がれ、8･9･10･12･14･18･24ppemといった基準サ
1
イズが一般化し、グリッド吸着の技術も作られるようになった。QuartzやClearTypeな
どのアンチエイリアシング技術が普及したことで、この理由での文字画像化の意味は
薄れたが、依然アンチエイリアシングを使わないで表示するブラウザも少なくないの
である。
図1.1: 文字画像の使用例（ハイライト部が文字画像である）
文字画像の問題
一般的なWebページはHTMLとCSSから構成される。この書類構造（HTML）と装
飾（CSS）の分離によって、構造を変えるときにいちいち「何ポイントの何色」といっ
た具体的なビジュアルに気を配らずに済むようになった。変更を加えるときは「その
文章がどのような意味をもつか」を扱えばよいし、逆もまた然りである。
しかしながら、近年普及してきたBlogを含める広義のCMSは、テンプレートを巧み
に操ることで書類内容と構造を分離し、更なる抽象化を達した。今やWebページの更
新･追加は大した作業量を伴うものではなくなったし、日に数回更新されるものも少な
くない。手作業での文字画像の作成は、前述した更新速度の速いWebでは作業量の面
2
から破綻する。また、内容と構造、装飾の分離と抽象化の恩恵を逃すこととなる。ま
た、そもそも文字でないのだから、通常の文字と混在したレイアウトをはじめ、コ
ピー･ペーストやページ内検索、文字サイズ変更などのユーザビリティの面でも問題を
抱えている。
3
第2章　既存のWebフォント埋め込み技術と研究
2.1
既存の技術と研究
多言語表示を目的とした研究
WebフォントをHTMLへ埋め込む研究の多くは多言語表示を目的としたものであ
る。Sakaguchiらは言語環境に依存しない多言語表示を目的として、MHTMLと文字画
像を用いたWebフォントの埋め込みを提案している[13][14]。MIMEマルチパートを利
用してHTML書類と文字画像の通信をカプセル化すると、 HTTPリクエストのオー
バーヘッドが最小限で済む利点がある。しかしながらMHTMLをサポートするブラウ
ザが限定的であるため、広くは用いられない手法である。多言語表示を目的とした場
合には少しでも閲覧できる環境が多ければよい。そのため、異なる閲覧環境の間で書
体が一貫性を持つことを重視したものは少なくなる。
WEFTと@font-face規則
MicrosoftのWEFT（WebEmbeddingFontsTool）はOpenTypeフォント字体を部分的に
通信することでHTMLへのフォントの埋め込みを可能にした[11]。同様のものにCSS2
から標準化された@font-face規則[5]もある。これら2つの技術もまた対応するブラウ
ザが少なく、WEFTはInternetExplorer、@font-face規則はSafari上でのみ動作するのが
現状である。互換性が維持されなければ、それが保証される文字画像の代替にするこ
とは難しい。
しかしながら WEFT の問題はむしろ、タイプセッティングを閉鎖的なプラット
フォームの中に閉じ込めてしまい、その自由度を大きく失っている点にある。例えば
WEFTに字体の回転があらかじめ用意されていなければ、どうやっても字体を回転さ
せることはできない。Webは標準化、マルチメディア化、多様化が進み、表現の場と
しての役割も増してきている。ここで求められるタイポグラフィはプラットフォーム
によってパッケージ化された環境にあるべきではなく、文字通り「ソフト」であるべ
4
きであり、フォントに直接触れることができなければならない。
オープンソースのsIFR
一方、 InmanによるsIFR[6]はオープンソースで配布されている技術である。これ
は、あらかじめフォントを埋め込んだFlash書類をHTML上に配置する手法を用いてい
る。 Flashは広く浸透している仮想環境であり、ブラウザ互換性の面でも優れてい
る。HTMLの文字内容を自動的に取得し、 CSSの属性に従ったスタイルで表示すると
いう透過性も備えている。
ただしその表示領域は固定的であり、通常の文字との親和性が低い。つまり、可変
な領域を埋めるように文字をレイアウトしたり、文字との混在ができない。例えば、
ウィンドウサイズを変更しても行の改行位置は変わらないし、行の一部の文字だけ埋
め込みフォントを使うといった使い方はできない。
最大の問題点は、あらかじめフォントを埋め込まなければならないことにある。日
本語フォントのように字体数が数万になるフォントでは、例え文字領域を限定しても
容量が巨大になってしまう。優れた透過性と一貫性を備える一方で、多言語表示が難
しいのである。
5
第3章　本研究のねらい
以上に述べたWebフォントと文字画像の問題および既存の研究・技術から、本研究
の成果物であるFontaineが達成すべき事項を次にまとめる。
(1) 閲覧環境に関わらず意図するフォントで文字が表示される
(2) 可変な表示領域で通常の文字と同等にレイアウトされる
(3) 既存のWebモデルに対して透過性を持つ
(4) コピー・ペーストなど、文字情報としてのユーザビリティを保つ
これらを踏まえ、本章では本研究の提案手法について説明する。3.1節では文字画像
を利用する全体的なモデルを説明する。次に3.2節にて、第2章で取りあげた研究・技
術に対する本研究の利点と独自性について述べる。
3.1
提案手法の説明
Fontaineのモデル
本研究の提案手法にはサーバ・クライアントモデルを用いる。まず、HTMLの読み
込みが完了すると同時に、ブラウザ側プログラムがUserAgentを介してHTMLとCSSを
走査する。その後、CSSセレクタが指し示す要素内の文字内容と装飾を取得、サーバ
側スクリプトへ送信する。サーバ側スクリプトは要求された情報に基づいて、事前に
解析したフォントからメトリクスやアウトライン情報を取得、キャッシュを検索ある
いは文字画像を動的に生成し、そのURIを位置調整値（Marginaladjustments）ととも
に返信する。ブラウザ側プログラムは対応する文字列ノードを文字画像で置換し、位
置調整値を適用する。これら文字画像利用モデルの全体図を図3.1に示した。
このモデルでは、サーバからHTMLを返すすべての書類に適用し、既存のWebモデ
ルに対して透過的に処理を行う。また、HTMLソースを走査する検索エンジンや、ス
クリプトが動作しない携帯電話などでは通常の文字として認識されることになる。
6
第4章 提案手法の説明
本章では第3章の提案の具体的な手法について説明する。ただし語の定義や計算方
法は付録にて述べている。4.1節では行内レイアウトの意義と、基礎となる位置調整値
について述べ、4.2、4.3節にてユーザビリティと透過性の実現方法について触れる。
4.1
文字画像生成と行内レイアウト ̶ 文字として振る舞う画像の実現
ただ単に文字画像をHTML上に配置したとき、それは通常の文字とは異なるレイア
ウトが適用される。これは字体メトリクスを無視した、画像の境界のみによって配置
されるためである。行内レイアウトは文字画像に位置調整値を付加することで、通常
の文字と同様の振る舞いを実現する為のものである（図4.1）。行のレイアウト処理は
HTMLに則って行われるため、通常の文字との親和性が高い。
Without Adjustments
Adjustments Applied
(1)
(2)
(3)
図4.1: 行内レイアウトの効果
8
インライン整形文脈
HTML上では、通常の文字や行内要素（Inlineelement）、行内ブロック要素（Inlineblockelement）はインライン整形文脈（Inlineformattingcontext）に従ってレイアウトさ
れる。インライン整形文脈では、行ボックスは常に内包するボックスと同じ高さかそ
れ以上であり、行の高さは次の規則から決定される[5]。
1. The height of each inline box in the line box is calculated.
2. The inline boxes are aligned vertically according to their 'vertical-align' property.
3. The line box height is the distance between the uppermost box top and the lowermost box
bottom.
4. If the resulting height is smaller than the minimal height of line boxes for this block, as specified
by the 'line-height' property, the height is increased to be that minimal height.
また、文字の高さとlineHeightとの差の半分が文字の上下に加わる。もしlineHeightが
文字の高さよりも小さい場合は文字が行からはみ出ることになる。
位置調整値の算出
画像文字が以上のインライン整形文脈レイアウトに従う画像文字のHTML上におけ
る位置調整値（Marginal adjustments）の算出方法は以下の通りである。
まずCSSのmargin属性によって、文字画像のボックスを通常文字が作るサイズに揃
える。通常文字が作るボックスの高さは、使用する書体のascent:tとdescent:uの差、
つまり字体の論理境界の高さに一致する。ゆえに lineHeight:hが分かれば、margin属性
値が求まる。
topMargin =
h+t +u
+ ( vB0,n )2,1
2
rightMargin = ( lB0,n )1,2 ( vB0,n )1,2
bottomMargin =
ht u
+ ( vB0,n )2,2
2
leftMargin = ( vB0,n )1,1
次に、verticalAlign属性によって文字画像のbaselineを通常文字のそれに揃うように調
9
第5章　Fontaine: システムの開発
以上に述べた提案手法を実装したシステムFontaineを開発した。図5.1にシステム構
成図を示す。実装には次の環境を用いた。
Serverside program language: PHP 5.2.5 / Apache 2.0
Graphics engine: PECL Imagick extension 2.1.1 / ImageMagick 6.3.6
Font rasterize engine: FreeType 2.3.5
PHP framework: Zend Framework 1.6.2
Client program language: JavaScript 1.2 (equivalent)
Serverside Program
Client Program
PHP
JavaScript
Frontend
StyleSheetBundle
Fontaine Service
NodeIterator
TextSizeBeacon
Imagen
Collector
Generator
Receipt
String
Graphics
MediaInspector
Requester
Font
Color
Geom
Glyph
Stroke
Imagick
Transform
Length
Composite
Parser
Font
Format
Mapper
Coverage
Metrics
Profiler
Truetype
Cache
Data & IO
String
Charset
Collection
Pdo
Reader
Array
Writer
Stream
Zend Framework
Core
図5.1: システム構成図
11
5.1
サーバ側プログラム
Data&IOパッケージ
マルチバイト文字列操作、データベースと配列の抽象化やバイトストリーム入出力
を定義する基底パッケージである。特にフォントの解析に必要な種々の整数や固定小
数点の安定した読み込みを行う。
Fontパッケージ
フォントの解析や検索、実体化などを行うパッケージである。文字コードから字体
コードへの変換を行うFont::Mapperサブパッケージ、フォントが出力可能な文字集合
を参照するFont::Coverageサブパッケージ、行や字体のメトリクスをカプセル化する
Font::Metricsサブパッケージ、スタイルやPanoseClassification[8]などのフォント固有情
報を格納するFont::Profileサブパッケージを備える。
これらの集約であるFont::Formatインタフェースがフォーマット抽象化レイヤーの役
割を果たす。Font::CompositeインタフェースはFont::Formatの集約であり、合成フォン
トを表す。
Font::ParserサブパッケージはFont::Managerクラスがフォントファイルのヘッダ情報
を解析した後に呼び出され、フォーマットに合わせたFont::Cacheインスタンスを構築
し、ディスクに保存する。 Font::Managerは解析したフォントをデータベース化し、
フォントの固有情報からの検索を行う。
Graphicsパッケージ
長さを表すGraphics::Lengthクラスとアフィン変換行列Graphics::Transformクラスを
基盤とする解像度非依存描画パッケージである。色変換・構築を行うGraphics::Colorク
ラスと線変換･構築のGraphics::Strokeクラスを除いてグラフィックエンジンの抽象化が
可能である。字体はこの段階から物理量としての長さと文字情報を持ち、基本的なタ
イプセッティングを定義するGraphics::Stringによって表される。
12
Imagenパッケージ
画像生成処理を抽象化するパッケージである。リクエストの処理、画像のキャッシ
ングや画像生成を行い、クライアント側プログラムとの橋渡しをする。
まず、Imagen::Requestorインタフェースが任意の入力を受け付け、画像生成処理を正
規化したコンテナであるImagen::Receiptインスタンスを構築する。Imagen::Collectorイ
ンタフェースはImagen::Receiptのハッシュから画像キャッシュを検索する。対応する
画像が未生成であればImagen::ReceiptはImagen::Generatorインタフェースへ渡され、そ
れに基づいて画像を生成、結果をImagen::Collectorへ格納する。
5.2
クライアント側プログラム
TextSizeBeacon
ドキュメント読み込み完了と同時にbeaconとなる要素をHTML上に配置し、一定間
隔（100～500ms）で文字サイズを監視し、文字サイズの変更を検知するとイベントを
配信する。
MediaInspector
ブラウザがCSSの@media規則のどのメディアに属するかを調査する。
NodeIterator
指定された要素内の文字ノードを走査し、適用されたスタイルや文字情報と共に格
納する。
StyleSheetBundle
CSS拡張属性を認識するためのパッケージである。ドキュメント読み込み完了と同
時にHTMLに埋め込まれたCSSとリンクされた外部ファイルをHTTP経由で取得す
る。取得したCSSは直ちにLexerに通され、拡張属性値のみを格納する。同時にCSSセ
レクタからのHTML要素の検索、カスケーディング処理を行う。
13
第6章　おわりに
6.1
研究成果のまとめ
本研究では、Webフォントに一貫性を与え、文字画像にユーザビリティと透過性を
与える手法を提案した。まだまだフォントが無料で使えるわけではないが、開発した
FontaineはWebの書体に鮮やかさを与える手軽な手段になると考える。
6.2
今後の課題
しかしながら、すべてのブラウザがフォントの通信や高度なタイプセッティングを
サポートするのが本来的に健全な姿である。その意味でFontaineは過渡的なものだ。
Web上のタイポグラフィにはまだまだ開拓の余地がある。Webは幅が可変で縦方向
へ無限に続く特殊な紙面である。その可能性は定形紙へ印刷するそれと根本的に異
なってくるだろう。現在はまだ印刷技術で培われたタイポグラフィをそこに移行して
いる段階であり、今後はそれを解体・再構築するべきと考えている。
そこまで大きいことを言わずとも、多種のブラウザに対する互換性向上や、画像生
成速度の向上、画像であることの利点を活かすための機能追加など、細かな課題は依
然残っている。
14
本研究に関する発表
1. 松田聖大, 安村通晃, Fontaine:Web文字画像化と行内レイアウトシステムの開発,
情報処理学会第50回プログラミングシンポジウム, (2009)
15
謝辞
本研究を進めるにあたり、安村通晃先生、小川克彦先生、並びに安村研究会、小川
研究会の方々や杉本敏則君、神部達也君にご協力を頂いた。謹んで感謝申し上げる。
また本研究の成果物であるFontaineは、独立行政法人情報処理推進機構（IPA ）よ
り、2008年度上期未踏IT人材発掘･育成事業（未踏ユース）への採択・支援を受けて
開発したものである。PMとしてご指導とご助言を頂いた東京大学大学院竹内郁雄教授
をはじめとして、株式会社創夢の小林様、高橋様、また多くの未踏関係者の皆さまに
厚く感謝したい。
2009年1月
慶應義塾大学 環境情報学部4年
松田 聖大
16
参考文献
[1] Andersson, O., et al.: Scalable Vector Graphics (SVG) 1.1 Specification. At http://www.w3.org/
TR/SVG11/, 2003.
[2] Apple Computer, Inc.: TrueType Reference Manual. At http://developer.apple.com/textfonts/
TTRefMan/, 2002.
[3] Berlant, W.: Does Typography Affect Proposal Assessment?. In Communications of the ACM,
43(8), pp.24-25, 2002.
[4] Bernard, M., Liao, C.H. and Mills, M.: The Effects of Font Type and Size on the Legibility and
Reading Time of Online Text by Older Adults. In CHI '01 Extended Abstracts on Human
Factors in Computing Systems, pp.175-176, 2001.
[5] Bos, B., et al.: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. At http://
www.w3.org/TR/CSS21/, 2007.
[6] Davidson, M.: sIFR 2.0: Rich Accessible Typography for the Masses. At http://
www.mikeindustries.com/blog/sifr/, 2005.
[7] Frutiger, A.: 活字の宇宙. 朗文堂, 2001.
[8] Hewlett-Packard Corporation.: PANOSE Classification Metrics Guide. At http://
www.panose.com/ProductsServices/pan1.aspx, 1997.
[9] Hurst, N., Marriott, K. and Moulder, P.: Minimum Sized Text Containment Shapes. In
Proceedings of the 2006 ACM symposium on Document engineering, pp.3-12, 2006.
[10 Klein, M., Scheddin, M.S. and Spiekermann, E.: 欧文書体入門 Type & Typographers. 朗文
堂, 1992.
[11] Microsoft Corporation: Microsoft WEFT 3. At http://www.microsoft.com/typography/web/
embedding/weft3/, 2003.
[12] Microsoft Corporation: OpenType specification. At http://www.microsoft.com/typography/
otspec/, 2004.
17
[13] Sakaguchi, T., et al.: A Browsing Tool for Multi-lingual Documents for Users without Multilingual Fonts. In Proceedings of the first ACM international conference on Digital libraries 1996,
pp.63-71, 1996.
[14] Sakaguchi, T., et al.: A Multilingual Browser for WWW without Preloaded Fonts. In
Proceedings of International Symposium on Digital Libraries, No.4, pp.21-25, 1995.
[15] Shea, M.: Revised Image Replacement. At http://www.mezzoblue.com/tests/revised-imagereplacement/, 2008.
[16] Turner, D.: FreeType Glyph Conventions Version 2.1. At http://freetype.sourceforge.net/
freetype2/docs/glyphs/, 2000.
18
付録
用語の定義
A
ここでは文字画像生成と位置調整値の算出に用いた語の定義を述べる。これらは定
義が曖昧であり、扱う処理系によって異なることが多い。基本的にはFreeTypeにて用
いられている定義[16]に従うものだが、より行内レイアウトに適した定義にしてい
る。
字体メトリクス
字体メトリクス（Glyphmetrics）とは、字体を配置するのに必要な値の集合であり、
全ての字体それぞれが1つ以上持っている。それぞれの値はEM正方座標上にあり、
字体の始点が原点となる。次に字体メトリクスの値を定義する（図A.1）。
advance: 原点から次に続く字体の始点までの差分
lsb: 原点から字形の左端までの差分
rsb: 字形の右端から次に続く字体の始点までの差分
tsb: 字形の上端から原点までの差分
bsb: 原点から字形の下端までの差分
行メトリクス
行メトリクス（Linemetrics）とは、行を配置するのに必要な値の集合であり、 1つ
の書体が1つ以上持っている。図A.2に行メトリクスを図示する。
19
R
ci s 0 0 1 1 1
xcos ysin + 2 {w i vcos ( t + u ) sin }
=
1
ycos + x sin + {(t + u)(cos 1) v sin }
2
1
=
のとき
2
u y
1
= x (t + v + vi )
2
1
s =
1 よって要件が満たされる。また、 = にはascentとdescentが反転する。
C
のときには書字方向の逆転換、 = のとき
2
部分グリッド吸着
グリッド吸着（Grid-fitting）とは、9pxや14pxなどの小さなサイズの字形を明瞭にラ
スタライズするために用いられる技術である。例えば「m」という字形を表示すると
きには、書体にかかわらず 3本の足が分かれて表示されていなければ「 m 」なのか
「n」なのか認識しづらくなる。グリッド吸着を用いると3本の足が分かれるように字
形を変形させることができる。適切に作りこまれたグリッド吸着は字形の読みやすさ
を向上させる。
グリッド吸着の欠点
しかしながら、細かなディティールが与えられたフォントにグリッド吸着を行う
と、そのフォントの「面影」さえも失われる場合がある。このとき、文字は判別でき
るがフォントは判別できないという状況が生まれる。
図C.1では「M」の両足が過度に吸着している。ここからは本来の字形の左足が傾い
ていること、左右の足の太さが異なっていること、上下端に装飾が付いている等の
ディティールが失われている。ラスタライズしたのであるからディティールが失われ
23
るのは避けられないが、グリッド吸着によってその面影も失われ、フォントがserif体
であることまでも判別できなくなっている。
Grid-fitting in 7ppem
Glyph Outline
図C.1: グリッド吸着の例（Minion Bold, 7ppem）
グリッド吸着への対処
グリッド吸着は、描画する文字サイズのEM正方辺に存在するピクセルの数 (ppem:
pixelperem) を参照し、ピクセル座標の整数値に揃うように字形を変形する。TrueType
を例に挙げると、字形は2次ベジェ曲線で表現され、3つのアンカーポイント、つまり
bezier(t) = (1 t )2 a 0 + 2t (1 t )a1 + t 2a 2 (0 t 1)
で表現される a 0 、 a1 、 a 2 が±1-2pxの範囲で任意に整数化される。
ここで、描画するピクセル座標の変換を行う。ピクセル座標 P 上に描画されるサイ
ズ n のフォントを、 0ではない自然数 s と座標 P 上の x R 2 について sy = x を満たす
y R 2 が作る座標 S 上に、 s 倍したサイズでフォントの字形を取得する。座標 S 上で取
得した字形を s
1
倍で縮小アフィン変換し、座標 P 上に描画する。描画される字形は
2
1px四方に s 個のグリッド吸着が行われた状態になる。
部分グリッド吸着は通常のダウンサンプリングのような負荷はかからないが、s倍さ
れた座標の割り当てに必要なメモリ量は消費される。品質と速度のバランスを検証し
たところ、およそ s = 4 の部分グリッド吸着が望ましいと思われる。 s = 4 の部分グリッ
ド吸着を行った出力結果を図C.2に示す。左右の足の太さの違い、上下端の装飾など
のディティールは、その面影を比較的残していると言える。
24
Subgrid-fitting in 7ppem
Glyph Outline
図C.2: 部分グリッド吸着の例（Minion Bold, 7ppem）
25