chartwell wellington web meetup august 2011
Post on 16-Apr-2017
444 Views
Preview:
TRANSCRIPT
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
top related