1 00:00:00,420 --> 00:00:05,910 [Music] 2 00:00:10,160 --> 00:00:14,559 Hello. Uh, welcome back to session two 3 00:00:12,800 --> 00:00:16,960 of the morning. I hope you're all 4 00:00:14,559 --> 00:00:18,960 enjoying yourselves. Um, and if you're 5 00:00:16,960 --> 00:00:20,400 not, 6 00:00:18,960 --> 00:00:21,920 I don't know, keep it to yourself or 7 00:00:20,400 --> 00:00:23,680 something. 8 00:00:21,920 --> 00:00:25,439 Um, 9 00:00:23,680 --> 00:00:27,199 I'm going to just hand over directly to 10 00:00:25,439 --> 00:00:30,840 Zayn who's going to talk to us about 11 00:00:27,199 --> 00:00:30,840 found font family. 12 00:00:35,120 --> 00:00:39,760 Hello everyone. Um, this is a bit of a 13 00:00:37,440 --> 00:00:41,520 talk that I threw together because I 14 00:00:39,760 --> 00:00:43,040 ended up working with fonts a lot. I was 15 00:00:41,520 --> 00:00:44,800 a front end engineer. I am still a front 16 00:00:43,040 --> 00:00:46,559 end engineer, which turns out that fonts 17 00:00:44,800 --> 00:00:48,000 matter aggressively, more so than any 18 00:00:46,559 --> 00:00:49,520 other software engineering profession. 19 00:00:48,000 --> 00:00:50,879 Um, and I never really understood them. 20 00:00:49,520 --> 00:00:52,719 Uh, so I put together a little talk 21 00:00:50,879 --> 00:00:54,480 explaining it. And after a couple of 22 00:00:52,719 --> 00:00:56,960 cycles of revision, I've arrived at what 23 00:00:54,480 --> 00:00:59,039 is effectively a 20-minute rant and a 24 00:00:56,960 --> 00:01:00,160 little bit of a fever dream. and I'd 25 00:00:59,039 --> 00:01:02,640 like you to come on this journey with 26 00:01:00,160 --> 00:01:04,799 me. Let's start with the problem. Have 27 00:01:02,640 --> 00:01:06,640 you ever used this little VS Code pets 28 00:01:04,799 --> 00:01:08,159 extension? It's adorable. Would 29 00:01:06,640 --> 00:01:10,720 recommend. And it means that you can 30 00:01:08,159 --> 00:01:12,640 have a little cat or a dog or a pet. Uh 31 00:01:10,720 --> 00:01:14,159 and it just dances around in the bottom 32 00:01:12,640 --> 00:01:15,439 left of your screen while you code. 33 00:01:14,159 --> 00:01:17,920 Gives you the moral support to get 34 00:01:15,439 --> 00:01:19,680 through those long long days. Um and 35 00:01:17,920 --> 00:01:22,640 it's it's very adorable and I want it in 36 00:01:19,680 --> 00:01:24,640 my terminal desperately. I need it. Uh 37 00:01:22,640 --> 00:01:26,320 however, there is a little problem I ran 38 00:01:24,640 --> 00:01:29,200 into. 39 00:01:26,320 --> 00:01:31,040 terminals don't like print images. I I 40 00:01:29,200 --> 00:01:32,240 really you can find like GPU accelerator 41 00:01:31,040 --> 00:01:33,360 ones that do it, but for the most part I 42 00:01:32,240 --> 00:01:36,240 couldn't get a terminal to just output 43 00:01:33,360 --> 00:01:37,840 an image which is weird to me because I 44 00:01:36,240 --> 00:01:39,520 feel like a browser if there's one thing 45 00:01:37,840 --> 00:01:42,560 a browser does is it shows you pictures 46 00:01:39,520 --> 00:01:44,000 of cats maybe too much frankly. Uh and 47 00:01:42,560 --> 00:01:46,079 there was no way there was no good way 48 00:01:44,000 --> 00:01:48,079 to do it in the terminal. So I kind of 49 00:01:46,079 --> 00:01:50,560 began my journey here. If I wanted a 50 00:01:48,079 --> 00:01:52,799 cute temag style cat in my terminal, how 51 00:01:50,560 --> 00:01:55,280 am I going to make that happen? 52 00:01:52,799 --> 00:01:56,720 So first of all, I tried to look at 53 00:01:55,280 --> 00:01:58,000 different ways that you could render 54 00:01:56,720 --> 00:01:59,759 images to the terminal. There are some 55 00:01:58,000 --> 00:02:01,520 programs that do it. They do a lot of 56 00:01:59,759 --> 00:02:03,200 this. They do a lot of ASKI art. They 57 00:02:01,520 --> 00:02:04,799 try and approximate every pixel to an 58 00:02:03,200 --> 00:02:06,560 ASKI character or like a text character 59 00:02:04,799 --> 00:02:09,840 and print it out. And the reason for 60 00:02:06,560 --> 00:02:11,760 this is sort of this fundamental um uh 61 00:02:09,840 --> 00:02:13,360 limitation of of terminals is that they 62 00:02:11,760 --> 00:02:14,640 really only work with text. If you want 63 00:02:13,360 --> 00:02:16,720 to be clever and have any sort of 64 00:02:14,640 --> 00:02:18,400 graphics, everything on screen has to be 65 00:02:16,720 --> 00:02:20,640 a character, a printable character that 66 00:02:18,400 --> 00:02:23,440 your font renderer uh or your text 67 00:02:20,640 --> 00:02:24,480 renderer better said uh can handle. So 68 00:02:23,440 --> 00:02:27,599 that means that we're kind of limited 69 00:02:24,480 --> 00:02:29,440 here on what we can do. However, this 70 00:02:27,599 --> 00:02:31,280 led me down a little journey. What even 71 00:02:29,440 --> 00:02:33,760 is text? What even is something that 72 00:02:31,280 --> 00:02:35,040 like a text renderer can render? Cuz you 73 00:02:33,760 --> 00:02:37,120 know, I've seen Python code and in 74 00:02:35,040 --> 00:02:39,200 Python code you can use little accents 75 00:02:37,120 --> 00:02:40,879 above the E. There's a pi symbol. That's 76 00:02:39,200 --> 00:02:42,720 not a cast like a classical character, 77 00:02:40,879 --> 00:02:43,920 but it renders fine. It works. You can 78 00:02:42,720 --> 00:02:46,720 print that out to most terminals. 79 00:02:43,920 --> 00:02:48,959 They'll handle it. So, you know, where 80 00:02:46,720 --> 00:02:50,400 can we go with this? We begin with a 81 00:02:48,959 --> 00:02:52,160 little bit of a of a fundamental 82 00:02:50,400 --> 00:02:54,239 understanding. Computers don't know 83 00:02:52,160 --> 00:02:56,319 anything basically at all. Uh, but they 84 00:02:54,239 --> 00:02:57,360 do know numbers. Also, sometimes not 85 00:02:56,319 --> 00:03:00,560 numbers. Don't talk about floating 86 00:02:57,360 --> 00:03:02,319 points. Um, and you can assign every 87 00:03:00,560 --> 00:03:04,080 glyph. I'm going to use the word glyph. 88 00:03:02,319 --> 00:03:05,599 Uh, effectively I mean like a text 89 00:03:04,080 --> 00:03:07,519 character, but we'll talk a little bit 90 00:03:05,599 --> 00:03:09,599 later about why I have broadened it to 91 00:03:07,519 --> 00:03:12,319 the term glyph. Uh, and it assigns it to 92 00:03:09,599 --> 00:03:14,159 a number. the character A is 65. There's 93 00:03:12,319 --> 00:03:15,200 a long history here about why it's 65, 94 00:03:14,159 --> 00:03:18,159 but we're just going to trust that it's 95 00:03:15,200 --> 00:03:20,400 65. Um, and all the font renderer does 96 00:03:18,159 --> 00:03:23,120 or text renderer is it renders that 97 00:03:20,400 --> 00:03:24,560 character to screen. Now, there are 98 00:03:23,120 --> 00:03:26,959 other things that you can put into code 99 00:03:24,560 --> 00:03:28,080 and put into any area that accepts text. 100 00:03:26,959 --> 00:03:30,720 Basically, anything that renders 101 00:03:28,080 --> 00:03:32,560 uni-ode, uh, such as an emoji and if you 102 00:03:30,720 --> 00:03:35,120 print the value of it in the same way 103 00:03:32,560 --> 00:03:38,799 that a is 65, this little oniri, which 104 00:03:35,120 --> 00:03:41,200 is not a donut, uh, is 127833. 105 00:03:38,799 --> 00:03:44,239 So all it is really is a mapping of 106 00:03:41,200 --> 00:03:45,760 number to glyph. And the glyph is 107 00:03:44,239 --> 00:03:47,360 because it can be a character, it can be 108 00:03:45,760 --> 00:03:49,360 an emoji, it can be a little pi symbol, 109 00:03:47,360 --> 00:03:51,360 it can be really basically anything. But 110 00:03:49,360 --> 00:03:53,120 no, it can't be anything. It has to be 111 00:03:51,360 --> 00:03:55,280 something that it can support. But this 112 00:03:53,120 --> 00:03:56,879 led me to this wonderful realization. We 113 00:03:55,280 --> 00:03:59,280 have we have images. You can print 114 00:03:56,879 --> 00:04:01,439 emojis to the terminal. Who has used any 115 00:03:59,280 --> 00:04:03,680 CLI application created in the last 5 116 00:04:01,439 --> 00:04:05,120 years? 117 00:04:03,680 --> 00:04:06,640 They're chocked full of it. Every time 118 00:04:05,120 --> 00:04:07,760 npm like installs something, it'll give 119 00:04:06,640 --> 00:04:09,680 you a little emoji. It'll give you like 120 00:04:07,760 --> 00:04:11,439 a pretty little terminal output. Uh, so 121 00:04:09,680 --> 00:04:13,120 you can use emojis. Is this the 122 00:04:11,439 --> 00:04:15,599 solution? Which led me to a little 123 00:04:13,120 --> 00:04:17,359 question. Can I add another emoji? Can I 124 00:04:15,599 --> 00:04:18,880 just add emojis? Someone's adding them. 125 00:04:17,359 --> 00:04:21,120 There's more now than there were 5 years 126 00:04:18,880 --> 00:04:22,400 ago, right? 127 00:04:21,120 --> 00:04:24,639 I'd like to play a little game with you 128 00:04:22,400 --> 00:04:25,840 as a little demonstration. Would can 129 00:04:24,639 --> 00:04:27,840 people have a guess at what these three 130 00:04:25,840 --> 00:04:30,840 emojis are called in the official Uniode 131 00:04:27,840 --> 00:04:30,840 spec? 132 00:04:32,160 --> 00:04:36,560 You're on to it already, but yeah, very 133 00:04:34,400 --> 00:04:38,240 close. Uh, but like you might assume 134 00:04:36,560 --> 00:04:40,000 siren, you might assume police siren, 135 00:04:38,240 --> 00:04:42,960 right? What about the second one? I call 136 00:04:40,000 --> 00:04:45,199 this the yikes phase personally. 137 00:04:42,960 --> 00:04:49,639 Grimacing teeth. You guys are all nerds. 138 00:04:45,199 --> 00:04:49,639 Um, what about the last one? 139 00:04:50,080 --> 00:04:54,400 Someone said steam. Yeah. Well, I would 140 00:04:51,600 --> 00:04:57,360 say angry or very angry, but it is 141 00:04:54,400 --> 00:05:00,320 police car revolving light. Grimacine 142 00:04:57,360 --> 00:05:03,040 face with steam from nose. Now these 143 00:05:00,320 --> 00:05:04,800 seem well practically useless for if I 144 00:05:03,040 --> 00:05:06,560 am trying to search for an emoji to send 145 00:05:04,800 --> 00:05:08,560 to someone because I search by emotion 146 00:05:06,560 --> 00:05:10,240 frankly uh as I imagine most people in 147 00:05:08,560 --> 00:05:12,160 this room would do. But the issue is is 148 00:05:10,240 --> 00:05:14,080 that the unic code spec is not going to 149 00:05:12,160 --> 00:05:16,400 stop today. It is hopefully going to 150 00:05:14,080 --> 00:05:20,160 last for decades in the future. So there 151 00:05:16,400 --> 00:05:22,320 is a basically a trend to not put too 152 00:05:20,160 --> 00:05:25,039 much context into these words like 153 00:05:22,320 --> 00:05:26,880 grimacine face is a direct um analysis 154 00:05:25,039 --> 00:05:29,360 of what this is police cars roving light 155 00:05:26,880 --> 00:05:31,280 is siren maybe wouldn't be right that 156 00:05:29,360 --> 00:05:33,600 actually is context dependent maybe in 157 00:05:31,280 --> 00:05:35,039 the future after an apocalypse everyone 158 00:05:33,600 --> 00:05:36,080 uses the red light to actually mean 159 00:05:35,039 --> 00:05:37,840 something completely different maybe 160 00:05:36,080 --> 00:05:40,560 it's an everything is okay alarm you 161 00:05:37,840 --> 00:05:42,080 know so this kind of reveals something 162 00:05:40,560 --> 00:05:44,000 important about uni code is that it has 163 00:05:42,080 --> 00:05:45,840 to survive and there's a nice little 164 00:05:44,000 --> 00:05:47,919 example does anyone know what emoji This 165 00:05:45,840 --> 00:05:50,720 is 166 00:05:47,919 --> 00:05:53,199 pager. I have asked this to groups of 167 00:05:50,720 --> 00:05:54,479 younger people and they cannot answer 168 00:05:53,199 --> 00:05:56,240 and understandably so. I think aside 169 00:05:54,479 --> 00:05:58,160 from maybe hospitals, there's no real 170 00:05:56,240 --> 00:06:00,080 use case for a pager anymore. And yet, 171 00:05:58,160 --> 00:06:02,400 not only will the emoji persist, it'll 172 00:06:00,080 --> 00:06:04,240 persist indefinitely because uni code is 173 00:06:02,400 --> 00:06:05,600 not just for now. It is universal. I 174 00:06:04,240 --> 00:06:06,720 believe that's what the uni and uni code 175 00:06:05,600 --> 00:06:09,199 stands for. Probably should look that 176 00:06:06,720 --> 00:06:10,800 up. Um, and the point here is that we 177 00:06:09,199 --> 00:06:13,199 can't just add emojis. They have to have 178 00:06:10,800 --> 00:06:14,880 a real reason to put them in and a real 179 00:06:13,199 --> 00:06:18,479 backing for why they need to exist long 180 00:06:14,880 --> 00:06:20,240 term. Which is why we have a consortium. 181 00:06:18,479 --> 00:06:21,600 One of the most powerful tools and yet 182 00:06:20,240 --> 00:06:23,120 one of the most boring tools is a bunch 183 00:06:21,600 --> 00:06:25,199 of people sitting around making very 184 00:06:23,120 --> 00:06:26,720 small decisions with a lot of consensus. 185 00:06:25,199 --> 00:06:29,919 But incredibly important because we get 186 00:06:26,720 --> 00:06:32,919 uni code out of it. And 187 00:06:29,919 --> 00:06:32,919 oh 188 00:06:33,759 --> 00:06:38,199 that's crazy. It's a static slide. 189 00:06:40,960 --> 00:06:45,280 It's an offline presentation. 190 00:06:44,080 --> 00:06:46,880 Uh I'm just going to try again and 191 00:06:45,280 --> 00:06:48,479 hopefully that goes through. Anyway, the 192 00:06:46,880 --> 00:06:50,160 next slide is basically going to be 193 00:06:48,479 --> 00:06:52,080 talking a little bit about how you get 194 00:06:50,160 --> 00:06:54,479 an emoji in. It takes an average of two 195 00:06:52,080 --> 00:06:55,600 years and it is unbelievably again this 196 00:06:54,479 --> 00:06:58,160 like I downloaded the whole thing. 197 00:06:55,600 --> 00:06:59,360 Anyway, um this is another rant I could 198 00:06:58,160 --> 00:07:01,759 go on about the state of current 199 00:06:59,360 --> 00:07:04,720 software. Uh it takes about 2 years for 200 00:07:01,759 --> 00:07:07,280 an emoji to uh go from proposal up until 201 00:07:04,720 --> 00:07:08,400 implementation. And I guess like what 202 00:07:07,280 --> 00:07:10,400 can I do other than continuously 203 00:07:08,400 --> 00:07:12,639 refresh? 204 00:07:10,400 --> 00:07:14,319 Uh I'm going to turn Wi-Fi on again. Uh 205 00:07:12,639 --> 00:07:15,440 yeah, two years. And also the funniest 206 00:07:14,319 --> 00:07:17,120 thing, which is what I was going to show 207 00:07:15,440 --> 00:07:18,639 you, is that there's official proposals. 208 00:07:17,120 --> 00:07:21,039 There's documents that people write to 209 00:07:18,639 --> 00:07:22,960 say I would like this emoji to exist. Um 210 00:07:21,039 --> 00:07:24,479 and they're hilariously funny to read 211 00:07:22,960 --> 00:07:26,080 because it is very serious. They have 212 00:07:24,479 --> 00:07:27,759 graphs. They have justifications. They 213 00:07:26,080 --> 00:07:29,520 have sort orders. But it is about an 214 00:07:27,759 --> 00:07:32,520 emoji. And I would love to show you an 215 00:07:29,520 --> 00:07:32,520 example. 216 00:07:34,960 --> 00:07:37,440 I'm I'm just going to I'm going to 217 00:07:36,080 --> 00:07:39,360 fingers crossed I'm also going to 218 00:07:37,440 --> 00:07:40,800 hotspot. Oh, this is terrible. It worked 219 00:07:39,360 --> 00:07:43,120 for the first five slides. It lled me 220 00:07:40,800 --> 00:07:47,240 into a full sense of confidence. 221 00:07:43,120 --> 00:07:47,240 Okay. Um anyway, 222 00:07:51,120 --> 00:07:55,240 uh I am hotspotting now. 223 00:07:57,680 --> 00:08:00,960 Nope. 224 00:07:59,360 --> 00:08:03,199 Oh, there's also no reception here, of 225 00:08:00,960 --> 00:08:05,360 course. Uh, I was warned about this, 226 00:08:03,199 --> 00:08:07,360 which is why I I tested it offline, but 227 00:08:05,360 --> 00:08:08,720 apparently it might just cach the first 228 00:08:07,360 --> 00:08:10,080 five slides. So, when I went to the 229 00:08:08,720 --> 00:08:10,800 first five, I thought it was going to be 230 00:08:10,080 --> 00:08:12,879 fine. 231 00:08:10,800 --> 00:08:16,360 The core networks all 232 00:08:12,879 --> 00:08:16,360 the core network 233 00:08:17,440 --> 00:08:20,680 scroll down. 234 00:08:23,120 --> 00:08:27,879 Is that through? Is it just one of the 235 00:08:29,280 --> 00:08:37,080 It's not on my list. 236 00:08:31,840 --> 00:08:37,080 Oh, ACC. Yep. Got it. 237 00:08:37,760 --> 00:08:43,360 Yeah. Are you going to hotspot me or 238 00:08:42,080 --> 00:08:46,320 I'm currently going through the core 239 00:08:43,360 --> 00:08:48,880 stuff? 240 00:08:46,320 --> 00:08:52,240 No. 241 00:08:48,880 --> 00:08:55,880 Okay. It's called spot. 242 00:08:52,240 --> 00:08:55,880 Sorry guys. Hold. 243 00:08:58,800 --> 00:09:02,760 Okay. See if I can find me. 244 00:09:03,680 --> 00:09:05,920 Oh, there you go. 245 00:09:04,959 --> 00:09:08,320 That's what he said. 246 00:09:05,920 --> 00:09:10,240 Yeah, stop it. Anyway, thank you so much 247 00:09:08,320 --> 00:09:13,240 for putting up with with this. Sorry, 248 00:09:10,240 --> 00:09:13,240 guys. 249 00:09:13,839 --> 00:09:18,080 Oh, 100%. Yikes. Like, I use that every 250 00:09:16,000 --> 00:09:21,640 day in every situation. Oh, sorry. 251 00:09:18,080 --> 00:09:21,640 Grimacine face. 252 00:09:26,560 --> 00:09:28,959 Okay, we're going to try this thing one 253 00:09:27,680 --> 00:09:30,560 more time. 254 00:09:28,959 --> 00:09:31,920 Hey, 255 00:09:30,560 --> 00:09:34,720 thank you so much to our speaker. 256 00:09:31,920 --> 00:09:36,240 Absolute legend. Okay, I might uh I have 257 00:09:34,720 --> 00:09:38,399 time. I might go a little bit faster. 258 00:09:36,240 --> 00:09:39,920 Anyway, yes, it takes lots of time. This 259 00:09:38,399 --> 00:09:41,519 slide was mostly because I love this 260 00:09:39,920 --> 00:09:42,800 little section where it goes, "No, I'm 261 00:09:41,519 --> 00:09:44,880 not going to make you dinner." And then 262 00:09:42,800 --> 00:09:46,640 it nods, which I think is kind of funny 263 00:09:44,880 --> 00:09:49,920 and often times how I've been using it. 264 00:09:46,640 --> 00:09:52,399 Get out of my way, nod. 265 00:09:49,920 --> 00:09:54,640 Uh it's very funny. Anyway, look, point 266 00:09:52,399 --> 00:09:57,040 is this is more of an aside, but the 267 00:09:54,640 --> 00:09:59,120 point is is that there is hard to put an 268 00:09:57,040 --> 00:10:00,880 emoji in, but we're beginning to get 269 00:09:59,120 --> 00:10:03,040 somewhere because we've had this concept 270 00:10:00,880 --> 00:10:04,320 of a number and we have this concept of 271 00:10:03,040 --> 00:10:06,720 something that could get printed to the 272 00:10:04,320 --> 00:10:08,800 screen and it seems like the terminal 273 00:10:06,720 --> 00:10:10,480 already has that going. So, can we 274 00:10:08,800 --> 00:10:12,399 inject some code in the middle? This is 275 00:10:10,480 --> 00:10:13,920 a lot of how I do software engineering. 276 00:10:12,399 --> 00:10:15,680 So, there is something called a font 277 00:10:13,920 --> 00:10:16,880 renderer or a text renderer which does 278 00:10:15,680 --> 00:10:18,880 something with the number to actually 279 00:10:16,880 --> 00:10:21,600 print it to screen. Can I inject 280 00:10:18,880 --> 00:10:24,160 something in there? And actually this 281 00:10:21,600 --> 00:10:25,920 led me to my next realization which is 282 00:10:24,160 --> 00:10:27,120 what is actually taking a step back. 283 00:10:25,920 --> 00:10:28,160 What's up with all these emojis? Why do 284 00:10:27,120 --> 00:10:30,079 they render differently on different 285 00:10:28,160 --> 00:10:32,079 platforms? Like I hope the whole point 286 00:10:30,079 --> 00:10:33,200 of a unic code consortium like creating 287 00:10:32,079 --> 00:10:35,200 all these emojis is that they're 288 00:10:33,200 --> 00:10:37,600 standardized, right? So like why is it 289 00:10:35,200 --> 00:10:39,360 that on iOS for some reason it has an 290 00:10:37,600 --> 00:10:41,200 extra sticker on it, but on Google no 291 00:10:39,360 --> 00:10:43,040 such information is stuck on the box, 292 00:10:41,200 --> 00:10:44,880 not compliant. And Samsung just has a 293 00:10:43,040 --> 00:10:46,399 blank one and then WhatsApp for some 294 00:10:44,880 --> 00:10:48,480 reason switches it and also isn't 295 00:10:46,399 --> 00:10:50,079 fragile. What does it say about Google 296 00:10:48,480 --> 00:10:53,120 that their emoji is fragile but none of 297 00:10:50,079 --> 00:10:55,519 the other ones are? Think about it. Um, 298 00:10:53,120 --> 00:10:56,880 but the the fundamental question here is 299 00:10:55,519 --> 00:10:59,440 why are they different? And I would like 300 00:10:56,880 --> 00:11:02,079 to rephrase this problem to you. Is this 301 00:10:59,440 --> 00:11:03,839 actually that weird? Single character 65 302 00:11:02,079 --> 00:11:05,680 renders differently in different fonts. 303 00:11:03,839 --> 00:11:06,640 Also, you should go to like Google fonts 304 00:11:05,680 --> 00:11:08,079 and just look through some of the font 305 00:11:06,640 --> 00:11:09,839 names. They get pretty crazy as like the 306 00:11:08,079 --> 00:11:12,079 less popular you go. I love just me 307 00:11:09,839 --> 00:11:13,360 again down here because try to use that 308 00:11:12,079 --> 00:11:15,760 in a casual conversation of like what 309 00:11:13,360 --> 00:11:17,040 font should I use? Um, anyway, so that's 310 00:11:15,760 --> 00:11:18,399 like a 311 00:11:17,040 --> 00:11:20,000 That's effectively how you can control 312 00:11:18,399 --> 00:11:22,079 the rendering of certain characters. And 313 00:11:20,000 --> 00:11:24,000 actually, that's the missing piece here 314 00:11:22,079 --> 00:11:26,880 is that a font renderer doesn't just 315 00:11:24,000 --> 00:11:28,160 render a single number to a glyph. It 316 00:11:26,880 --> 00:11:30,320 actually takes in a font. And the font 317 00:11:28,160 --> 00:11:32,079 helps it helps describe, in fact, 318 00:11:30,320 --> 00:11:35,120 completely describes how each character 319 00:11:32,079 --> 00:11:37,680 is rendered. So maybe all we need to do 320 00:11:35,120 --> 00:11:39,839 is make a font. 65 can map to all of 321 00:11:37,680 --> 00:11:41,200 these different types of characters. Why 322 00:11:39,839 --> 00:11:43,680 could it not map to something more 323 00:11:41,200 --> 00:11:47,200 interesting? Now, whose terminal looks 324 00:11:43,680 --> 00:11:49,360 like this? blank default settings. 325 00:11:47,200 --> 00:11:52,399 Classic respect whose terminal looks 326 00:11:49,360 --> 00:11:54,160 like this. Yeah. Little power line. When 327 00:11:52,399 --> 00:11:57,040 you set this up, did you have to install 328 00:11:54,160 --> 00:11:58,720 something called like an icon font? Very 329 00:11:57,040 --> 00:12:00,480 much so. Yeah. And that kind of was 330 00:11:58,720 --> 00:12:01,920 another hint of like, okay, well, surely 331 00:12:00,480 --> 00:12:04,079 there is a way to get a bunch of 332 00:12:01,920 --> 00:12:05,519 arbitrary images into a font because I 333 00:12:04,079 --> 00:12:07,040 did it when I set up my terminal to be 334 00:12:05,519 --> 00:12:08,399 nice and pretty. Um, you'll see my 335 00:12:07,040 --> 00:12:11,760 terminal later. I think it is very 336 00:12:08,399 --> 00:12:15,120 pretty. And uh can we then co-opt this 337 00:12:11,760 --> 00:12:17,120 method to get some kitties, right? 338 00:12:15,120 --> 00:12:19,040 Okay, so we've arrived at the point in 339 00:12:17,120 --> 00:12:20,720 the talk where all we have to do very 340 00:12:19,040 --> 00:12:22,320 easily, very quickly, is make a font 341 00:12:20,720 --> 00:12:24,320 with some kitties in it. How hard could 342 00:12:22,320 --> 00:12:27,600 it be? 343 00:12:24,320 --> 00:12:30,560 How hard 344 00:12:27,600 --> 00:12:32,399 could it be? 345 00:12:30,560 --> 00:12:33,600 Let's start super simple. When you're 346 00:12:32,399 --> 00:12:35,519 doing software engineering, you break 347 00:12:33,600 --> 00:12:37,440 the problem down as much as you can. 348 00:12:35,519 --> 00:12:39,680 Bitmap fonts. These are actually what 349 00:12:37,440 --> 00:12:41,680 every font was back in ye oldie days. 350 00:12:39,680 --> 00:12:44,240 It's very simple. Every character is 351 00:12:41,680 --> 00:12:46,000 just a little image. Uh it's a bit map 352 00:12:44,240 --> 00:12:47,360 to be specific. It is literally here is 353 00:12:46,000 --> 00:12:48,880 how big the character is and here's 354 00:12:47,360 --> 00:12:50,320 every pixel that needs to be filled. And 355 00:12:48,880 --> 00:12:52,160 this works fine. Maybe we can just use 356 00:12:50,320 --> 00:12:54,160 this method. But it does have an Oh, can 357 00:12:52,160 --> 00:12:57,200 everyone read that really easily? No. 358 00:12:54,160 --> 00:12:59,600 Let me zoom in on it. Oh 359 00:12:57,200 --> 00:13:01,839 yeah. Kind of ugly, huh? Yeah. Turns out 360 00:12:59,600 --> 00:13:03,519 bitmap forms don't scale very well. Um 361 00:13:01,839 --> 00:13:04,959 obviously earlier computers you only 362 00:13:03,519 --> 00:13:06,720 really had like one text size. That's 363 00:13:04,959 --> 00:13:08,160 fine. Uh but once we started adding 364 00:13:06,720 --> 00:13:10,000 more, we just generated more bit map 365 00:13:08,160 --> 00:13:11,760 points. someone would handdraw every 366 00:13:10,000 --> 00:13:13,839 character in multiple different sizes. 367 00:13:11,760 --> 00:13:16,000 That's how we dealt with it. But in 368 00:13:13,839 --> 00:13:17,200 today's age, maybe you have a user who 369 00:13:16,000 --> 00:13:18,720 needs accessibility needs and wants to 370 00:13:17,200 --> 00:13:20,160 really pump up the screen size, sorry, 371 00:13:18,720 --> 00:13:21,600 the font size. Maybe you have someone 372 00:13:20,160 --> 00:13:23,040 who's a power user and wants as much 373 00:13:21,600 --> 00:13:24,480 text possible on their screen at one 374 00:13:23,040 --> 00:13:26,000 point and they want to make it small. 375 00:13:24,480 --> 00:13:27,839 You kind of need to support an arbitrary 376 00:13:26,000 --> 00:13:29,680 amount of font sizes. So, it doesn't 377 00:13:27,839 --> 00:13:33,200 work for us. I want my kitty to render 378 00:13:29,680 --> 00:13:34,399 in all possible sizes. So, this is a 379 00:13:33,200 --> 00:13:36,000 little demonstration of why this 380 00:13:34,399 --> 00:13:37,600 happens. Effectively, if I have one 381 00:13:36,000 --> 00:13:40,000 pixel on the left and I'm trying to map 382 00:13:37,600 --> 00:13:42,320 it to a new resolution, I believe 383 00:13:40,000 --> 00:13:44,560 actually the last slide. That's fine. 384 00:13:42,320 --> 00:13:46,079 Oh, yeah. Last slide, that's like 1.75 385 00:13:44,560 --> 00:13:47,760 times bigger, which is important because 386 00:13:46,079 --> 00:13:49,680 if it was an exact power of two, it 387 00:13:47,760 --> 00:13:51,200 would actually easily scale. Yeah. But 388 00:13:49,680 --> 00:13:53,200 in this one, you can see it's sort of 389 00:13:51,200 --> 00:13:54,240 like half supposed to be covering some. 390 00:13:53,200 --> 00:13:56,240 There's many different ways you can 391 00:13:54,240 --> 00:13:57,920 handle this. Most text renderers go for 392 00:13:56,240 --> 00:14:00,079 this approach where you blur across 393 00:13:57,920 --> 00:14:03,680 different um pixels. Uh, and it's ugly. 394 00:14:00,079 --> 00:14:05,839 I don't like it. So, what about vector 395 00:14:03,680 --> 00:14:06,880 fonts? 396 00:14:05,839 --> 00:14:09,120 Oh yeah, I forgot to put that in there. 397 00:14:06,880 --> 00:14:10,480 Yeah, it is here. I don't know. Um, 398 00:14:09,120 --> 00:14:12,560 vector fonts are kind of an amazing 399 00:14:10,480 --> 00:14:13,360 concept, and I I would like to spend a 400 00:14:12,560 --> 00:14:14,560 little bit of time talking about them 401 00:14:13,360 --> 00:14:16,079 because I think they're a phenomenal way 402 00:14:14,560 --> 00:14:18,320 to solve this problem. Uh, but 403 00:14:16,079 --> 00:14:21,040 effectively, what if instead of encoding 404 00:14:18,320 --> 00:14:24,160 every single pixel, we encoded the vibes 405 00:14:21,040 --> 00:14:25,519 and a kind of looks like this. And if 406 00:14:24,160 --> 00:14:27,839 you put a little bit of more rigor into 407 00:14:25,519 --> 00:14:29,519 that, you come up with vector uh vector 408 00:14:27,839 --> 00:14:30,880 formats. Uh, if you've ever worked with 409 00:14:29,519 --> 00:14:33,120 SVG, this should probably be quite 410 00:14:30,880 --> 00:14:34,800 familiar. Um, but effectively you have a 411 00:14:33,120 --> 00:14:36,560 little pen and you tell the pen where to 412 00:14:34,800 --> 00:14:37,760 go. And the nice thing about this, 413 00:14:36,560 --> 00:14:40,160 actually, let's go through a little 414 00:14:37,760 --> 00:14:42,560 example. Here's a little little pen. 415 00:14:40,160 --> 00:14:44,639 I've moved it to the pixel 14. I can 416 00:14:42,560 --> 00:14:46,639 then draw a line to 18. Note that I 417 00:14:44,639 --> 00:14:47,920 didn't actually say fill in the pixels 418 00:14:46,639 --> 00:14:49,920 between these two points. I just say 419 00:14:47,920 --> 00:14:53,199 draw to this point. And then I can even 420 00:14:49,920 --> 00:14:55,519 do curves. Uh, in the appendex is a link 421 00:14:53,199 --> 00:14:57,360 to a video uh by Freya who explains how 422 00:14:55,519 --> 00:14:58,720 Bezio curves work. It is a phenomenal 423 00:14:57,360 --> 00:14:59,920 video, but it is very complicated. 424 00:14:58,720 --> 00:15:01,199 Bezier curves are actually a whole field 425 00:14:59,920 --> 00:15:02,959 of mathematics. though I'm not going to 426 00:15:01,199 --> 00:15:04,320 talk about them here but trust you can 427 00:15:02,959 --> 00:15:08,000 just curve mathematically 428 00:15:04,320 --> 00:15:09,839 deterministically. Um and then you can 429 00:15:08,000 --> 00:15:11,279 scale this up. And the nice thing is is 430 00:15:09,839 --> 00:15:13,920 because we've stored not pixel 431 00:15:11,279 --> 00:15:16,079 information but instructions you can 432 00:15:13,920 --> 00:15:18,800 scale this up with arbitrary resolutions 433 00:15:16,079 --> 00:15:22,560 and suddenly you have smooth lines no 434 00:15:18,800 --> 00:15:24,560 matter what the screen size is. 435 00:15:22,560 --> 00:15:26,639 So here's a little video. I think I took 436 00:15:24,560 --> 00:15:27,839 this from Arl Hugh. Yep. This is a very 437 00:15:26,639 --> 00:15:30,639 cool YouTube video he made about how 438 00:15:27,839 --> 00:15:32,240 fonts work. Uh, and you can see how line 439 00:15:30,639 --> 00:15:36,480 by line with a little pen you can draw a 440 00:15:32,240 --> 00:15:38,480 G. Isn't that awesome? Um, so how do I 441 00:15:36,480 --> 00:15:40,240 do this? I went online. There is a 442 00:15:38,480 --> 00:15:42,800 beautiful uh community of open source 443 00:15:40,240 --> 00:15:44,639 artists who like to um give out assets 444 00:15:42,800 --> 00:15:46,639 for free like with with full licensing 445 00:15:44,639 --> 00:15:48,959 and I love that. Uh this one's Elan. He 446 00:15:46,639 --> 00:15:51,600 also has um paid sprites. If you need 447 00:15:48,959 --> 00:15:53,279 sprites, maybe check him out. Uh and I 448 00:15:51,600 --> 00:15:55,600 stole this little one. I say stole took 449 00:15:53,279 --> 00:15:57,920 with licensing. Um and I converted it 450 00:15:55,600 --> 00:15:59,600 into a little font. I took each pixel uh 451 00:15:57,920 --> 00:16:01,920 pixel cat and I just filled it in with 452 00:15:59,600 --> 00:16:03,600 black. Um fonts don't have to be 453 00:16:01,920 --> 00:16:05,759 monochromatic. It helps if they are. It 454 00:16:03,600 --> 00:16:08,079 makes it easier. Um and I made this 455 00:16:05,759 --> 00:16:11,199 little asset. You can actually see this 456 00:16:08,079 --> 00:16:13,680 little one is from the same spreadsheet. 457 00:16:11,199 --> 00:16:15,199 Cool. Let's make it. 458 00:16:13,680 --> 00:16:17,920 But there's one question we need to 459 00:16:15,199 --> 00:16:20,160 answer. What uniode character do we give 460 00:16:17,920 --> 00:16:21,759 the kitty? Right. We can't just chuck it 461 00:16:20,160 --> 00:16:25,519 in. It needs something to reference it. 462 00:16:21,759 --> 00:16:29,320 Well, I said whatever. E. What could go 463 00:16:25,519 --> 00:16:29,320 wrong? Um, 464 00:16:29,600 --> 00:16:33,079 oh no. 465 00:16:36,480 --> 00:16:39,839 Oh, that's funny. It that's fine. It's 466 00:16:38,320 --> 00:16:42,160 going to work. I'm going to reconnect to 467 00:16:39,839 --> 00:16:44,639 this. 468 00:16:42,160 --> 00:16:47,279 I think PyCon the PyCon Wi-Fi network 469 00:16:44,639 --> 00:16:50,279 slightly loaded again and it went back. 470 00:16:47,279 --> 00:16:50,279 Yeah. 471 00:16:51,839 --> 00:16:58,560 Uh, 472 00:16:54,560 --> 00:17:00,880 okay. Sure. Okay. Um, yeah, I I try to 473 00:16:58,560 --> 00:17:02,160 run it and I just get an E out actually. 474 00:17:00,880 --> 00:17:03,360 Oh, that is annoying. This was going to 475 00:17:02,160 --> 00:17:04,480 be a lot more of a funnier joke with 476 00:17:03,360 --> 00:17:06,799 like the I was going to do a setup for 477 00:17:04,480 --> 00:17:09,039 it, but I will. Um, can you all give me 478 00:17:06,799 --> 00:17:11,120 a polite laugh? Thank you. Thank you 479 00:17:09,039 --> 00:17:13,120 very much. Oh, and the applause. Oh, 480 00:17:11,120 --> 00:17:14,400 please guys. Uh, yeah. Okay. Well, for 481 00:17:13,120 --> 00:17:15,919 whatever reason, it's not working. And 482 00:17:14,400 --> 00:17:18,000 this brings us to an interesting problem 483 00:17:15,919 --> 00:17:21,039 of how do we actually get the font to 484 00:17:18,000 --> 00:17:22,400 work? Now I I threw this image in 485 00:17:21,039 --> 00:17:24,959 because I did a practice run of this 486 00:17:22,400 --> 00:17:27,039 talk with a friend and as I was 487 00:17:24,959 --> 00:17:28,880 explaining to him how operating systems 488 00:17:27,039 --> 00:17:30,799 do font resolution, he was like, "Oh 489 00:17:28,880 --> 00:17:32,960 yeah, like Swiss cheese." And I looked 490 00:17:30,799 --> 00:17:35,679 at it blankly and he went, "Oh yeah, cuz 491 00:17:32,960 --> 00:17:36,880 like every word, sorry, every glyph goes 492 00:17:35,679 --> 00:17:38,480 through multiple different fonts until 493 00:17:36,880 --> 00:17:39,760 it gets a hit." Kind of like if you 494 00:17:38,480 --> 00:17:43,440 layered Swiss cheese on top of each 495 00:17:39,760 --> 00:17:45,120 other. Um, and I'm going to be Thank 496 00:17:43,440 --> 00:17:46,799 you. I I really just wanted to say that 497 00:17:45,120 --> 00:17:48,640 cuz um I thought it was funny more than 498 00:17:46,799 --> 00:17:51,679 anything else. Uh another way to look at 499 00:17:48,640 --> 00:17:53,520 it is like this where the major takeaway 500 00:17:51,679 --> 00:17:55,919 here is that you're whenever you're 501 00:17:53,520 --> 00:17:57,200 rendering uh a piece of text, you don't 502 00:17:55,919 --> 00:17:58,640 actually render it like sentence by 503 00:17:57,200 --> 00:18:01,200 sentence or word by word. You render it 504 00:17:58,640 --> 00:18:03,440 glyph by glyph. So every single letter 505 00:18:01,200 --> 00:18:05,679 in a sentence goes through and checks 506 00:18:03,440 --> 00:18:08,000 for what font do I have installed that 507 00:18:05,679 --> 00:18:09,120 tells me how to render this. Not so most 508 00:18:08,000 --> 00:18:12,559 fonts don't actually have the full 509 00:18:09,120 --> 00:18:14,000 unicode like uh set in it. There's a lot 510 00:18:12,559 --> 00:18:15,360 of characters in the unic code set and 511 00:18:14,000 --> 00:18:16,799 for the most part if I was making a 512 00:18:15,360 --> 00:18:18,480 font, it'd be ridiculous for me to draw 513 00:18:16,799 --> 00:18:20,240 every possible character in like the 514 00:18:18,480 --> 00:18:22,480 Arabic alphabet, especially if I'm not 515 00:18:20,240 --> 00:18:24,080 planning to use the Arabic alphabet. So, 516 00:18:22,480 --> 00:18:26,000 what your browser will do is it'll go 517 00:18:24,080 --> 00:18:28,320 through an order and it will check each 518 00:18:26,000 --> 00:18:29,600 font until it hits one of them that can 519 00:18:28,320 --> 00:18:32,080 render the character. So, you can see 520 00:18:29,600 --> 00:18:34,160 here H actually isn't defined in let's 521 00:18:32,080 --> 00:18:36,640 say this this hypothetical Japanese font 522 00:18:34,160 --> 00:18:38,400 or in this icon font, but it is in this 523 00:18:36,640 --> 00:18:39,600 uh font called Apache Mono, which is the 524 00:18:38,400 --> 00:18:42,480 font I use for this. It's one of my 525 00:18:39,600 --> 00:18:44,080 favorite fonts. Um, then the next one is 526 00:18:42,480 --> 00:18:46,080 in the first Japanese font, so it hits 527 00:18:44,080 --> 00:18:48,080 and it renders correctly. And same thing 528 00:18:46,080 --> 00:18:50,000 with the icon font. And this is nice. It 529 00:18:48,080 --> 00:18:52,400 means we can actually make a font with 530 00:18:50,000 --> 00:18:54,080 literally exactly four characters in it, 531 00:18:52,400 --> 00:18:56,080 which are the four sprites I want for my 532 00:18:54,080 --> 00:18:57,120 cat. And I can just install it. And as 533 00:18:56,080 --> 00:18:59,280 long as I make sure that there's no 534 00:18:57,120 --> 00:19:01,120 clashes, it'll always work, which is 535 00:18:59,280 --> 00:19:02,720 really nice. And we don't have to worry 536 00:19:01,120 --> 00:19:06,720 about also designing like a cat version 537 00:19:02,720 --> 00:19:08,320 of H and E and L and L. So, all right. 538 00:19:06,720 --> 00:19:10,880 Yeah. Okay. So, I've installed it 539 00:19:08,320 --> 00:19:12,559 correctly, but if you remember, we 540 00:19:10,880 --> 00:19:14,559 actually we bound it to E. So, now every 541 00:19:12,559 --> 00:19:17,679 time an E pops up, a little kitty comes. 542 00:19:14,559 --> 00:19:20,400 But I will say I kind of love this. I 543 00:19:17,679 --> 00:19:22,160 almost left it. Uh, but no, let's let's 544 00:19:20,400 --> 00:19:23,840 do this properly. How do those uh icon 545 00:19:22,160 --> 00:19:25,600 fonts work? They don't have any issues 546 00:19:23,840 --> 00:19:27,840 rendering the icons with other text, 547 00:19:25,600 --> 00:19:30,080 right? And it's because the Unicode 548 00:19:27,840 --> 00:19:32,720 Consortium in their endless uh mercy 549 00:19:30,080 --> 00:19:34,480 have given us a block, actually several 550 00:19:32,720 --> 00:19:36,000 blocks called private use blocks. 551 00:19:34,480 --> 00:19:37,520 Basically, they go, "Here's a block of 552 00:19:36,000 --> 00:19:39,600 unicode characters. Use them for 553 00:19:37,520 --> 00:19:41,120 whatever you want." They can't ensure 554 00:19:39,600 --> 00:19:42,559 that two different fonts you've 555 00:19:41,120 --> 00:19:45,039 downloaded off the internet don't both 556 00:19:42,559 --> 00:19:47,120 use the same unicode uh point in the 557 00:19:45,039 --> 00:19:48,880 private use. But they are promising that 558 00:19:47,120 --> 00:19:51,360 the core consortium will never use 559 00:19:48,880 --> 00:19:52,720 these. These are like free to use. Um 560 00:19:51,360 --> 00:19:54,000 but it is funny cuz then every single 561 00:19:52,720 --> 00:19:55,280 icon font you download uses the same 562 00:19:54,000 --> 00:19:58,799 range. So actually they still fight with 563 00:19:55,280 --> 00:20:02,720 each other. But uh I'm going to use this 564 00:19:58,799 --> 00:20:04,480 and it's a little kitty. That's it. You 565 00:20:02,720 --> 00:20:06,799 install it on your operating system. Oh, 566 00:20:04,480 --> 00:20:10,080 thank you. Thank you. 567 00:20:06,799 --> 00:20:11,440 This took weeks. Anyway, um it I'm 568 00:20:10,080 --> 00:20:12,799 skimming over a lot of the complexities 569 00:20:11,440 --> 00:20:15,840 of actually making a font. It is 570 00:20:12,799 --> 00:20:18,960 horrific. If if anyone is uh interested 571 00:20:15,840 --> 00:20:20,640 in font making, uh maybe don't. Uh so, 572 00:20:18,960 --> 00:20:22,080 no, I'm kidding. It's it's very 573 00:20:20,640 --> 00:20:23,840 complicated and the tooling is quite uh 574 00:20:22,080 --> 00:20:25,760 intense. But you have a little kitty now 575 00:20:23,840 --> 00:20:28,080 and it works fine. Isn't that beautiful? 576 00:20:25,760 --> 00:20:30,400 So, now the question comes, can I make 577 00:20:28,080 --> 00:20:33,120 it move? I don't want this little kid 578 00:20:30,400 --> 00:20:35,520 kitty to just uh sit there and be pretty 579 00:20:33,120 --> 00:20:37,360 as much as it is. Uh I want it to move, 580 00:20:35,520 --> 00:20:39,039 maybe eat an apple, you know, be a 581 00:20:37,360 --> 00:20:41,120 little teamagotchi. 582 00:20:39,039 --> 00:20:43,280 So this comes into a the sort of the 583 00:20:41,120 --> 00:20:47,200 next the chapter three of this talk. Um 584 00:20:43,280 --> 00:20:49,679 which is how far can we push this? 585 00:20:47,200 --> 00:20:51,840 Turns out pretty far people have 586 00:20:49,679 --> 00:20:54,080 actually been using fonts to imitate 587 00:20:51,840 --> 00:20:56,240 motion for a while. So there's a little 588 00:20:54,080 --> 00:20:58,480 font that comes pre-installed on uh 589 00:20:56,240 --> 00:21:00,559 Windows computers called Myro Boot. Does 590 00:20:58,480 --> 00:21:03,360 anyone feel like this little loader is 591 00:21:00,559 --> 00:21:05,520 familiar at all? Yeah, it's the Windows 592 00:21:03,360 --> 00:21:07,039 10, I believe, or 11 loader, uh, which 593 00:21:05,520 --> 00:21:08,880 specifically usually pops up when you've 594 00:21:07,039 --> 00:21:10,720 blue screened of death to your computer. 595 00:21:08,880 --> 00:21:11,840 Uh, which I did several times. Uh, and 596 00:21:10,720 --> 00:21:13,520 yeah, it turns out that in that 597 00:21:11,840 --> 00:21:14,559 environment, I mean, I guess I'm I'm not 598 00:21:13,520 --> 00:21:15,679 an engineer of Windows, so I can't 599 00:21:14,559 --> 00:21:17,120 guarantee this, but my assumption is 600 00:21:15,679 --> 00:21:19,360 that in that environment, it was easier 601 00:21:17,120 --> 00:21:21,360 to just put these glyphs into the font 602 00:21:19,360 --> 00:21:23,840 and then just update the text every like 603 00:21:21,360 --> 00:21:26,159 half a second to get the desired effect 604 00:21:23,840 --> 00:21:28,320 than it was to import a full video 605 00:21:26,159 --> 00:21:32,000 renderer or or like a GIF renderer or 606 00:21:28,320 --> 00:21:33,840 GIF. Um, and it allows you to sort of 607 00:21:32,000 --> 00:21:35,679 like circumvent a lot of code by just 608 00:21:33,840 --> 00:21:37,280 leveraging something that you you have 609 00:21:35,679 --> 00:21:38,559 to set up a text renderer on every 610 00:21:37,280 --> 00:21:39,760 screen anyway. If you want to render 611 00:21:38,559 --> 00:21:40,720 text to the user, you set up a text 612 00:21:39,760 --> 00:21:42,159 render drawer and then you can just kind 613 00:21:40,720 --> 00:21:44,559 of piggy back off of that instead of 614 00:21:42,159 --> 00:21:46,400 having to do extra work. Uh but 615 00:21:44,559 --> 00:21:48,240 effectively not very complicated. It's 616 00:21:46,400 --> 00:21:50,240 just a spreadsheet if um we have any 617 00:21:48,240 --> 00:21:51,919 like people who know the lingo from the 618 00:21:50,240 --> 00:21:53,600 game dev community. Uh you can have 619 00:21:51,919 --> 00:21:56,480 individual glyphs and you just cycle 620 00:21:53,600 --> 00:21:58,720 through them. So fonts can be sprite 621 00:21:56,480 --> 00:22:00,320 sheets. Here's what I've done. Four 622 00:21:58,720 --> 00:22:02,640 exactly. Actually there's a there's a 623 00:22:00,320 --> 00:22:05,039 fifth uh kitty that I'll show you later. 624 00:22:02,640 --> 00:22:07,120 Um that if you they're very subtle. The 625 00:22:05,039 --> 00:22:08,960 tail is about wagging up and down. It's 626 00:22:07,120 --> 00:22:10,480 very simple. And all I've done is I put 627 00:22:08,960 --> 00:22:12,480 this into the font and then I wrote a 628 00:22:10,480 --> 00:22:14,960 Python program to just cycle through 629 00:22:12,480 --> 00:22:18,679 each of those characters. I think I did 630 00:22:14,960 --> 00:22:18,679 like every half a second, 631 00:22:18,880 --> 00:22:24,960 right? Isn't it adorable? Yeah. Look at 632 00:22:21,840 --> 00:22:26,480 it go. Um, so yeah, that allows us to 633 00:22:24,960 --> 00:22:29,120 give motion. And since you can move 634 00:22:26,480 --> 00:22:30,480 where the character is uh in a certain 635 00:22:29,120 --> 00:22:32,240 block of text, it could also walk 636 00:22:30,480 --> 00:22:34,880 around. You could change it walking 637 00:22:32,240 --> 00:22:38,320 animation. You could do a lot here. Um, 638 00:22:34,880 --> 00:22:41,480 in fact, could we could we run Doom, do 639 00:22:38,320 --> 00:22:41,480 you reckon? 640 00:22:41,679 --> 00:22:45,919 I I don't know. I think it could be 641 00:22:42,880 --> 00:22:47,600 possible. Uh, but no, I I did briefly 642 00:22:45,919 --> 00:22:49,600 consider pivoting this talk hard into 643 00:22:47,600 --> 00:22:51,679 how I could run Doom through a font. Uh, 644 00:22:49,600 --> 00:22:52,880 and I did I I got a little into it, but 645 00:22:51,679 --> 00:22:56,159 no, it turned out to be a huge 646 00:22:52,880 --> 00:22:59,440 undertaking. Um, sadly, because I don't 647 00:22:56,159 --> 00:23:02,320 think you can compile C to a font yet. 648 00:22:59,440 --> 00:23:03,919 So, instead, I've thought about what 649 00:23:02,320 --> 00:23:05,440 else I can use. What what kind of 650 00:23:03,919 --> 00:23:07,919 features of a font can I leverage here 651 00:23:05,440 --> 00:23:09,679 to give me more functionality? And one 652 00:23:07,919 --> 00:23:10,799 thing I wanted was if two kitties are on 653 00:23:09,679 --> 00:23:13,919 the screen and they get close to each 654 00:23:10,799 --> 00:23:16,720 other, I want them to hold hands. 655 00:23:13,919 --> 00:23:18,240 Very simple. And I could do this by just 656 00:23:16,720 --> 00:23:19,600 detecting when two kitties are close to 657 00:23:18,240 --> 00:23:21,280 each other and then replacing them. Why 658 00:23:19,600 --> 00:23:23,919 would I? That's ridiculous. Have you 659 00:23:21,280 --> 00:23:25,760 heard about multi character liatures? 660 00:23:23,919 --> 00:23:28,320 This is this cool This is this cool 661 00:23:25,760 --> 00:23:30,080 system where uh if you're a programmer 662 00:23:28,320 --> 00:23:31,760 and you use I think FOR code is the most 663 00:23:30,080 --> 00:23:33,039 popular font that does this. Um, if you 664 00:23:31,760 --> 00:23:34,880 have two equal signs next to each other, 665 00:23:33,039 --> 00:23:37,200 it combines them into a single nice 666 00:23:34,880 --> 00:23:39,600 pretty glyph. Same with like a bunch of 667 00:23:37,200 --> 00:23:40,799 other ones. And also, and I have a 668 00:23:39,600 --> 00:23:42,960 little caveat here, this isn't 669 00:23:40,799 --> 00:23:44,559 technically a multi character liature in 670 00:23:42,960 --> 00:23:46,400 like the implementation of it. Uh, but 671 00:23:44,559 --> 00:23:48,240 there's something called ZWJ emoji 672 00:23:46,400 --> 00:23:50,640 sequences, which stands for zero width 673 00:23:48,240 --> 00:23:52,080 joiner, which is if you have an emoji, a 674 00:23:50,640 --> 00:23:54,000 special glue character, and another 675 00:23:52,080 --> 00:23:55,679 emoji, the font renderer reads that as 676 00:23:54,000 --> 00:23:57,760 one block, combines them, and then 677 00:23:55,679 --> 00:23:59,200 produces a different glyph. So a lot of 678 00:23:57,760 --> 00:24:01,679 emojis that we use are actually 679 00:23:59,200 --> 00:24:04,159 combinations of existing emojis. Uh for 680 00:24:01,679 --> 00:24:06,320 example, I believe uh man and holding 681 00:24:04,159 --> 00:24:10,000 hand are two men holding hands. Makes 682 00:24:06,320 --> 00:24:12,960 sense. Um yeah. So can we leverage this 683 00:24:10,000 --> 00:24:16,400 to our advantage? I would like to say 684 00:24:12,960 --> 00:24:17,600 this alone took me hours cuz the way 685 00:24:16,400 --> 00:24:18,720 that you have to define them in the font 686 00:24:17,600 --> 00:24:22,159 files is actually surprisingly 687 00:24:18,720 --> 00:24:24,880 complicated. But 688 00:24:22,159 --> 00:24:25,840 oh sorry 689 00:24:24,880 --> 00:24:26,960 actually you know what? Let's jump 690 00:24:25,840 --> 00:24:30,360 forward. I want to show you this. I want 691 00:24:26,960 --> 00:24:30,360 to show you it working. 692 00:24:30,559 --> 00:24:35,440 Cute. Uh, so this other slide is 693 00:24:32,960 --> 00:24:37,200 actually because um I was thinking about 694 00:24:35,440 --> 00:24:39,600 what are the actual use cases for this 695 00:24:37,200 --> 00:24:41,279 other than multic character liatures and 696 00:24:39,600 --> 00:24:42,480 making the kitties hold hands. Also, you 697 00:24:41,279 --> 00:24:44,080 can see that because of the way that the 698 00:24:42,480 --> 00:24:45,360 character works, it had to like reduce 699 00:24:44,080 --> 00:24:46,640 the size, but that's okay because 700 00:24:45,360 --> 00:24:48,799 they're scalable vector graphics and we 701 00:24:46,640 --> 00:24:50,080 could scale it back up. Uh, but yeah. So 702 00:24:48,799 --> 00:24:51,679 other examples of this and one of my 703 00:24:50,080 --> 00:24:53,200 favorite ones is that if you download 704 00:24:51,679 --> 00:24:54,960 like Google's product font and you type 705 00:24:53,200 --> 00:24:56,640 in Google logo that is a multi character 706 00:24:54,960 --> 00:24:59,520 liature that then gets replaced with 707 00:24:56,640 --> 00:25:01,520 like a high resolution logo. Yeah. Which 708 00:24:59,520 --> 00:25:02,799 I thought was kind of cool. Um so 709 00:25:01,520 --> 00:25:03,760 there's actually a lot of power here. If 710 00:25:02,799 --> 00:25:05,600 there's one thing I'd like you to take 711 00:25:03,760 --> 00:25:08,000 away from this talk is that you can push 712 00:25:05,600 --> 00:25:10,400 fonts pretty far and it might be an 713 00:25:08,000 --> 00:25:12,159 unusual or an unexpected solution to a 714 00:25:10,400 --> 00:25:14,080 problem you've run into. The my boot 715 00:25:12,159 --> 00:25:16,240 example is I think is a very fun one. Uh 716 00:25:14,080 --> 00:25:17,200 but there's a bunch of other examples. I 717 00:25:16,240 --> 00:25:18,559 didn't have time to mention them all 718 00:25:17,200 --> 00:25:20,480 where I've seen people use fonts quite 719 00:25:18,559 --> 00:25:21,919 cleverly to solve problems. And the 720 00:25:20,480 --> 00:25:23,279 purpose of this talk mostly is to be 721 00:25:21,919 --> 00:25:25,440 like, hey, that's a thing that can 722 00:25:23,279 --> 00:25:28,559 happen. So, we have little kitties. 723 00:25:25,440 --> 00:25:30,159 They're holding hands. Um, now this is 724 00:25:28,559 --> 00:25:33,880 officially the end of my talk. If you'd 725 00:25:30,159 --> 00:25:33,880 like to applause, you can. 726 00:25:35,840 --> 00:25:39,520 Um, but since I have 5 minutes left, I 727 00:25:38,240 --> 00:25:40,799 might do one appendex slide and then 728 00:25:39,520 --> 00:25:42,640 we'll move on because there's one other 729 00:25:40,799 --> 00:25:45,919 thing I want to mention, which is 730 00:25:42,640 --> 00:25:47,919 variable fonts. So the the concept of a 731 00:25:45,919 --> 00:25:49,600 font has actually evolved. And in the 732 00:25:47,919 --> 00:25:53,760 same way that we now have this nice 733 00:25:49,600 --> 00:25:55,279 ability for a uh single font file to be 734 00:25:53,760 --> 00:25:57,600 able to render a character at any 735 00:25:55,279 --> 00:25:59,520 arbitrary file, sorry, font size. That's 736 00:25:57,600 --> 00:26:00,880 awesome. Why can't we do that with font 737 00:25:59,520 --> 00:26:02,400 weight? If anyone has actually 738 00:26:00,880 --> 00:26:05,200 downloaded a font family, it's usually 739 00:26:02,400 --> 00:26:07,760 like seven copies for each font weight. 740 00:26:05,200 --> 00:26:11,039 Usually like semi black, black, bold, uh 741 00:26:07,760 --> 00:26:12,240 light, regular. Uh so variable fonts are 742 00:26:11,039 --> 00:26:14,559 kind of a solution to this and they 743 00:26:12,240 --> 00:26:16,799 allow you to define in the font file an 744 00:26:14,559 --> 00:26:18,640 axis and the axis can be basically 745 00:26:16,799 --> 00:26:20,240 anything. The spec is actually very 746 00:26:18,640 --> 00:26:22,400 loose but practically you mostly use it 747 00:26:20,240 --> 00:26:24,080 for things like font weight is now 748 00:26:22,400 --> 00:26:25,919 arbitrarily renderable. You store 749 00:26:24,080 --> 00:26:27,360 instructions on how to render the 750 00:26:25,919 --> 00:26:29,840 thickness of a stroke differently 751 00:26:27,360 --> 00:26:31,520 depending on this uh access variable. Uh 752 00:26:29,840 --> 00:26:33,679 you can do it here. I believe this one 753 00:26:31,520 --> 00:26:35,360 is Yep. It's like a standard. You can 754 00:26:33,679 --> 00:26:37,679 see that it's not it's also nonlinear. 755 00:26:35,360 --> 00:26:39,600 the middle of the S gets fatter as you 756 00:26:37,679 --> 00:26:41,760 sort of slide it to the right faster 757 00:26:39,600 --> 00:26:43,279 than the slide goes. Uh, this one's very 758 00:26:41,760 --> 00:26:45,200 cool. This is a space filling one. So, 759 00:26:43,279 --> 00:26:46,400 as you sort of expand it, it'll take up 760 00:26:45,200 --> 00:26:48,240 more and more space. The character 761 00:26:46,400 --> 00:26:50,080 fundamentally changes how it renders and 762 00:26:48,240 --> 00:26:51,760 the points it renders against, which is 763 00:26:50,080 --> 00:26:53,440 very cool. Um, and I forget what this 764 00:26:51,760 --> 00:26:54,720 last one was doing. And because this is 765 00:26:53,440 --> 00:26:57,200 a gif, I just have to like patiently 766 00:26:54,720 --> 00:27:00,159 wait for it to cycle back around. See, 767 00:26:57,200 --> 00:27:02,720 also very cool. Um, oh, I never get 768 00:27:00,159 --> 00:27:04,720 there. Anyway, it's fine. Uh point is is 769 00:27:02,720 --> 00:27:06,159 that this is actually probably like if I 770 00:27:04,720 --> 00:27:07,279 was going to make Doom in a font, this 771 00:27:06,159 --> 00:27:08,799 is probably where I would begin with an 772 00:27:07,279 --> 00:27:11,200 axis for time and see how far I could 773 00:27:08,799 --> 00:27:13,279 push it. Uh but this is a cool future 774 00:27:11,200 --> 00:27:14,400 implication. Sorry, iteration. Uh maybe 775 00:27:13,279 --> 00:27:16,400 the most important of which is being 776 00:27:14,400 --> 00:27:17,919 optical size where if you're rendering 777 00:27:16,400 --> 00:27:19,120 at a small size, you actually want to 778 00:27:17,919 --> 00:27:21,039 change the way your character renders 779 00:27:19,120 --> 00:27:22,640 almost entirely to maximize for 780 00:27:21,039 --> 00:27:23,760 legibility. Whereas if you're rendering 781 00:27:22,640 --> 00:27:25,360 as like a huge heading, you can kind of 782 00:27:23,760 --> 00:27:27,679 be a lot more interesting and cursive 783 00:27:25,360 --> 00:27:30,080 and, you know, uh play around with your 784 00:27:27,679 --> 00:27:32,080 glyph a lot more. Um so this gives you a 785 00:27:30,080 --> 00:27:33,520 way to do that. Uh, that's about it. 786 00:27:32,080 --> 00:27:35,760 Here's a little link to the video if you 787 00:27:33,520 --> 00:27:38,919 want to watch Freya's video on Bezier. 788 00:27:35,760 --> 00:27:38,919 Thank you. 789 00:27:45,039 --> 00:27:49,120 Thank you for the Wi-Fi. 790 00:27:47,279 --> 00:27:50,720 Thank you. I I think that was the most 791 00:27:49,120 --> 00:27:53,440 useful talk I've seen at this conference 792 00:27:50,720 --> 00:27:57,440 so far. Stuff I learned in my 793 00:27:53,440 --> 00:28:01,039 Stop it. Okay, I'm I'm sorry. 794 00:27:57,440 --> 00:28:06,520 I think we have time for one question. 795 00:28:01,039 --> 00:28:06,520 Yes. Um, do we have a room monitor? 796 00:28:11,120 --> 00:28:15,600 Where can I download the kitty font? 797 00:28:13,600 --> 00:28:17,760 I will upload it to GitHub. But it is 798 00:28:15,600 --> 00:28:19,120 exactly the five gips. 799 00:28:17,760 --> 00:28:20,799 I don't care. I still want it. 800 00:28:19,120 --> 00:28:21,679 I'll get I will upload it to GitHub. I 801 00:28:20,799 --> 00:28:23,600 got you. 802 00:28:21,679 --> 00:28:25,360 I'll post in the Discord. 803 00:28:23,600 --> 00:28:27,360 Thank you. That was the correct 804 00:28:25,360 --> 00:28:29,600 question. 805 00:28:27,360 --> 00:28:31,039 Uh, thanks everyone. 10-minute break. Uh 806 00:28:29,600 --> 00:28:32,799 please be here for the next talk which 807 00:28:31,039 --> 00:28:35,799 is Benner ranting about something or 808 00:28:32,799 --> 00:28:35,799 other.