Submit Search
Upload
iOSで縦書き
•
4 likes
•
4,316 views
Hashimoto Shogo
Follow
CoreTextを使用したiOSの縦書き表示 及び フォントの仕組みに関する自主研究発表資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 40
Download now
Download to read offline
Recommended
Chinese and cantonese, language or dialect
Chinese and cantonese, language or dialect
Will Logsdon
Taking the critics to task
Taking the critics to task
Fariba Chamani
Aspect Of Speaking Skill.Pdf
Aspect Of Speaking Skill.Pdf
Daphne Smith
Learning theories and approaches
Learning theories and approaches
ffffunes
L1 interference
L1 interference
Khawaja Shafique
Lexical bundles
Lexical bundles
Vasundhara Rawat
Language testing I by my lecture
Language testing I by my lecture
Nurul Faradillah
Teaching English As A Foreign Language
Teaching English As A Foreign Language
emmafox
Recommended
Chinese and cantonese, language or dialect
Chinese and cantonese, language or dialect
Will Logsdon
Taking the critics to task
Taking the critics to task
Fariba Chamani
Aspect Of Speaking Skill.Pdf
Aspect Of Speaking Skill.Pdf
Daphne Smith
Learning theories and approaches
Learning theories and approaches
ffffunes
L1 interference
L1 interference
Khawaja Shafique
Lexical bundles
Lexical bundles
Vasundhara Rawat
Language testing I by my lecture
Language testing I by my lecture
Nurul Faradillah
Teaching English As A Foreign Language
Teaching English As A Foreign Language
emmafox
The nature of learner language
The nature of learner language
Intan Sulistianto
PPT_Testing Listening_Claudia Cavada
PPT_Testing Listening_Claudia Cavada
Claudia Cavada Cuevas
Suggestopedia, power point
Suggestopedia, power point
diah Cwek Tauruz
Task based language teaching
Task based language teaching
Chintia Wardhani
Phonetics and phonology
Phonetics and phonology
Chocknews
The nature of learner language (rod ellis
The nature of learner language (rod ellis
Vanilaa Tata
English for Specific Purposes ESP
English for Specific Purposes ESP
otman-22
Computational linguistics
Computational linguistics
1101989
8 Major Trends in the Global ELT Field
8 Major Trends in the Global ELT Field
Phung Huy
Community language learning
Community language learning
Aytekin Aliyeva
Past, Present, and Future of CALL
Past, Present, and Future of CALL
Sami Khalil
TEACHING ENGLISH AS A FOREIGN LANGUAGE
TEACHING ENGLISH AS A FOREIGN LANGUAGE
Tiny Mu
Chapter 3(designing classroom language tests)
Chapter 3(designing classroom language tests)
Kheang Sokheng
The Role of Error Analysis in Teaching and Learning of Second and Foreign Lan...
The Role of Error Analysis in Teaching and Learning of Second and Foreign Lan...
Bahram Kazemian
Hinglish
Hinglish
nvanderg
Integrating Skills Growing Talents
Integrating Skills Growing Talents
Alex Duque
Chapter 2
Chapter 2
Sungwoo Kim
How to Use Corpora in Language Teaching
How to Use Corpora in Language Teaching
CALPER
History of the term applied linguistics
History of the term applied linguistics
Aseel K. Mahmood
Second language teaching methods
Second language teaching methods
Jaziel Romero
More Related Content
What's hot
The nature of learner language
The nature of learner language
Intan Sulistianto
PPT_Testing Listening_Claudia Cavada
PPT_Testing Listening_Claudia Cavada
Claudia Cavada Cuevas
Suggestopedia, power point
Suggestopedia, power point
diah Cwek Tauruz
Task based language teaching
Task based language teaching
Chintia Wardhani
Phonetics and phonology
Phonetics and phonology
Chocknews
The nature of learner language (rod ellis
The nature of learner language (rod ellis
Vanilaa Tata
English for Specific Purposes ESP
English for Specific Purposes ESP
otman-22
Computational linguistics
Computational linguistics
1101989
8 Major Trends in the Global ELT Field
8 Major Trends in the Global ELT Field
Phung Huy
Community language learning
Community language learning
Aytekin Aliyeva
Past, Present, and Future of CALL
Past, Present, and Future of CALL
Sami Khalil
TEACHING ENGLISH AS A FOREIGN LANGUAGE
TEACHING ENGLISH AS A FOREIGN LANGUAGE
Tiny Mu
Chapter 3(designing classroom language tests)
Chapter 3(designing classroom language tests)
Kheang Sokheng
The Role of Error Analysis in Teaching and Learning of Second and Foreign Lan...
The Role of Error Analysis in Teaching and Learning of Second and Foreign Lan...
Bahram Kazemian
Hinglish
Hinglish
nvanderg
Integrating Skills Growing Talents
Integrating Skills Growing Talents
Alex Duque
Chapter 2
Chapter 2
Sungwoo Kim
How to Use Corpora in Language Teaching
How to Use Corpora in Language Teaching
CALPER
History of the term applied linguistics
History of the term applied linguistics
Aseel K. Mahmood
Second language teaching methods
Second language teaching methods
Jaziel Romero
What's hot
(20)
The nature of learner language
The nature of learner language
PPT_Testing Listening_Claudia Cavada
PPT_Testing Listening_Claudia Cavada
Suggestopedia, power point
Suggestopedia, power point
Task based language teaching
Task based language teaching
Phonetics and phonology
Phonetics and phonology
The nature of learner language (rod ellis
The nature of learner language (rod ellis
English for Specific Purposes ESP
English for Specific Purposes ESP
Computational linguistics
Computational linguistics
8 Major Trends in the Global ELT Field
8 Major Trends in the Global ELT Field
Community language learning
Community language learning
Past, Present, and Future of CALL
Past, Present, and Future of CALL
TEACHING ENGLISH AS A FOREIGN LANGUAGE
TEACHING ENGLISH AS A FOREIGN LANGUAGE
Chapter 3(designing classroom language tests)
Chapter 3(designing classroom language tests)
The Role of Error Analysis in Teaching and Learning of Second and Foreign Lan...
The Role of Error Analysis in Teaching and Learning of Second and Foreign Lan...
Hinglish
Hinglish
Integrating Skills Growing Talents
Integrating Skills Growing Talents
Chapter 2
Chapter 2
How to Use Corpora in Language Teaching
How to Use Corpora in Language Teaching
History of the term applied linguistics
History of the term applied linguistics
Second language teaching methods
Second language teaching methods
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/
22.
23.
24.
ヒラギノ明朝(HiraMinProN-W3) - Apple
Japan 1-5
25.
拡大
26.
GSUB
27.
28.
29.
30.
31.
32.
33.
34.
GPOS
35.
36.
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
Download now