Top Banner
Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography Muthu Nedumaran & Norbert Lindenberg © Muthu Nedumaran & Norbert Lindenberg 2017
54

Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Jul 12, 2018

Download

Documents

duongtuong
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Creating fonts for Brahmic scripts with OpenType and

Apple Advanced TypographyMuthu Nedumaran & Norbert Lindenberg

© Muthu Nedumaran & Norbert Lindenberg 2017

Page 2: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Agenda

• What are Brahmic scripts?

• Creating glyphs

• Unicode and fonts

• OpenType shaping

• Apple Advanced Typography shaping

2

Page 3: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

What are Brahmic scripts?

• Scripts derived from Brahmi (~250 BCE)

• India: !वनागरी, বাংলা িলিপ, த"#, …

• Around India: !ංහල, བོད་ཡིག, …

• SE Asia: ไทย, !မန$မ%, ꦲꦏ꧀ꦫꦗꦮ, …

• East Asia: Siddham

3

Page 4: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Brahmic scripts

Note: The following pages use a font that exhibits properties common to many Brahmic scripts but doesn’t fully represent any of them.

ေြသ္တာ

4

Page 5: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Brahmic scripts

• Abugida: consonants have inherent vowels

• သ sa, တ ta, ရ ra

• Inherent vowel can be overridden with dependent vowel mark (matra)

• သ sa, သီ si, သု su, ေသ se, ေသာ so

• Independent vowels also exist

5

Page 6: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Brahmic scripts• Inherent vowel can be eliminated, e.g. sta

• Visible vowel killer (virama): သ္တ

• Half-form: স্ত

• Conjunct: স্ত

• Subjoined consonant: သ္တ

• Postfix consonant, dropped consonant, reph, …

6

Page 7: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Brahmic scripts• Numerous additional marks

• Anusvara, chandrabindu, nukta, visarga

• Special medial consonants ya, wa, ra, …

• Occur above, below, or after base

• Medial ra wraps around in some scripts: ြသ

• Overall: Far more complex than Latin script

7

Page 8: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Creating glyphs

Page 9: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Creating glyphs• Get a good understanding of the script

• History, forms, proportions

• Language variants

• Same Unicode character, different form

• Trends and typographic needs

• Contrast and modulation

• Weights and styles

9

Page 10: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Creating glyphs:Best practices

• Don’t create complete clusters

• Work on characters and marks

• Use them as components

• Use substitution and positioning to form clusters

• Create pre-composed forms for complex shapes

10

Page 11: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Example

11

source: https://www.microsoft.com/typography/OpenTypeDev/devanagari/intro.htm

Page 12: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Spacing• Many scripts have head lines rather than base line:

• eg: िहन्दी

• Base glyphs may have layers of marks on top and bottom

• Marks can be vowel signs, subjoined consonants or diacritics

• Metrics used for Latin may not work for Brahmic scripts

12

Page 13: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Example: base + marks

source: https://cdac.in/index.aspx?id=mlc_gist_font

Page 14: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Fonts for UI• Generally low-contrast

• Some scripts come from calligraphic tradition

• Low-contrast can be a challenge

• Line heights generally fixed for Latin

• May need to shrink above and below marks

• May need to split stacked conjuncts !" षु्ठ्र

• May need to shift the baseline for Brahmic

14

Page 15: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Example: Hindi & English on the same line

यह पाठ िहंदी में है this text is in Hindi

Page 16: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Including Latin glyphs: Pros

• Some Latin is often mixed with non-Latin text

• Good idea to include matching latin glyphs

• English alone will suffice most of S.E.A.

• Depending on the script, the x-height may not match the general height of Brahmic base letters

16

Page 17: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Including Latin glyphs:Cons

• Including a complete Latin glyph repertoire can be laborious

• Limiting to English alone can leave other languages incomplete – like Vietnamese

• If a bigger glyph set is needed, it may be better to find a good Latin font that matches the Brahmic outlines

• Focus on what you do best!

17

Page 18: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Generic bases• Always include a glyph for dotted circle: ◌

• Included as a base for showing marks or

subjoined consonants: ◌ီ, ြ◌, ◌္တ

• Make sure marks are positioned accurately

• Enable showing marks attached to

subjoined dotted circle (AAT only): ◌ ᬹ ◌᭄ᬹ18

Page 19: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Examples• Vowel signs & diacritics

• ொ, !, ◌ః, ◌ँ, ◌ं, ◌्, ◌ु, ◌़

• Subjoined consonants

• &, ', (

• Marks attaching to subjoin consonants

•◌᭄ᬸ ◌᭄᭄ᬸ

19

Page 20: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Unicode and fonts

Page 21: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Unicode encoding

• Unicode encodes characters

• Font provides glyphs

• Various alternate glyphs for same character

• Ligatures combining several characters into one glyph

• Rendering system and font interact to produce visual representation

21

Page 22: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Unicode encoding of Brahmic scripts

• Characters usually in phonetic order

• Representation of ေသ se is သ ေ 

• Exceptions: Thai, Lao in visual order

• Conjuncts usually encoded with virama

• Encoding of သ္တ sta is သ ္ တ

• Exception: Tibetan encodes subjoined consonants

22

Page 23: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping

23

101E 1039 1010 103C 1031 102C

သ ္ တ ြ  ေ   ာ

ေြသ္တာ

Page 24: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping issues

• Decomposition

• Reordering

• Conjunct formation

• Other contextual forms

• Positioning

24

Page 25: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping support

• AAT: do it yourself, low level, flexible

• Graphite: do it yourself, high level, flexible

• OpenType

• script-specific shaping engines

• decomposition and reordering handled (mostly) by engine

25

Page 26: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

What’s in a font?• Font file contains many tables

• Outlines: glyf (TrueType), CFF (PostScript)

• Character-to-glyph mapping: cmap

• Shaping tables

• OpenType: GSUB/GPOS/GDEF

• AAT: morx/kerx/ankr

• Graphite: Silf/Glat/Gloc

26

Page 27: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

OpenType Shaping

Page 28: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping tables

• GDEF: Classification of glyphs into bases, marks, ligatures, others; other sets

• Not based on Unicode properties

• GSUB: substitutions – 1:1, 1:many, many:1, contextual

• GPOS: positioning – base to mark, mark to mark, kerning, cursive attachment

28

Page 29: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping context

• Split text into font/style runs, script/language runs, clusters

• Map characters to glyphs with cmap table

• Let script shaping engine do its work, interpret GDEF/GSUB/GPOS tables

• Rasterize glyphs and render them in locations calculated by shaping

29

Page 30: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping context

30

Text Englishத"#ေြသ္တာ

Font 1 English

Font 2 த"#ေြသ္တာ

Script run த"# ေြသ္တာ

Cluster த " # ေြသ္တာ

Page 31: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping engines

• OpenType renderer has 20 shaping engines

• 13 for Brahmic scripts

• Each handles one or more scripts

• Each defines a set of shaping features

• Each provides some automatic behavior and applies the font’s features

31

Page 32: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping feature• Originally an optional font feature, such as SMALL CAPS

• Set of change rules (“lookups”) to be applied to glyph sequence

• Selected by script and language, rarely by user

• Semantic names help organize rules

• locl – language-specific forms

• half – combine consonant and virama to half-form

• But mostly define when rules will be applied

32

Page 33: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping phases

• Shaping engine processes cluster in several phases

• Some phases are automatic, based on Unicode data

• Some process rules for specific features provided by font

• Some do both

33

Page 34: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Shaping phases• Cluster validation

• (De)composition, localized forms – GSUB

• Reordering – GSUB

• Basic shaping – GSUB

• Topographical features – GSUB

• Presentation forms – GSUB

• Positioning – GPOS

34

Page 35: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Cluster validation• Enforces that marks follow bases in correct

order

• Inserts dotted circle before invalid marks

• Automatic, based on Unicode character data

•  ီ → ◌ီ

• သ ု ီ → သု◌ီ

35

Page 36: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

(De)composition, localized forms

• Decomposition partially automatic based on

Unicode data, e.g., ေ◌ာ → ေ◌ ◌ာ

• (De)composition feature ccmp: ◌ᬸ᭄ • sub sa-bali.conj by uMark-bali pa-bali.conj;

• Language-specific forms feature locl

• sub nine-deva by nine-deva.nepali;

36

Page 37: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Reordering• Mostly automatic based on Unicode data

• Pre-base vowels: သေ → ေသ

• Medial ra: သြ  → ြသ

• Some glyphs identified by rphf, pref features

• May come before or after (de)composition, or after basic shaping, depending on engine

37

Page 38: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Basic shaping• Features: abvf, blwf, pstf, and others

• Form conjuncts, e.g. ◌္တ → ◌္တ

• sub virama ta by ta.conj;

• Combine side-by-side marks: ◌ီ ◌ံ → ◌ ီံ

• lookupflag IgnoreBaseGlyphs UseMarkFilteringSet @above_base;sub iMark anusvara by iMark_anusvara;

• Replace non-spacing marks with spacing glyphs

38

Page 39: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Topographical shaping

• Create initial, medial, final, standalone forms of clusters

• Only supported for Bengali and (theoretically) in USE

39

Page 40: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Presentation forms

• Bring glyphs into final forms

• Contextual alternates, separated by position:

pres, abvs, blws, psts, calt: ស្ត + ្រ◌ → ្រស្ត

• sub ra.below' @consonants @conjuncts by ra.below.low;

• Entire run visible for Myanmar and USE; implementation dependent for other engines

40

Page 41: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Positioning

• Move glyphs into the right positions relative to each other, using anchors: mark, mkmk

သ ◌္တ ◌ီ → သ္တီ • Adjust spacing: kern, dist: သီံသ ီံ → သီံသ ီံ

• pos iMark_anusvara @consonant' <150 0 150 0> iMark_anusvara;

41

Page 42: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Positioning

• Entire run visible for Myanmar and USE; implementation dependent for other engines

• Cross-cluster spacing adjustment

42

Page 43: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Mark width zeroing• Engines set width of marks to zero

• “Mark” determined by GDEF, not Unicode

• Outlines shifted to left to maintain right margin

• For many marks, that’s what you want

• For some, it isn’t, and you need to compensate using dist feature

43

Page 44: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

OpenType implementations

• Write once, test everywhere

• With complete set of shaping engines

• DirectWrite, Uniscribe – Windows

• HarfBuzz – Android, Chrome, Firefox, Java 9

• CoreText – iOS, macOS

44

Page 45: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

OpenType implementations

• Adobe: incomplete set of shaping engines

• Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil, Telugu (v2), Gujarati, Gurmukhi (v1)

• World-Ready Composer – InDesign

• Middle Eastern & South Asian Composer –Photoshop, Illustrator

• Addition of HarfBuzz being explored

45

Page 46: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

OpenType documentation

• http://www.microsoft.com/en-us/Typography/SpecificationsOverview.aspx

46

Page 47: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

OpenType tools

• makeotf – compiles feature code into GDEF/GSUB/GPOS tables

• VOLT – visual OpenType layout editor for Windows

• DTL TypeMaster

• Glyphs – complete font development environment

47

Page 48: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Apple Advanced Typography

Page 49: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Differences to OpenType

• No default behavior – it’s all up to the font

• Basic operations: substitution, ligature, insertion, reordering, positioning

• Programmable state machines

• Full access to the complete run; information about line breaks

49

Page 50: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Where AAT is better

• Support complex script not in Unicode

• Support complex script new in Unicode

• Support scripts too complex for OpenType (Tai Tham)

• Support new characters in existing complex script

50

Page 51: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Where AAT is better

• Reorder glyphs where OpenType doesn’t do it automatically

• Align clusters with margins based on above- or below-base marks

• Cross-cluster substitutions and positioning

51

Page 52: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Where AAT is no good

• On any non-Apple platform 😞

52

Page 53: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Reorderingpre-base vowels

• State-action table

EOT OOB B VPre StartText 1 1 2 1 SawBase 1 1 2 3

• Action table

GoTo MarkFirst? MarkLast? Advance? DoThis 1 StartText no no yes none 2 SawBase yes no yes none 3 StartText no yes yes xD->Dx

53

Page 54: Creating fonts for Brahmic scripts with OpenType and … · Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography ... Malayalam, Oriya, ...

Questions?