chartwell wellington web meetup august 2011
TRANSCRIPT
![Page 1: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/1.jpg)
Greetings fromPortland
![Page 2: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/2.jpg)
Quick intro to Chartwell
![Page 3: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/3.jpg)
5+12+17+66
Pies: Raw Data
![Page 4: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/4.jpg)
5+12+17+66Pies: Activated ligatures
![Page 5: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/5.jpg)
3+26+30+41+
Pies: Turn it into a ring
![Page 6: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/6.jpg)
3+26+30+41+APies: Activated ligatures
![Page 7: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/7.jpg)
45+89+23+560=
Bars: Raw Data
![Page 8: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/8.jpg)
45+89+23+560=
Bars: Activated ligatures
![Page 9: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/9.jpg)
25+5+100+45+23+57+63+11+76
Lines: Raw data
![Page 10: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/10.jpg)
Lines: Activated ligatures
![Page 11: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/11.jpg)
Why the font format?
![Page 12: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/12.jpg)
Excel, a designer’s best friend
![Page 13: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/13.jpg)
FF Beowulf by Letterror
![Page 14: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/14.jpg)
Sauna by Underware
![Page 15: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/15.jpg)
12164198461320654161320849130984915986319486556654654656461312398846591216419846132065416132084913098491598631948655665465465646131239884659
Soundwave branding element for a client
![Page 16: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/16.jpg)
What is this OpenType stuff?
![Page 17: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/17.jpg)
Ligatures
wafflewaffle
OFF
ON
![Page 18: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/18.jpg)
OpenType Code
sub f l by fl ;
![Page 19: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/19.jpg)
OpenType Code
sub f l by fl ;sub f f l by ffl ;
![Page 20: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/20.jpg)
So how does Chartwell work?
![Page 21: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/21.jpg)
MAGIC
![Page 22: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/22.jpg)
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
![Page 23: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/23.jpg)
Bars: Straight swaps
45 60 211 163 =
45+60+211+163=
![Page 24: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/24.jpg)
Bars: Negative sidebearings
SIDEBEARINGS
SET TO ZERO
NEGATIVE
LEFT SIDEBEARING
![Page 25: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/25.jpg)
Bars: Negative sidebearings
45 60 211 163 =
45+60+211+163=
SIDEBEARINGS SET TO ZERO
NEGATIVE LEFT SIDEBEARING
![Page 26: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/26.jpg)
Pies: All possibilities exist as separate glyphs
ALL POSSIBILITIES FOR 25 PERCENT
![Page 27: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/27.jpg)
Pies: Bow to what comes before
SWAP WITH PRE ROTATED GLYPH
![Page 28: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/28.jpg)
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
![Page 29: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/29.jpg)
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;
![Page 30: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/30.jpg)
Pies: Classes
GROUPED BY STARTING POINT
![Page 31: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/31.jpg)
Pies: More classes
ALSO GROUPED BY END POINT
![Page 32: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/32.jpg)
Pies: Putting the classes into the OT code
sub @twentyfive_end plus @zero' by @twentyfive;
![Page 33: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/33.jpg)
Pies: Centering the glyphs with a negative left sidebearing
SUBSEQUENT GLYPHS
HAVE WIDTH OF ZERO
![Page 34: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/34.jpg)
Lines: Revisiting the context
STARTS AS BARS
![Page 35: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/35.jpg)
Lines: Revisiting the context
DETECT PREVIOUS VALUE
![Page 36: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/36.jpg)
Lines: Revisiting the context
PULL TOP LEFT CORNER DOWN
TO MEET PREVIOUS VALUE
![Page 37: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/37.jpg)
Too many glyphs!
PYTHON AND ROBOFAB
SAVE THE DAY
![Page 38: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/38.jpg)
The web
![Page 39: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/39.jpg)
Give wrapping element class
INPUT
<div class="chartwell-pies">10+40+50</div>
![Page 40: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/40.jpg)
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>
![Page 41: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/41.jpg)
Future plans
![Page 42: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/42.jpg)
In progress
![Page 43: Chartwell Wellington Web Meetup August 2011](https://reader034.vdocuments.net/reader034/viewer/2022051404/58f311e31a28ab315e8b4571/html5/thumbnails/43.jpg)
tktype.com@traviskochel