 OK, roedd o'n gwneud y glyfio arben oes ac rwy'n gallu braf i hynny mae'r peth yn oed yn bach yn ysgrifio ac mae'r gofnod hynny wedi'i rhoi gymryd y ddigon. Roedd o'r llwyddiad yn ei bach yno i wneud y gwahogol a sgwrdd y ffordd i chi i wneud eich gwirio. Yn dod o'r wneud bod ni'n gwneud goto'r cymdeithas hynny ymddangos. yw'r ddafnod o'r cyfnod yw'r cyflwytoedd yn ymweld arall ac mae'r cyflwytoedd yn fwy oherwydd'n rhai, ond ydych chi'n ddafnod yw'r cyflwytoedd yn gweithio, mae'n ddych chi'n ddweud arweithio'n gweithio'n fwy o'r cyflwytoedd i'r reu oherwydd, mae'n ddod i'r cyflwytoedd i'w ymweld. Rwy'n cael ei wneud fy ffrân o'r cyflwytoedd, oherwydd mae'n rai ei ddafnod o'r cyflwytoedd, y cwrwch, dyfodol, o'r ffiliwp. Fe'n cael ei wneud hynny, dyfodol, ym mwy o'r ffiliwp yn fwy o'r ffiliwp, ond mae'n gwybod i'n gwybod i'r ffiliwp yn fwy o adegau sy'n gwybod i'n gwybod i'r llai i'n ddwylliant i'r llai i'r lluwydau o gyllidol, ond, mae'n ffiliwp yn ei ddweud i'r llai i'r llai i'r llai i'r llai. Felly, mae'n gwybod i'r llai i'r llai i'r llai i'r cwrwch Mae'r bobl yn ystod yn ymdill, ac yn wedi. A bod yna'r awl iawn. Adobi post script Type 3. Type 1 ddim yma'r cydweithio'r cydweithio'r cydweithio. A Type 3 ddim yma'r cydweithio'r cydweithio'r cydweithio, ac wedi'i ddechrau'r cydweithio'r cydweithio, dwi'n credu sut i ddim yn ddatblygu yn adobi cydweithio. Ameca OS wedi'u cefnod. Rasta efo'r cydweithio, ond raster can still be useful for some things. That one didn't take off because nobody uses the Amiga anymore. SCG Fonts was a short-term hack so that when people did some type and converted it to curves, you could save the curves and say this is what they were originally and we had the barest level of internationalisation that could just about do Arabic shaping and that was about it and it kind of sucked, but there we are. It was actually quite nice because the definition of a glyff was anything SVG can draw. Swallow the mic. Act like a rock star. Okay, so SVG Fonts, people mostly hate them because mainly they only come across them now because there are some iOS devices which can only use SVG Fonts for some reason. So, and these are going away, by the way, in SVG 2 there will be no SVG Fonts anymore. In Japan, NTT Dokomo Fones had coloured glyffs for emoji for Japanese teenagers to text each other on things. Okay, but that was in Japan so we didn't care about that here. And then there were a bunch of scriptal CSS-based workarounds which let you align various text multiple ways. That's fine in print, it doesn't work very well on the web. On the web you have to do sort of CSS hacks like cull on before cull on after all this sort of stuff to try and hide the text away that you're duplicating. I mean these are all very clever but this should be a better way to do it. So there's, oh fuck it, sorry. There's an emoji just in case people haven't seen what these are. There's at least two Firefox rendering bugs in that page. Anyone here from Firefox? No, okay. If you don't know about emoji, there's one word in Japanese that you have to understand, kawai, okay, that's what you say whenever you see these things. All right. So that's what they are and the thing is they started in Japan but they then became deployed much more. Two other major Japanese phone vendors also put them on. They were almost interoperable. Unicode 6 made them actually interoperable and therefore there was a need. Suddenly people went having ignored the needs of chromatic fonts for ages and ages. They suddenly went, oh, I suppose the Japanese phones were going to have to do something about it then. So Apple came up with something called Svix which shipped an iOS 6. They did not bother to document it. It has been reverse engineered multiple times and since they can't be bothered to document it, I can't be bothered to talk about it. Google on the other hand came up with a similar proposal. They did document it completely. They provided some open source Python code to actually let you create these things. So you notice that the dates that we started off were 1984 and now we're up to 2013. Don't worry, just sit down. You're all right. So really this is kind of up to the minute stuff. In you come. You weren't here when I dissed your overlay stuff. It's okay. So basically emoji was the catalyst for change but it's not all you can do with chromatic fonts. Not by a long shop. So let's have a look at what Google have. There's a couple of tables which are by analogy to the monochrome tables already in open type. They contain a 32-bit blue, green, red alpha in that order. Premultiplied, which means you've not got much colour information for the highly transparent parts. There's a certain subset of ping tags that you can use if you know about ping that list is meaningful to you. If not, don't worry about it. There is no animation, although there is an animated ping now so I don't know what they would do if they get one of those. Probably just pretend it's not animated. And this is implemented in free type 2.5 in June last year which means that it's in a bunch of things that use free type like Android for example. Microsoft meanwhile, so both of these previous things that I talked about were raster. You can have more than one size but unless you've got the exact size that you want on the exact pixel grid that you want you're going to have to down sample from a bigger one so the advantages of hand-tuned obsessive pixel pushing go away really rapidly. Okay, so what Microsoft did was they came up with two new tags. One called colour, which contains basically a stack of true type outlines and one called CPAL, which is a palette. That means that they use a similar rendering path to existing true type. I say similar, not the same because you still have to take it. If you have a single colour and you rasterise it you will have a certain amount of anti-aliasing around the edge of the background colour. If you do that in a simple minded way with multiple colour things then just slap them all together you're going to have nasty white healers everywhere and it's not going to look good. Similarly, if you print it you'll still have to do blocking and trapping. It can only do solid fill because each of the individual components can only have a single colour fill. It does however have hinting which means that most of the type guys really like this one better than all the others because they can continue to do obsessive hinting on it. It however has no gradient animation and as far as I can see it can't really have them added very easily. It shipped in Microsoft Windows 8.1 in August. There was a presentation at Typecon in August last year where Michelle Perham demoed this and showed it working. I don't have Windows 8.1 I haven't actually seen it working myself. Just to give you an example this is the on-screen keyboard from Windows 8 with emoji which are in Glorious Monochrome. That is the same thing in Windows 8.1 using their own colour and sepal. It works, allegedly. This is the sort of thing that you can do with it. This is one of their demos. Oh, I'm doing well. 10 minutes. This is a font called Mingle. It's obviously based on the old American 19th century woodcut types. Complete with do not cut this book and all sorts of stuff. They obviously had loads of fun making this demo. But as you can see the top one is really solid colours and the bottom one uses three or four colours together to give the illusion sort of a gradient while not actually producing one. Okay, SVG and OpenType which, to be honest, is the one that I'm most interested in. It was started as a W3C community group. Why would you care that that was where it started? Because it comes under the W3C royalty-free licence. Which means that when we finish we've produced the final report. Everyone had to sign off on it and make pattern commitments on behalf of their companies. Which means that everyone has a royalty-free licence to use it whether they were involved in making it or not. And all of the companies who were involved in doing it have sort of a mutual non-aggression pact. If anyone of them sues the other one for patent infringement suddenly these free patent licences that they didn't know they had a licence to those patents all go poof and suddenly they're liable. So it makes it very risky, deliberately makes it very risky to go suing each other for stupid patent stuff. And this has been implemented in Firefox 26. As of Firefox 28 it's turned on by default. Okay, so what's in it? You have one or more SVG documents. Glyffs within a single document can share resources like gradients or filters or whatever it is. You cannot link across documents, across SVG documents. Also the actual document you're using it in has no access to the SVG. The SVG has no access to the document you're using it in. How many people have heard of CSS variables? Yes. I considered saying that but they're actually now called CSS custom properties for various reasons, but that's the same thing actually. So you can use these because, okay, colour fonts. These are great. Who wants to use the colours that were actually baked in by the font designer? You want to your own colours that fits into your own design. That's how you do it with SVG and OpenType. You use these CSS variables and custom properties. It does also use the CPAL table. We did a little bit of work with Microsoft once these proposals came out to harmonise it. So CPAL is actually shared between the SVG table and the Microsoft colour table. They can both use it. It's mandatory in the Microsoft one, it's optional in SVG. Originally there was a notion of having double sets so you could have a dark and light and a light on dark palette. That's sort of gone away now to a more general. You can have multiple palettes and name them and stuff. So what's good about it? Well, it keeps the expressive power of the graphics. You can do gradients. You can have opacity, you can have opacity masks. You can do clipping, you can have filter effects. You can have hatching, that's new in SVG2, but you can use that too. You can use animation, by the way, also new in SVG2. You're going to talk about that, aren't you? Never mind. Come to his talk about SVG2. You'll learn all the stuff that you can do in it. Anyway, basically all the graphic stuff is still there, which is good. And then for people who worry about security, it uses the secure embedded subset of SVG. This is the same as you would use if you had SVG as an image element in HTML. What that means is there is no scripting. Scripting can't kick off. It can't fetch external resources. It can't go off to the web and grab other things. It can't call back home and say, someone's just used this font. This is cool. Click, click, click, count. There's no interactivity. It can't track where your mouse cursor is or anything nasty like that. Also, there's another restriction. There are no text elements, kind of obvious. If you have a font and the font contains text elements, and the text elements have a font, you'll disappear up your own right. Also, no foreign object. A foreign object is how you put HTML inside SVG, and having HTML inside a font glyph definition would be just kind of weird. So we stopped that too. You can inherit. You can get the system fill and stroke and the dash array and all that sort of stuff. You can bring that stuff in. Use it how you want inside your SVG. So, for example, you could take the fill colour that's being used and use that as a stroke if you wanted. I should point out, by the way, that for SVG and OpenType, most of the other font formats that are vector, you'd have to draw a closed shape and fill it in. You can do that too, but you can also just draw a line and stroke it, which is another way to do things that's quite nice. And you can have overlaps as well, which is, again, nice. I thought I'd been wildly out of time by this point, which is why I was speaking really, really fast. Five minutes. Awesome. In that case, I can hit you with a slide of code. Who's going to tell me what that does? I already told you what the first three lines are. It says, no, you can't have text and no, you can't have foreign object. And there's two ways to define that. One is to have a spec that says you must never put this in here, but people will. So this does, if you put it in there, it doesn't do a thing. It doesn't produce any rendering. It doesn't appear at all. The rest of it is basically bringing in stuff from the environment. It's bringing in SVG2 properties here that get you the context. It's sort of like inheritance, except instead of being in a tree system, it's where something is used, not where it's defined in the tree. It's in a different place, which is useful here because the SVG document and the document you're using a font in are entirely different documents. So at the point at which text is using this font, the font can bring in what colours are being used right there and use them. Okay, good. So let's now look at implementations. For the sake of space, I've used two Euro signs to mean commercial because I couldn't fit it in. It's called font creator. It is cost money. It runs on Windows. It supports the Microsoft colour C-pal only. Let me know when you've got that photo. The slides will be on the web in a bit. But if you can't wait, that's fine. Here's one called glyphs.app, which I guess as you can imagine runs on OSX. It costs money. It supports something. The web page is quite coy about what it actually does and what it supports, but I believe that it exists. It is reading a Microsoft font, so apparently either someone is very good at photoshop or it can read the Microsoft proposal. Robo font also costs money, also runs on OSX and also does the Microsoft one. I don't know if it does anything else because again, their documentation is a little sketchy. Trans type, this also costs money, runs on both Windows and OSX. It claims to support all of the features. It claims to import SVG colour fonts, which it does not. I have a bug in for that. It claims to export SVG in open type, which it does not. It claims to export the Microsoft one, which it does and I've proved that, but since I don't have Windows 8.1, I can't actually run it, but I've had a look at the fonts and it appears to have the right bits in it. This is an example of, excuse me, this is an example of a font which was originally sold as a set of nine. It's called shuffle, you know, bring in nine different fonts, put it on the same text, overlay it, line it all up and put different fill colours on. It's based on Indian signpating techniques, so it's called kafil painter. So this is actually one font made in about five minutes using this tool, so that's quite cool. So far, these are all commercial. Google, as I mentioned earlier, has a Python script which lets you stick some pings into to make their format, which is okay. It's not exactly a development environment, though. Roberto Callaghan has a thing called SVG Open Type Workshop, which runs in a browser. You load in a font, you load in some SVG, it glues them together and spits it out. It's quite clever, but again, not exactly ideal. Implementations would be very welcome. Open source implementations would be wonderful for this sort of stuff. This is really cool. There are a lot of hands of people that are trying to keep their own interests or have their own agendas or whatever. There's a lot of expressive power that can be used here. Let's go on and use it. Questions? Are there any provisions that are switchable layers in these fonts? The last example you showed probably had different combinations of these nine individual fonts which would all make sense, basically. A mechanism to flip a switch and change the font. What you can't know, you can't move around the layers in opposite order. For the SVG one, they're in the order that the SVG document has them. They're in the order that they are on the table. What you can do is you can switch some off effectively by setting them to transparent black or transparent anything. That layer will then not show, but you can't flip the layers to the order that you want. Typically what happens in both of these is that you have a base layer which is black or something that's effectively the full back layer. That's where the metrics come from. Everything else has the same metrics but takes up different space. Takes up as much space as it needs to overlay and that sort of thing. You don't have to do just overlay fonts in SVG. The example I showed did, but you can do all sorts of other stuff as well. Other questions for Chris? Let's get some free software implementations of this. Thank you very much. How many people here could see yourself using this sort of thing if someone else made a tool for it? Yeah, that's what I thought.