CoreTextを使用したiOSの縦書き表示 及び フォントの仕組みに関する自主研究発表資料です。

1. i O Sで 縦 書 き
CoreText,Font,Glyph
2013/12/13

2. Agenda
1. 縦書きの要件整理
2. CoreTextでの縦書き実装方法
3. Fontの内部情報と縦書き実現の仕組み
4. まとめ

3. 1.縦書きの要件整理

4. あ
の
イ
ー
ハ
ト
ー
ヴ
ォ
の
す
き
オ
市
、
郊
外
の
ぎ
ら
ぎ
ら
ひ
か
と
お
っ
た
風
、
夏
で
も
底
に
冷
た
さ
を
も
つ
青
い
そ
ら
、
う
つ
く
し
い
森
で
飾
ら
れ
た
モ
リ
ー
る
草
の
波
。
（
宮
沢
賢
治
）
あ
の
イ
ー
ハ
ト
ー
ヴ
ォ
の
す
き
オ
市
、
郊
外
の
ぎ
ら
ぎ
ら
ひ
か
と
お
っ
た
風
、
夏
で
も
底
に
冷
た
さ
を
も
つ
青
い
そ
ら
、
う
つ
く
し
い
森
で
飾
ら
れ
た
モ
リ
ー
る
草
の
波
。
（
宮
沢
賢
治
）
縦書きレイアウト
＋横書きグリフ
縦書きレイアウト
＋縦書きグリフ

5. あ
の
イ
ー
ハ
ト
ー
ヴ
ォ
の
す
き
オ
市
、
郊
外
の
ぎ
ら
ぎ
ら
ひ
か
と
お
っ
た
風
、
夏
で
も
底
に
冷
た
さ
を
も
つ
青
い
そ
ら
、
う
つ
く
し
い
森
で
飾
ら
れ
た
モ
リ
ー
る
草
の
波
。
（
宮
沢
賢
治
）
あ
の
イ
ー
ハ
ト
ー
ヴ
ォ
の
す
き
オ
市
、
郊
外
の
ぎ
ら
ぎ
ら
ひ
か
と
お
っ
た
風
、
夏
で
も
底
に
冷
た
さ
を
も
つ
青
い
そ
ら
、
う
つ
く
し
い
森
で
飾
ら
れ
た
モ
リ
ー
る
草
の
波
。
（
宮
沢
賢
治
）
縦書きレイアウト
＋横書きグリフ
縦書きレイアウト
＋縦書きグリフ

6. 定義
引用：Unicodeの基礎知識-http://marigold.sakura.ne.jp/devel/unicode/basics.html
• グリフイメージ(Glyph image)
何らかの表示媒体（コンピュータのディスプレイや紙などの）上に描
いたグリフ表現の具体的な画像．
• グリフ(Glyph)
(1)1個以上のグリフイメージを表現する抽象形式．(2)単にグリフイ
メージの同義語としてグリフという語を使う場合もある．Unicodeに
おいては，ある文字を具体的な画像表現に直す場合に，複数個のグリ
フを使ってもよいことになっている．描画エンジンが，複数のグリフ
を組み合わせ，適切な位置に配置することで特定の文字の画像表現を
作り出すことがありうる.
• フォント(Font)
文字の視覚的表現のために使われるグリフを集めたもの．フォントは
たいていの場合，大きさ，傾き，太さ，ヒゲのあり・なしといった変
数と関連付けられていて，これらの変数に特定の値を与えると，グリ
フの具体的な画像表現の集合が得られる．

7. 余談）文字コードとグリフは一対一対応していない
U+7BB8 U+7BB8
U+3001 U+FE11
U+E0101 U+E0100
CID+3384 CID+7775

8. 縦書きの必要要件
1. 縦書きのレイアウトにすること
• 文字方向は上から下、行は右から左に配置
2. 縦書き用のグリフを使うこと
Option. 縦書き用のカーニングとか

9. 2.CoreTextでの縦書き実装方法

10. iOSで縦書きが可能になるまでの歴史
• Mac OS 8.5：CoreTextが採用される。(QuickDraw/ATSUIから置き換え)
→iOSに移植
• iOS3.2 : CoreTextのAPIが使用可能に！
→しかし、縦書きはサポートされていなかった（らしい）。
kCTVerticalFormsAttributeNameが実装されていなかった
• iOS4.3：縦書きがサポートされた！
→しかし、バギーだった（らしい）。
縦書きグリフが使われない等。
Core Textで縦書きを - Okanoyou Today
http://app.m-cocolog.jp/t/typecast/66444/14986/65138205
CoreTextのはなし – Yusuke Ito
https://speakerdeck.com/yusukeito/coretext
• iOS5以降：縦書きの実装がまともになった！！ ←いまここ

11. UIView drawRectで描画する
1. 属性付文字(NSAttributedString) を生成
縦書きグリフの使用を指定
2. CTFrameを生成し、属性付文字を設定
縦書きレイアウトの指定
3. 座標を反転
原点左下(CoreGraphics) →原点左上
4. 描写
Cf. CoreTextの構造

12. - (void)drawRect:(CGRect)rect
{
NSMutableAttributedString *attrStr =
[[NSMutableAttributedStringalloc]initWithString:[self getText]];
[attrStr addAttribute:NSFontAttributeName
value:[UIFont fontWithName:@"HiraMinProN-W3" size:18.0]
range:NSMakeRange(0, attrStr.length)];
[attrStr addAttribute:NSVerticalGlyphFormAttributeName
value:[NSNumber numberWithInteger:1]
range:NSMakeRange(0, attrStr.length)];
UIViewのdrawRectで描画する

13. // フレーム(CTFrame)の生成
CTFramesetterRef framesetter =
CTFramesetterCreateWithAttributedString((__bridge
CFAttributedStringRef)attrStr);
// 文字レイアウト方向属性の設定
NSDictionary* layoutAttrDict = [NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithInt:
kCTFrameProgressionRightToLeft],
kCTFrameProgressionAttributeName,
nil];
CGPathRef framePath = [[UIBezierPath bezierPathWithRect:rect] CGPath];
CTFrameRef frame = CTFramesetterCreateFrame(
framesetter,
CFRangeMake(0, attrStr.length),
framePath,
(__bridge CFDictionaryRef)layoutAttrDict);

14. CGContextRef context = UIGraphicsGetCurrentContext();
// 座標を上下反転
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSaveGState(context);
// CoreTextの描画
CTFrameDraw(frame, context);
CFRelease(frame);
CFRelease(framesetter);
}

15. http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html
（注意）縦書きと横書きでoriginが変わる
CoreTextで取得可能な個別の文字位置/大きさの情報

16. 3. フォントの内部情報と縦書き実現の仕組み

17. 引用：狩野宏樹（株式会社イワタ）『フォントのしくみ』

18. フォントの内部情報
• OS/2
• グリフの幅・高さ
• Cmap(Character Map)
• 文字コードとグリフ(GID/CID)と対応情報
• GSUB(Glyph Substitution)
• グリフの置き換えの指示情報
• タグで管理(vert/liga/jis83…)
• GPOS(Glyph Positioning)
• グリフの位置の指示情報
• タグで管理(kern/vkrn/…)
参考：http://www.morisawa.co.jp/font/about/knowledge/format/ot_ex.html

19. 引用：狩野宏樹（株式会社イワタ）『フォントのしくみ』

20. 引用：狩野宏樹（株式会社イワタ）『フォントのしくみ』

21. フォントの情報を実際に見てみる
• 使用ソフト
• OTMaster Light 2.0 （Mac/Windows）
グリフ編集ソフト（有料）の評価版
http://www.fontmaster.nl/english/downloads.html
Cf.類似ソフト：
• FontForge
グリフ編集ソフト(OpenSource)
http://fontforge.org/

24. ヒラギノ明朝（HiraMinProN-W3） - Apple Japan 1-5

25. 拡大

26. GSUB

34. GPOS

37. このように、フォント内部には適切な表示を行うために
数多くの情報を持っている。
ただし、
情報をどのように使うかは、OS/アプリの実装
に委ねられている。

38. 4. まとめ

39. • 高品質なフォントは、収録グリフ（字形）が多
いだけでなく、美しい字組を行うための情報が
数多く収められている。
• ただし、フォントの情報をどのように使うかは、
OSやアプリの実装(iOSの場合はCoreText)に
委ねられている。
• iOS(CoreText)の場合、縦書きレイアウトと縦
書きグリフの使用には対応している。個別の字
送り(GPOS)等、対応していないものもある。
必要な場合は、アプリ側で実装する必要がある。

40. その他 参考文献
• 狩野宏樹（株式会社イワタ）『フォントのしくみ』
http://www.iwatafont.co.jp/news/img/about_font.pdf
• DTPの勉強会 第3回「フォント」（書体の研究・文字コードとフォン
ト・グリフ・文字化け・異体字）動画・スライドデータ
https://www.ddc.co.jp/estore/cgi/item/start.cgi?m=DetailViewer&k=detail&c=11
&n=247&mod=TileViewer&s=12&w=descend&u=9&uni=9&search%3A14%3Af=&
search%3A14%3At=
• HDMT Journal Vol008
フォントとコードのはなし『第四回 CoreTextで描写する(1)』 (電子書籍)
• yusuga/ CoreTextSample
https://github.com/yusuga/CoreTextSample