Syntax Highlight Everything

A presentation at CSSConf.Asia 2016 in November 2016 in Singapore by Kenneth Ormandy

Slide 1

Slide 1

Syntax Highlight Everything Kenneth Ormandy Designer @kennethormandy Front-Trends May 19, 2016 at Space Club, Warsaw, Poland

Slide 2

Slide 2

/** * Fetch all the file paths for a directory. * returns and array of all the relative paths. */ exports.ls = function(dir, callback) { walk(dir, function(err, results){ var files = [] results.map(function(file){ files.push(path.relative(dir, file)) }) callback(null, files) }) }

Slide 3

Slide 3

/** * Fetch all the file paths for a directory. * returns and array of all the relative paths. */ exports.ls = function(dir, callback) { walk(dir, function(err, results){ var files = [] results.map(function(file){ files.push(path.relative(dir, file)) }) callback(null, files) }) }

Slide 4

Slide 4

Reading code is reading

Slide 5

Slide 5

Syntax highlighting is designed

Slide 6

Slide 6

Typographic conventions

Slide 7

Slide 7

Slide 8

Slide 8

A visual hierarchy

Slide 9

Slide 9

Similarity through colour

Slide 10

Slide 10

Slide 11

Slide 11

Similarity

Slide 12

Slide 12

If it’s the same, make it the same. If it’s different, make it different. —All my graphic design instructors, September 2010–present

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

  • This qualifies as a talk on testing now, right?

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Continuity & Symmetry

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

Familiarity

Slide 32

Slide 32

It is the readers’ familiarity with [type]faces that accounts for their legibility. …readers read best what they read most. —Zuzana Licko —While you’re reading, p. 43

Slide 33

Slide 33

Amy Allcock, Gutenberg Bible. Photograph. CC by 2.0.

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

  • Yes, feel free to take that idea and build a text editor plugin.

Slide 37

Slide 37

  • I’m sure you’ll open source it before my talk is even over.

Slide 38

Slide 38

  • Just…keep paying attention to the typography, okay?

Slide 39

Slide 39

Slide 40

Slide 40

Similarity through size?

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Highlighting relationships

Slide 44

Slide 44

Berners-Lee, Tim. (1990).No title [Screenshot]. Retrieved from http://www.w3.org/ People/Berners-Lee/ WorldWideWeb.html

Slide 45

Slide 45

Ratdolt, Erhard. No title [Lithographed reproduction].

Slide 46

Slide 46

The End of Ideas

Slide 47

Slide 47

Reading was hard work — so hard, indeed, that one would usually read out loud —Marcin Wichary October 2014, First in, first out: The pilcrow’s strange typographic history

Slide 48

Slide 48

Provenance Online Project. Leaf a6r of an incunable… CC by 2.0.

Slide 49

Slide 49

Thanks to Frutiger it is now common practice to produce a dozen or more styles when working on a new type family. —Peter Biľak April 2012, Designing type systems

Slide 50

Slide 50

Typotheque. Greta Sans type system. 2012.

Slide 51

Slide 51

Slide 52

Slide 52

Advanced typographic features

Slide 53

Slide 53

OpenType features

Slide 54

Slide 54

kern Kerning

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

Kerning pairs

Slide 60

Slide 60

Slide 61

Slide 61

Slide 62

Slide 62

In CSS…

Slide 63

Slide 63

Slide 64

Slide 64

Slide 65

Slide 65

Slide 66

Slide 66

Slide 67

Slide 67

Kerning isn’t the goal

Slide 68

Slide 68

Implementation vs technique

Slide 69

Slide 69

Slide 70

Slide 70

  • Spacing establishes spacing

Slide 71

Slide 71

  • Spacing establishes spacing
  • Kerning improves spacing

Slide 72

Slide 72

  • Spacing establishes spacing
  • Kerning improves spacing
  • Ligatures improve spacing

Slide 73

Slide 73

liga Ligatures

Slide 74

Slide 74

infinite Hudson, John. (2006–2012). Brill Bold [Typeface].

Slide 75

Slide 75

infinite Hudson, John. (2006–2012). Brill Bold [Typeface].

Slide 76

Slide 76

body {
  font-variant-ligatures: common-ligatures;
}

Slide 77

Slide 77

body {
  font-variant-ligatures: common-ligatures;
}

Slide 78

Slide 78

/* The best-case scenario CSS… we’ll come back to this. */

body {
  font-variant-ligatures: common-ligatures;
}

Slide 79

Slide 79

dlig Discretionary Ligatures

Slide 80

Slide 80

Prince, Joe. (2006–2012). Klinic Slab Bold [Typeface]. Lost Type Co-op.

Slide 81

Slide 81

Prince, Joe. (2006–2012). Klinic Slab Bold [Typeface]. Lost Type Co-op.

Slide 82

Slide 82

h1 {
  font-variant-ligatures: common-ligatures;
}

Slide 83

Slide 83

h1 {
  font-variant-ligatures: common-ligatures;
}

Slide 84

Slide 84

Travis Gertz, Louder Than Ten, 2015. louderthanten.com.

Slide 85

Slide 85

calt Contextual Alternates

Slide 86

Slide 86

Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

Slide 87

Slide 87

Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

Slide 88

Slide 88

Nallaperumal, Shiva. (2014). Enemy [Typeface]. Lost Type Co-op.

Slide 89

Slide 89

h1 { font-variant-ligatures: contextual; }

Slide 90

Slide 90

aalt, calt, etc. Language-specific Considerations

Slide 91

Slide 91

English Dutch Underware. (2014). Typesetting the Dutch IJ.

Slide 92

Slide 92

Gandhi, Kimya. (2016). Design of a handwritten Devanagari typeface.

Slide 93

Slide 93

salt Stylistic Alternates

Slide 94

Slide 94

Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

Slide 95

Slide 95

Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

Slide 96

Slide 96

Titling Alts. Stylistic Alts. Contextual Alts. Stylistic Alts. Swashes Edmondson, James T. (2012). Lavanderia [Typeface]. Lost Type Co-op.

Slide 97

Slide 97

…provide simpler forms (no loops on top) for the lowercase b, h, f, l, and k. Simpler forms can work better in certain situations. —James T. Edmondson —Introducing Lavanderia

Slide 98

Slide 98

Slide 99

Slide 99

h1 { font-variant-ligatures: contextual; }

Slide 100

Slide 100

h1 { font-variant-ligatures: contextual; margin-bottom: 1em; }

Slide 101

Slide 101

h1 { font-feature-settings: “calt”; margin: 0 0 1em 0; }

Slide 102

Slide 102

h1 { font-feature-settings: “calt”, “salt”; margin: 0 0 1em 0; }

Slide 103

Slide 103

case Case-sensitive Forms

Slide 104

Slide 104

@kennethormandy @kennethormandy Homola, Wolfgang. (2011– 2014). Soleil [Typeface].

Slide 105

Slide 105

@kennethormandy @KENNETHORMANDY Homola, Wolfgang. (2011– 2014). Soleil [Typeface].

Slide 106

Slide 106

@kennethormandy @KENNETHORMANDY Homola, Wolfgang. (2011– 2014). Soleil [Typeface].

Slide 107

Slide 107

h1 { font-feature-settings: “case”; text-transform: uppercase; }

Slide 108

Slide 108

smcp, c2sc Small Capitals

Slide 109

Slide 109

Front Trends HQ Hudson, J. (2006–2012). Brill [Typeface].

Slide 110

Slide 110

Front Trends HQ Hudson, J. (2006–2012). Brill [Typeface].

Slide 111

Slide 111

Front Trends HQ Hudson, J. (2006–2012). Brill [Typeface].

Slide 112

Slide 112

Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us. Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us.

Slide 113

Slide 113

Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us. Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us.

Slide 114

Slide 114

Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us. Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us.

Slide 115

Slide 115

Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us. Poland is in the European Union and Schengen Zone. If you’re a citizen of these visa-free countries, you don’t need any documents other than government ID or passport to enter Poland for 90 days. If you do need a visa, Front-Trends is happy to provide a document for you to join us.

Slide 116

Slide 116

No is better than faux

Slide 117

Slide 117

ront Trends HQ ront Trends HQ ront Trends HQ Capitals Small Capitals Faux Small Capitals Hudson, J. (2006–2012). Brill Bold [Typeface].

Slide 118

Slide 118

ront Trends HQ ront Trends HQ ront Trends HQ HQ Capitals Small Capitals Faux Small Capitals Hudson, J. (2006–2012). Brill Bold [Typeface].

Slide 119

Slide 119

Butterick, M. (2010–2014). Butterick’s Practical Typography.

Slide 120

Slide 120

/* Don’t do this! Creates faux Small Caps. */ .caps { font-variant: small-caps; }

Slide 121

Slide 121

/* Real Small Caps. */ .caps { font-variant-caps: small-caps; }

Slide 122

Slide 122

Surge.sh, 2015. surge.sh.

Slide 123

Slide 123

Unlimited publishing Custom domain Custom SSL Force HTTP to HTTPS

<ul> <li>Unlimited publishing</li> <li>Custom domain</li> <li>Custom <span class=”caps”>SSL</span></li> <li>Force <span class=”caps”>HTTP</span> to <span class=”caps”>HTTPS</span></li> </ul>

Slide 124

Slide 124

Slide 125

Slide 125

“Figures.”

Slide 126

Slide 126

Numbers

Slide 127

Slide 127

  • No, it wouldn’t.

Slide 128

Slide 128

onum, lnum Old-Style & Lining Numbers

Slide 129

Slide 129

MAY 19, 2016 Edmondson, J. Edmondsans [Typeface]. Lost Type Co-op.

Slide 130

Slide 130

May 19, 2016 Hudson, John. (2006–2012). Brill Bold [Typeface].

Slide 131

Slide 131

MAY 19, 2016 May 19, 2016 Carter, Matthew. Georgia & Verdana [Typeface].

Slide 132

Slide 132

pnum, tnum Proportional & Tabular Numbers

Slide 133

Slide 133

231,000 229,000 216,000 200,000 199,000

Slide 134

Slide 134

231,000 229,000 216,000 200,000 199,000

Slide 135

Slide 135

231,000 229,000 216,000 200,000 199,000 231,000 229,000 216,000 200,000 199,000

Slide 136

Slide 136

231,000 229,000 216,000 200,000 199,000 231,000 229,000 216,000 200,000 199,000

Slide 137

Slide 137

Slide 138

Slide 138

Slide 139

Slide 139

table { font-variant-numeric: tabular-nums; }

Slide 140

Slide 140

table { font-variant-numeric: tabular-nums; }

Slide 141

Slide 141

  1. Choose the typeface

Slide 142

Slide 142

  1. Choose the typeface 2. Load the web font

Slide 143

Slide 143

  1. Choose the typeface 2. Load the web font 3. Enable the features

Slide 144

Slide 144

  1. Choose the typeface

Slide 145

Slide 145

Typefaces are different

Slide 146

Slide 146

11:20 Demo Reel & Tiny JavaScript 11:55 Syntax Highlight Everything 12:30 Lunch break 13:55 Lightning talks 14:25 Coffee break 14:40 Computer Assisted Arts and Crafts

Slide 147

Slide 147

11:20 Demo Reel & Tiny JavaScript 11:55 Syntax Highlight Everything 12:30 Lunch break 13:55 Lightning talks 14:25 Coffee break 14:40 Computer Assisted Arts and Crafts

Slide 148

Slide 148

11:20 Demo Reel & “ny JavaScript 11:55 Syntax Highlight Everything 12:30 Lunch break 13:55 Lightning talks 14:25 Coffee break 14:40 Computer Assisted Arts and Crafts

Slide 149

Slide 149

Developers & Typographers

Slide 150

Slide 150

  1. Choose the typeface 2. Load the web font

Slide 151

Slide 151

  1. Choose the typeface 2. Load the web font 3. Enable the features

Slide 152

Slide 152

table { font-variant-numeric: tabular-nums; }

Slide 153

Slide 153

table { font-variant-numeric: tabular-nums; }

Slide 154

Slide 154

table { font-feature-settings: “tnum”; }

Slide 155

Slide 155

table { font-feature-settings: “tnum”; }

Slide 156

Slide 156

table { @supports not (font-variant-numeric: tabular-nums) { font-feature-settings: “tnum”; } font-variant-numeric: tabular-nums; }

Slide 157

Slide 157

table { @supports not (font-variant-numeric: tabular-nums) { font-feature-settings: “tnum”; } font-variant-numeric: tabular-nums; }

Slide 158

Slide 158

table { @supports not (font-variant-numeric: tabular-nums) { font-feature-settings: “tnum”; } font-variant-numeric: tabular-nums; }

Slide 159

Slide 159

  • Uh…I’m not going to do all that.

Slide 160

Slide 160

utility-opentype.kennethormandy.com

Slide 161

Slide 161

$ npm install —save utility-opentype

Slide 162

Slide 162

<table class=”tnum”> <thead> <tr> <th>Time</th> <th>Speaker</th> </tr> </thead> <tbody> <tr> <td>2:40<abbr class=”smcp”>pm</abbr></td> <td>Mariko Kosaka</td> </tr> <tr>

Slide 163

Slide 163

Slide 164

Slide 164

Slide 165

Slide 165

Syntax highlight everything.

Slide 166

Slide 166

Thanks Kenneth Ormandy Designer @kennethormandy Front-Trends May 19, 2016 at Space Club, Warsaw, Poland

Slide 167

Slide 167

Works cited The WorldWideWeb browser. Sir Tim Berners-Lee. N.d. Basscss design principles. Brent Jackson. 2015. Echo font family, OpenType font features. Typotheque. 2015. Designing type systems. Peter Biľak. 2012. Design Of A Handwritten Devanagari Typeface. Kimya Gandhi. 2016. While you’re reading. Gerard Unger. 2007. Butterick’s practical typography. Matthew Butterick. 2010–2016. OpenType features in web browsers. Gustavo Ferreira. 2012. Flipping tables: Displaying data on small screens. Stephanie Hobson. 2015. OpenType specification. Microsoft, et al. 1997–2015. Font-Variant css. Mozilla, et al. 2014–2016. State of web type. Bram Stein. 2014–2015. First in, first out: The pilcrow’s strange typographic history. Marcin Wichary. 2014.