Chartwell Wellington Web Meetup August 2011

Greetings fromPortland

Quick intro to Chartwell

5+12+17+66

Pies: Raw Data

5+12+17+66Pies: Activated ligatures

3+26+30+41+

Pies: Turn it into a ring

3+26+30+41+APies: Activated ligatures

45+89+23+560=

Bars: Raw Data

45+89+23+560=

Bars: Activated ligatures

25+5+100+45+23+57+63+11+76

Lines: Raw data

Lines: Activated ligatures

Why the font format?

Excel, a designer’s best friend

FF Beowulf by Letterror

Sauna by Underware

12164198461320654161320849130984915986319486556654654656461312398846591216419846132065416132084913098491598631948655665465465646131239884659

Soundwave branding element for a client

What is this OpenType stuff?

Ligatures

wafflewaffle

OFF

ON

OpenType Code

sub f l by fl ;

OpenType Code

sub f l by fl ;sub f f l by ffl ;

So how does Chartwell work?

MAGIC

Bars: All possibilities exist as separate glyphs

1-1000 (NOT ALL SHOWN HERE)

10 20 30 40 50 60 70 80 90 100 200 300 500

Bars: Straight swaps

45 60 211 163 =

45+60+211+163=

Bars: Negative sidebearings

SIDEBEARINGS

SET TO ZERO

NEGATIVE

LEFT SIDEBEARING

Bars: Negative sidebearings

45 60 211 163 =

45+60+211+163=

SIDEBEARINGS SET TO ZERO

NEGATIVE LEFT SIDEBEARING

Pies: All possibilities exist as separate glyphs

ALL POSSIBILITIES FOR 25 PERCENT

Pies: Bow to what comes before

SWAP WITH PRE ROTATED GLYPH

Pies: Contextual OT swaps

sub ten fifteen' by fifteen.ten;

PRIME MARK INDICATES WHICH

VALUE TO SWAP

NOTHING HAPPENS

TO THIS ONE

15 PERCENT GLYPH,

PRE ROTATED BY 10

Pies: Contextual OT swaps

PROBLEMS ARISE

AFTER THE SECOND VALUE.

SHOULD BE ROTATED 25

sub ten fifteen' by fifteen.ten;sub fifteen eight' by eight.fifteen;

Pies: Classes

GROUPED BY STARTING POINT

Pies: More classes

ALSO GROUPED BY END POINT

Pies: Putting the classes into the OT code

sub @twentyfive_end plus @zero' by @twentyfive;

Pies: Centering the glyphs with a negative left sidebearing

SUBSEQUENT GLYPHS

HAVE WIDTH OF ZERO

Lines: Revisiting the context

STARTS AS BARS

Lines: Revisiting the context

DETECT PREVIOUS VALUE

Lines: Revisiting the context

PULL TOP LEFT CORNER DOWN

TO MEET PREVIOUS VALUE

Too many glyphs!

PYTHON AND ROBOFAB

SAVE THE DAY

The web

Give wrapping element class

INPUT

<div class="chartwell-pies">10+40+50</div>

Targetable classes for styling

OUTPUTTARGET VALUES WITH

COLOR IN CSS

CHANGE THE DATA HERE

<div class="chartwell-pies"><span class="cw-pies-graph-one cw-graph">

<span class="cw-value-one"></span><span class="cw-value-two cw-pies-center"></span><span class="cw-value-three cw-pies-center"></span>

</span><span class="cw-raw-data">10+40+50</span>

</div>

Future plans

In progress

tktype.com@traviskochel