creating fonts for brahmic scripts with opentype and apple ...€¦ · • adobe: incomplete set of...

56
Creating fonts for Brahmic scripts with OpenType and Apple Advanced Typography Muthu Nedumaran & Norbert Lindenberg © 2017-2018 Muthu Nedumaran & Norbert Lindenberg

Upload: others

Post on 15-Jul-2020

11 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Creating fonts for Brahmic scripts with OpenType and

Apple Advanced TypographyMuthu Nedumaran & Norbert Lindenberg

© 2017-2018 Muthu Nedumaran & Norbert Lindenberg

Page 2: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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 Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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 Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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 Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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 Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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 Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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 Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Creating glyphs

Page 9: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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 Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Language variants

10

Page 11: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

11

Page 12: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Example

12

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

Page 13: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,
Page 14: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

14

Page 15: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Example: base + marks

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

Page 16: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

16

Page 17: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Example: Hindi & English on the same line

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

Page 18: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

18

Page 19: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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!

19

Page 20: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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): ◌ ᬹ ◌᭄ᬹ 20

Page 21: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Examples• Vowel signs & diacritics

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

• Subjoined consonants

• &, ', (

• Marks attaching to subjoin consonants

• ◌᭄ᬸ ◌᭄᭄ᬸ

21

Page 22: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Unicode and fonts

Page 23: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

23

Page 24: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

24

Page 25: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Shaping

25

101E 1039 1010 103C 1031 102C

သ ္ တ ြ  ေ   ာ

ေြသ္တာ

Page 26: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Shaping issues

• Decomposition

• Reordering

• Conjunct formation

• Other contextual forms

• Positioning

26

Page 27: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

27

Page 28: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

28

Page 29: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

OpenType Shaping

Page 30: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

30

Page 31: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

31

Page 32: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Shaping context

32

Text Englishத"#ေြသ္တာ

Font 1 English

Font 2 த"#ေြသ္တာ

Script run த"# ေြသ္တာ

Cluster த " # ေြသ္တာ

Page 33: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

33

Page 34: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

34

Page 35: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

35

Page 36: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Shaping phases• Cluster validation

• (De)composition, localized forms – GSUB

• Reordering – GSUB

• Basic shaping – GSUB

• Topographical features – GSUB

• Presentation forms – GSUB

• Positioning – GPOS

36

Page 37: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Cluster validation• Enforces that marks follow bases in correct

order

• Inserts dotted circle before invalid marks

• Automatic, based on Unicode character data

•  ီ → ◌ီ

• သ ု ီ → သု◌ီ

37

Page 38: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

(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;

38

Page 39: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

39

Page 40: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

40

Page 41: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Topographical shaping

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

• Only supported for Bengali and (theoretically) in USE

41

Page 42: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

42

Page 43: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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;

43

Page 44: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Positioning

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

• Cross-cluster spacing adjustment

44

Page 45: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

45

Page 46: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

OpenType implementations

• Write once, test everywhere

• With complete set of shaping engines

• DirectWrite, Uniscribe – Windows

• HarfBuzz – Android, Chrome, Firefox, Java 9

• CoreText – iOS, macOS

46

Page 47: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

47

Page 48: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

OpenType documentation

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

48

Page 49: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

49

Page 50: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Apple Advanced Typography

Page 51: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

51

Page 52: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

52

Page 53: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

53

Page 54: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Where AAT is no good

• On any non-Apple platform 😞

54

Page 55: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

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

55

Page 56: Creating fonts for Brahmic scripts with OpenType and Apple ...€¦ · • Adobe: incomplete set of shaping engines • Brahmic: Devanagari, Bengali, Kannada, Malayalam, Oriya, Tamil,

Questions?